Core Web Vitals no blog: como medir e melhorar LCP, INP e CLS
Para melhorar as Core Web Vitals de um blog, analise um artigo publicado no PageSpeed Insights e identifique se o problema está no carregamento do conteúdo principal, na resposta aos comandos ou na estabilidade da página. Compare os resultados de celular e computador e corrija a causa da métrica afetada, em vez de instalar vários plugins para tentar aumentar uma nota.
O que LCP, INP e CLS medem?
Core Web Vitals são indicadores de experiência na Web. Um artigo pode aparecer rapidamente, mas travar quando o leitor abre o menu; também pode responder bem e deslocar o texto quando um anúncio aparece. Por isso, as três medidas precisam ser interpretadas separadamente.
| Métrica | O que observar no blog | Faixa considerada boa |
|---|---|---|
| LCP — Largest Contentful Paint | Quando a maior imagem ou bloco de texto visível aparece. | Até 2,5 segundos. |
| INP — Interaction to Next Paint | Quanto uma interação demora para produzir a próxima resposta visual. | Até 200 milissegundos. |
| CLS — Cumulative Layout Shift | Instabilidade visual causada por deslocamentos inesperados do conteúdo. | Até 0,1; é uma pontuação sem unidade de tempo. |
Esses limites são avaliados no percentil 75, separadamente por categoria de dispositivo. Por exemplo, atingir a meta nesse percentil significa que pelo menos 75% das observações ficam no limite recomendado ou abaixo dele; não é a média nem o melhor teste. Quando há dados suficientes para as três métricas, todas precisam estar na faixa boa para a avaliação ser aprovada. Veja as definições e metas oficiais das Core Web Vitals.
Como analisar um artigo no PageSpeed Insights
Escolha um endereço que um visitante consiga abrir sem entrar no WordPress. A tela do editor, uma prévia privada ou uma página protegida por senha não representa o mesmo conteúdo público.
- Abra o artigo publicado e copie o endereço final, depois de eventuais redirecionamentos.
- Acesse o PageSpeed Insights, cole o endereço e inicie a análise.
- Na opção de dispositivos móveis, registre o resultado dos dados de visitantes e os diagnósticos de laboratório.
- Repita a leitura na opção de computador e anote quais métricas precisam melhorar, o endereço e a data da análise.
Comece por páginas representativas: um artigo simples, outro com várias imagens e outro com tabelas ou códigos. Se apenas a página inicial for analisada, um problema do modelo dos artigos pode passar despercebido. Para comparar uma alteração, use o mesmo endereço e a mesma categoria de dispositivo; comparar o celular de um artigo com o computador de outro não isola o efeito da mudança.
Por que os dados de visitantes e a nota do teste diferem?
Os dados de campo vêm do Chrome User Experience Report (CrUX), com experiências coletadas nos últimos 28 dias. Confira se o relatório corresponde ao URL específico ou à origem, que reúne páginas do site. Se faltarem amostras para o URL, a ferramenta pode mostrar a origem; se também faltarem ali, não exibe esse conjunto de dados. Ausência de dados não significa desempenho perfeito nem valor zero.
O Lighthouse executa uma análise de laboratório em condições simuladas. Uma nota de desempenho de 90 ou mais é boa nessa escala, mas não equivale à aprovação das Core Web Vitals de visitantes reais. Há uma exceção na avaliação do PSI: sem INP suficiente, LCP e CLS bons permitem aprovação; sem LCP ou CLS suficiente, a avaliação não pode ser determinada. Essas regras estão na documentação do PageSpeed Insights.
Imagine que uma imagem pesada foi substituída hoje. Um novo teste pode detectar melhora imediatamente, enquanto a janela de visitantes ainda inclui acessos anteriores. Registre as duas medidas: o laboratório ajuda a investigar a alteração; o histórico mostra como ela chega às pessoas ao longo do tempo.
Como investigar um LCP alto
Primeiro, identifique o elemento responsável pelo LCP nos diagnósticos. Pode ser a imagem de abertura ou um bloco de texto. Comprimir uma imagem no fim da página não resolve necessariamente o atraso do elemento principal.
O guia de otimização de LCP divide a investigação em quatro partes:
- Tempo até o primeiro byte (TTFB): demora para começar a receber o HTML; examine servidor, cache e redirecionamentos.
- Atraso para iniciar o recurso: o navegador descobre tarde a imagem necessária, por exemplo, por carregamento dependente de JavaScript ou lazy loading.
- Duração do download: o recurso demora a chegar; avalie dimensões e tamanho do arquivo.
- Atraso para renderizar o elemento: o recurso chegou, mas scripts, estilos ou condições de exibição impedem sua apresentação.
Uma imagem que aparece logo na primeira tela não deve ser adiada automaticamente com todas as imagens inferiores. Se ela for o elemento LCP, verifique essa configuração no tema ou plugin. Use uma resolução adequada ao tamanho exibido e compare qualidade e peso; a conversão de imagens para WebP explica uma possibilidade. Quando o LCP é texto, as fases ligadas a um arquivo de imagem podem não existir separadamente.
Antes de ativar uma opção de cache ou otimização, salve a configuração atual. Se a demora ocorre antes do HTML, reduzir a imagem pode ajudar pouco; se o download domina, trocar o servidor sem tratar o arquivo pode deixar a principal causa intacta.
Como investigar um INP alto
O INP observa interações como cliques, toques e teclado ao longo da visita. Ele mede a chegada da próxima resposta visual, não a conclusão de toda uma operação remota: mostrar que uma busca está em andamento pode acontecer antes de todos os resultados chegarem. Rolagem sozinha não é uma interação incluída nessa medida; uma visita sem interações qualificadas pode não gerar INP. Consulte a explicação de como o INP é medido.
Reproduza ações reais no celular: abra o menu, use a busca e expanda o sumário. Observe se o toque demora a responder, se a interface congela ou se um comando precisa ser repetido. Um carregamento inicial rápido não demonstra que essas ações funcionam bem.
O guia para otimizar o INP recomenda investigar atrasos antes do processamento, durante os eventos e antes da apresentação visual. JavaScript ocupando a execução principal pode atrasar a resposta. Examine plugins duplicados, recursos que não são usados e scripts de terceiros; desative ou altere um componente por vez em um ambiente de teste.
O Total Blocking Time (TBT), mostrado em testes de carregamento, ajuda a localizar bloqueios, mas não substitui o INP de interações reais. Depois de adiar scripts, confirme menu, busca e controles de consentimento. Ganhar uma nota e impedir o leitor de usar uma função é motivo para restaurar a configuração anterior.
Como impedir que imagens e anúncios desloquem o texto
O guia de otimização de CLS destaca imagens sem dimensões, espaços de anúncios ou incorporações sem reserva e mudanças relacionadas a fontes e conteúdo dinâmico. Reserve espaço compatível com o recurso: dimensões de imagem ou proporção permitem organizar o texto antes de o arquivo chegar.
Confira anúncios e vídeos no celular e no computador. A altura que funciona em uma largura pode ser inadequada em outra. Evite recolher bruscamente um espaço de anúncio já apresentado quando ele fica vazio; isso também pode deslocar o texto.
Observe o artigo inteiro durante a leitura, não apenas a primeira tela. Um banner que chega depois ou uma imagem carregada perto da rolagem pode causar um salto que o teste inicial não revela. O elemento apontado como deslocado nem sempre é a causa: um parágrafo pode ter sido empurrado por um anúncio inserido acima dele.
Para investigar, anote o momento do salto e o conteúdo que apareceu ou mudou imediatamente antes. Faça o ajuste no componente responsável e confira também o comportamento quando ele demora a carregar ou não é exibido.
Como confirmar a melhora sem quebrar o blog
- Guarde a referência inicial. Registre URL, dispositivo, métricas, elemento afetado e configuração relevante.
- Altere uma causa provável. Por exemplo, substitua apenas a imagem principal ou mude uma opção específica de script.
- Confira a versão entregue. Se houver cache, atualize-o pelo procedimento do site e verifique se o recurso novo aparece. Cache e adiamento de JavaScript têm funções diferentes.
- Repita a comparação. Use o mesmo URL e dispositivo, faça mais de uma observação e teste as funções que o leitor utiliza. Uma execução isolada pode variar por rede e outras condições.
- Reverta quando necessário. Se a alteração quebrar a interface ou piorar outra parte importante, restaure a opção ou arquivo anterior e investigue outra hipótese.
Para escolher uma solução de cache conforme a causa, veja os critérios para plugins de cache do WordPress. Não ative várias ferramentas com funções sobrepostas sem saber qual delas controla cada recurso.
Core Web Vitals boas ajudam a experiência, mas não garantem uma posição na busca. A orientação do Google sobre experiência na página também considera a utilidade geral da página. Priorize um artigo legível, estável e funcional, com conteúdo que responda à pergunta do leitor.
