Como ler o PageSpeed Insights: Core Web Vitals em linguagem simples
Testou o seu website no PageSpeed Insights e vê um número a vermelho, por exemplo 45. O que significa isso e qual é a gravidade? Neste artigo fica a saber como ler o relatório, o que medem os três Core Web Vitals e o que pode melhorar.
As três medições
| Medição | O que mede | Bom | Precisa de melhoria | Mau |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | A rapidez com que o maior elemento de conteúdo aparece no ecrã, geralmente a grande imagem no topo | até 2,5 s | 2,5 a 4 s | acima de 4 s |
| INP (Interaction to Next Paint) | A rapidez com que a página reage quando clica, toca ou escreve | até 200 ms | 200 a 500 ms | acima de 500 ms |
| CLS (Cumulative Layout Shift) | O quanto a página se desloca durante o carregamento (uma pontuação, não um tempo) | até 0,1 | 0,1 a 0,25 | acima de 0,25 |
Uma página atinge os Core Web Vitals se pelo menos 75 por cento das visitas obtiverem uma boa pontuação nos três critérios, separadamente para dispositivos móveis e computador. Portanto, não conta o seu computador rápido, mas sim a experiência da maioria dos visitantes, inclusive num telemóvel mais antigo. Em março de 2024, o INP substituiu a medição mais antiga, o FID. Se ainda encontrar o FID referido em algum lado, essa informação está desatualizada.
Dados de campo e dados de laboratório
O PageSpeed Insights mostra dois tipos de medições, que frequentemente apresentam números diferentes:
- Dados de campo (no topo): medições de visitantes reais com o Chrome ao longo dos últimos 28 dias. É isto que determina se atinge os Core Web Vitals. Se a sua página tiver poucos visitantes, verá os números de todo o seu site, ou nenhum dado de campo.
- Dados de laboratório (abaixo): um teste com o Lighthouse, que carrega a página uma vez num telemóvel e ligação de gama média simulados. É daqui que vem o número de 0 a 100. O Lighthouse não consegue medir o INP, pois não há ninguém a clicar.
Utilize os dados de laboratório para encontrar causas e para ver de imediato, após uma melhoria, se esta teve efeito. Comece pelo separador Móvel: aí a situação costuma ser pior, e o Google dá especial atenção à versão móvel do seu site.
Qual é o peso disto no Google?
O Google refere que os Core Web Vitals contam para a classificação. No entanto, o Google mostra sempre o conteúdo mais relevante, mesmo que essa página não seja a mais rápida. O número de 0 a 100 provém do teste de laboratório e não é uma avaliação do Google; essa avaliação baseia-se nos dados de campo. Obter uma pontuação perfeita apenas para o Google não é, segundo o próprio Google, a melhor forma de investir o seu tempo. Procure situar-se na zona verde ou, no mínimo, laranja, sobretudo porque os visitantes abandonam uma página lenta ou que se desloca.
O que pode melhorar na própria página
- Imagens mais pequenas. Uma foto com milhares de pixels de largura para um espaço de 800 pixels é a causa mais comum de um LCP lento. Reduza as fotos antes de as carregar e utilize um formato moderno, como WebP ou AVIF.
- Largura e altura em cada imagem. Sem
widtheheight, o navegador não sabe de quanto espaço uma foto necessita, e o texto desloca-se quando ela chega. Isso aumenta o CLS:<img src="bloemstuk.webp" width="800" height="600" alt="Bruidsboeket met witte rozen">
- Não aplicar carregamento lento à imagem principal.
loading="lazy"é bom para fotos mais abaixo, mas não para a foto que já está visível ao abrir a página. Caso contrário, o navegador fica à espera precisamente da foto que determina o seu LCP. - Não inserir nada posteriormente acima do conteúdo. Uma barra de cookies, um anúncio ou um widget que empurre a página para baixo faz com que tudo se desloque. É preferível que essa barra fique sobreposta à página.
- Menos scripts de terceiros. Um INP mau deve-se quase sempre a demasiado JavaScript: temas pesados, sliders, janelas de chat e rastreadores. Analise com atenção cada plugin ou serviço incorporado.
O que o servidor faz
Tudo começa com a primeira resposta do servidor, o Time to First Byte (TTFB). Este não é, em si, um Core Web Vital, mas com uma primeira resposta lenta, um bom LCP é quase impossível. Como valor de referência, 0,8 segundos ou menos é bom. As causas costumam ser um site sem cache, pouca capacidade de processamento ou redirecionamentos. O servidor também deve enviar os ficheiros de texto comprimidos (compressão com gzip ou Brotli). Pode saber como ajustar o lado do servidor em O meu website está lento ou utiliza demasiado CPU: assim o torna mais rápido e no manual do DirectAdmin, O meu website está lento.
No AI Bouwer e no WordPress
Um site do AI Bouwer define a largura e a altura nas imagens cuja medida é conhecida, carrega a primeira foto de uma página de imediato e com prioridade, deixando as restantes apenas para quando ficam visíveis, e cria uma versão mais pequena das fotos grandes ao publicar. No WordPress, um plugin de cache e a redução do tamanho das imagens são o que mais ajuda. Pode ler mais sobre isto no curso gratuito de WordPress, nas lições O que torna um site lento, e como se mede isso? e Imagens, PHP e outros ganhos de velocidade.
Para saber mais
- web.dev: Web Vitals (em inglês)
- Sobre o PageSpeed Insights (em inglês)
- Google: experiência da página e Pesquisa Google (em inglês)
- Google: o relatório Vitalidade do site