Como corrigir pontuações ruins de Core Web Vitals?

Descubra qual métrica falha, em qual dispositivo e em qual grupo de páginas; o relatório Core Web Vitals do Search Console mostra as três métricas a partir de visitas reais no Chrome. Depois, corrija a causa por trás dessa métrica: no caso do LCP, a rapidez com que a imagem ou o texto principal chega; no caso do INP, as tarefas longas de JavaScript que atrasam as respostas; no caso do CLS, o conteúdo que aparece sem que haja espaço reservado para ele. Os dados de campo cobrem os últimos 28 dias, por isso avalie a correção ao longo de um mês.

Passo 1: descubra o que está falhando

1. Abra o relatório Core Web Vitals no Search Console e escolha Mobile ou Desktop; os dois são avaliados separadamente.
2. Abra um dos problemas listados, por exemplo um problema de LCP em dispositivos móveis, para ver o grupo de URLs afetado e exemplos de URLs. O grupo inteiro compartilha um único status, definido pela pior métrica.
3. Passe uma URL de exemplo pelo PageSpeed Insights para ver os dados de campo dessa página ao lado de um teste de laboratório que ajuda na depuração.

Ferramentas de laboratório como o Lighthouse não conseguem medir o INP, porque ninguém interage com a página, e por isso informam o Total Blocking Time. Para o INP, a medição com usuários reais é a referência confiável.

Como corrigir um LCP lento

O guia de otimização do LCP do web.dev divide o LCP em quatro partes: tempo de resposta do servidor, atraso antes de o recurso principal começar a carregar, tempo de download dele e atraso antes de ele ser renderizado. Comece pela maior parte:

• Torne a imagem do LCP detectável no HTML inicial, em vez de injetá-la com JavaScript ou CSS, e atribua a ela fetchpriority="high".
• Nunca aplique lazy-load à imagem do LCP.
• Entregue-a menor: com as dimensões corretas, um formato moderno, compressão e uma CDN próxima dos visitantes.
• Remova recursos que bloqueiam a renderização: folhas de estilo menores, nenhum script síncrono no <head> e renderização no servidor para o conteúdo principal.
• Acelere a resposta do servidor: reduza os redirecionamentos e permita que as páginas sejam armazenadas em cache na borda.

Como corrigir um INP ruim

O guia de otimização do INP divide cada interação em atraso de entrada, tempo de processamento e atraso de apresentação:

• Atraso de entrada: reduza o JavaScript executado durante o carregamento da página, para que a thread principal esteja livre quando alguém tocar na tela.
• Tempo de processamento: divida manipuladores de eventos longos em tarefas menores e ceda o controle à thread principal, fazendo primeiro a atualização visível e adiando o restante.
• Atraso de apresentação: mantenha o DOM pequeno, evite forçar o layout lendo estilos logo após alterá-los e use content-visibility em páginas longas.

Como corrigir um CLS alto

O guia de otimização do CLS lista as causas mais comuns e suas correções:

• Imagens e vídeos sem dimensões: adicione os atributos width e height, ou um aspect-ratio em CSS.
• Anúncios, embeds e iframes: reserve o espaço deles no layout antes do carregamento.
• Conteúdo injetado acima do conteúdo existente: use um espaço reservado do tamanho certo ou insira o novo conteúdo abaixo do que o visitante está lendo.
• Fontes web: faça o preload das mais importantes para que o texto não seja reorganizado tardiamente.
• Animações: anime transform em vez de propriedades como top ou left.

Páginas que podem usar o cache de avançar/voltar do navegador também evitam mudanças de layout quando os visitantes retornam a elas.

Passo 3: confirme a correção

Faça o deploy, abra o problema no relatório Core Web Vitals e inicie a validação. O Google monitora o grupo por 28 dias; a validação não aciona um novo rastreamento nem acelera o processo, apenas acompanha se o problema foi resolvido. Como os dados de campo são calculados em uma janela móvel de 28 dias, espere que o relatório melhore gradualmente. Para saber o que cada métrica significa, consulte O que significam LCP, INP e CLS?.

Como o AutoPSEO ajuda

O relatório Core Web Vitals do AutoPSEO exibe em gráficos cerca de seis meses de dados semanais do Chrome UX Report do seu site ou de uma URL específica, em smartphone, computador ou tablet. Assim, você vê a semana em que uma correção fez efeito, ou a semana em que uma release piorou as coisas, sem esperar o fim da próxima janela de 28 dias.