Framehole: brecha do PageSpeed ​​6.0 para uma pontuação perfeita e fácil

Todo bom desenvolvedor da web sabe que o PageSpeed ​​Insights do Google e o Lighthouse de código aberto usado nos bastidores são as ferramentas mais avançadas para ajudar a identificar o desempenho relativo de um site. Eles também oferecem insights importantes sobre quais mudanças você pode fazer para melhorar essa velocidade percebida. O PageSpeed ​​tornou-se a medida padrão ouro de velocidade e lentidão na web.

Não faz mal que o próprio Google esteja agora rastreando essa pontuação do PageSpeed ​​de cada site e usando-a como uma das muitas entradas para determinar quem chega ao topo dos resultados da pesquisa e quem é exilado no purgatório da página 10.

Há toda uma indústria e muitos milhões de dólares mudando de mãos apenas para otimizar e melhorar essa pontuação na esperança de chegar mais perto da pontuação perfeita inatingível de 100. A mais nova versão do PageSpeed/Lighthouse 6.0 inclui um novo conjunto de métricas favoritas para desenvolvedores em todos os lugares para otimizar. Essas novas métricas são: Maior Pintura de Conteúdo (LCP), Deslocamento de Layout Cumulativo (CLS) e Tempo Total de Bloqueio (TBT). O Google tem um artigo inteiro explicando esses novos "Web Vitals", que faz um excelente trabalho detalhando o âmago da questão de como eles são medidos.

Com este novo lançamento, é uma nova oportunidade para a indústria de desempenho na web vender mais serviços, pois os sites agora precisam de mudanças novas e diferentes em busca dessa pontuação máxima. Bem, não há necessidade de gastar um centavo, vou lhe mostrar uma mudança simples que imediatamente leva você das profundezas do inferno de 60 pontos, até o céu de 100 pontos.

TLDR: o PageSpeed ​​não considera mais os impactos de velocidade de incorporações de terceiros, como YouTube e anúncios

Se você quer apenas a essência disso, a resposta é que as últimas mudanças do Google colocam um peso pesado no Largest Contentful Paint. Esta é a medida de quanto tempo leva para o maior elemento na tela aparecer ao carregar um site. É um bom proxy para a percepção do usuário sobre a velocidade de carregamento. O problema é que o Largest Contentful Paint não considera nenhum conteúdo incorporado, mesmo que esse conteúdo seja tecnicamente qualificado como o maior elemento acima da dobra.

Sem especular sobre as motivações para não trazer à tona o impacto no desempenho de conteúdo incorporado de terceiros, como vídeos do YouTube e grandes incorporações de publicidade, eu diria simplesmente que isso incentivará as pessoas a fazer as alterações erradas para melhorar a velocidade e fará a web retroceder.

Por exemplo, isso parece absurdo, embora não seja improvável, dada a importância da pontuação do PageSpeed. Melhoramos a pontuação do PageSpeed ​​de um site de 60 para 100, apenas com o iframe da versão lenta original do site. Os comandos rápidos apenas para confirmar os resultados estão aqui, mas continue lendo abaixo para ver como um usuário otimizando sua pontuação progride para nossa solução Framehole definitiva.

 # Verify you have the new Lighthouse 6.0 installed npm install -g lighthouse # This one should have a score somewhere around 60 :( lighthouse https://webvitalsfail.b-cdn.net/ --view # Instantly to 100 lighthouse https://webvitalsfail.b-cdn.net/anything-100.html --view

Cat Dance v1 - Link

Este é um site de exemplo simples para mostrar uma página promocional de aparência típica para nosso aplicativo móvel, "Cat Dance". Ele apresenta um gif animado super legal para demonstrar os gatos dançantes que você obtém ao instalar nosso aplicativo pronto para uso no seu telefone. Agora vamos conferir a pontuação do Lighthouse 6.0 para este site:

Uau, uma pontuação de desempenho de 60 é dolorosa para superdotados como nós. Como esse site simples pode ser tão lento de acordo com o Google? Vamos nos concentrar na "Maior Pintura de Conteúdo", pois essa é uma das novas métricas introduzidas nesta versão.

Isso é super útil, pois recomenda o uso de um vídeo para conteúdo animado e nos mostra que o maior elemento Contentful Paint é o gif animado de nossos gatos dançantes. Legal, vamos para:

Cat Dance v2 - Link

Nesta versão, substituímos o gif animado por um mp4 reproduzido usando o elemento de vídeo HTML5 nativo. Isso deve ser muito melhor, pois os mp4 foram feitos literalmente para conteúdo animado e serão muito menores do que o gif animado comparável.

Bem, isso certamente está se movendo na direção certa. Melhoramos em 14 pontos apenas mudando para um mp4 para a animação de nossos incríveis gatos dançantes. Passar de um LCP de 104,9s para 9,9s é certamente uma melhoria substancial. Mas não estamos satisfeitos com um 74. Isso é como uma nota "C" e somos um grupo de conquistadores A+.

Parece que nosso LCP agora é gerado pelo vídeo, o que faz sentido em vez do gif animado anterior. Mas talvez estejamos fazendo um trabalho ruim com a codificação, a imagem do pôster ou algo assim, então vamos brincar com isso a seguir.

Cat Dance v3 - Link

Para esta versão, usaremos apenas o YouTube para o vídeo animado do gato. Dessa forma, se for algo relacionado à codificação de vídeo, isso ajudará a eliminar isso. Em geral, talvez nossa codificação de vídeo ingênua esteja nos impedindo, então vamos ver qual pontuação obtemos dessa maneira.

Espere um segundo, esses caras são gênios, eles levam meu PageSpeed ​​Score até 99. Devemos ter realmente errado em nossa codificação de vídeo para ter causado o score de 76, certo?

Tem algo errado aqui? Nas versões anteriores, os gatos dançantes eram sempre o maior elemento da tela. E olhando para as capturas de tela deste teste mostra que o vídeo ainda está do mesmo tamanho nesta versão. Então, por que está afirmando que o texto do nosso <h1> é o maior elemento? A resposta está na descrição do Google da métrica de maior conteúdo de conteúdo. Essa métrica inclui o maior elemento, incluindo vídeo, imagens, SVGs, MAS NÃO IFRAMES

Espere o que? Isso não pode estar certo. Se o iframe é o maior elemento e carrega devagar como melado, não importa... não conta! Portanto, os iframes são como buracos negros mágicos de desempenho, onde podemos incorporar nossos elementos lentos ou grandes e eles não afetarão nossa pontuação de desempenho. De jeito nenhum! Vamos tentar isso.

Cat Dance v4 - Link

Para testar nossa teoria, voltaremos ao nosso site exato da versão 1 com o grande gif animado e tudo mais. Faremos apenas uma única alteração. Vamos carregar o gif animado em um iframe e ver o que acontece com o nosso PageSpeed ​​Score.

Caramba... isso pode realmente ser a solução? Nós apenas pegamos os problemas que estão causando a diminuição da pontuação de velocidade do site, os jogamos em um iframe e, em seguida, BOOM, sem mais problemas. Quero dizer, sabemos que isso não está realmente mudando a rapidez com que as coisas são carregadas, porque é o mesmo arquivo, mesmo tamanho, apenas carregado em um iframe. Assim como o que aconteceu ao usar a incorporação do YouTube, na verdade não mudou muito a velocidade. Iframes são apenas portais mágicos para bater o PageSpeed ​​Score, ao que parece.

Mas ter que mover todos os nossos elementos lentos para iframes é meio chato...

Cat Dance v5 - Link Framehole'd

Precisamos de uma maneira mais simples de aumentar imediatamente a velocidade de qualquer site. Ter que substituir seletivamente elementos por versões iframed é super complicado e pode não valer a pena a longo prazo. Sabemos como trabalhar de forma mais inteligente em vez de mais difícil.

E se colocarmos o site inteiro em um iframe? Dessa forma, nossa solução seria separada da base de código real do site. Poderíamos até fazer esse tipo de coisa na borda, ou no NGINX, separando totalmente isso de impactar qualquer código existente.

Nossa v5 é apenas a página da v1, iframe em um wrapper vazio. Mesmo grande gif animado, sem otimizações. E agora passamos de 60 para 100. É o santo graal e nenhum trabalho precisa ser feito no site real.

Isso é idiota

Se você está pensando que este é o maior óleo de cobra que você já viu e nenhum desenvolvedor em sã consciência se importaria com essa mudança de pontuação, já que a velocidade subjacente não mudou nem um pouco, então acho que você está certo na frente do óleo de cobra, mas muito errado sobre se as pessoas se importam.

Lembre-se, o PageSpeed ​​é o padrão ouro em desempenho na web. O Google ainda usa essa pontuação para alimentar seu algoritmo. Se você nunca ouviu de um cliente que eles querem ver como seu produto afeta sua pontuação no PageSpeed, então você não conversou com clientes suficientes. Eles se importam porque o Google se importa , e a pontuação deve significar algo. Veja quantas palavras foram necessárias para eu explicar isso e imagine dizer a um cliente que ele está errado sobre o seu produto deixar o site mais lento versus a pontuação do PageSpeed ​​simplificada e fácil de entender, proclamando o quão errado você está.

Seja qual for a razão para isso, no final das contas, optar por excluir iframes dos cálculos de quanto tempo leva para o conteúdo mais significativo aparecer em um site é simplesmente errado!

Usar o tempo de exibição do maior elemento como indicador de velocidade em um site faz todo o sentido do mundo. Ele ainda afeta a percepção de velocidade, mesmo que seja carregado em um iframe. E avançar com uma pontuação que exclui conteúdo incorporado é prejudicial ao objetivo de tornar a web mais rápida. O conteúdo incorporado não recebe um passe livre, especialmente quando é a causa dos tempos de carregamento lentos.

Se a pontuação for lançada com essas métricas da web, teremos uma web incentivada a voltar para um site de retalhos com grande publicidade e incorporações de terceiros, desconsiderando completamente o custo de velocidade desses itens. Não tenha dúvidas de que haverá pessoas que implementarão exatamente o iframe de todo o site, conforme mencionado neste artigo, porque a gerência queria a maior pontuação de velocidade de página possível.

O comportamento é moldado pela forma como mantemos a pontuação