seoraporu.co

Como reduzir os Core Web Vitals e o LCP

O que são os Core Web Vitals?

Core Web Vitals são três métricas de desempenho fundamentais definidas pelo Google para medir a experiência do usuário: LCP (Largest Contentful Paint — tempo que leva para o maior elemento de conteúdo aparecer na tela), INP (Interaction to Next Paint — velocidade de resposta à interação do usuário) e CLS (Cumulative Layout Shift — quantidade de deslocamento visual que ocorre durante o carregamento da página). Essas três métricas são medidas com base em dados reais de usuários (field data); ou seja, não são calculadas a partir de testes de laboratório (por exemplo, uma verificação pontual), mas sim a partir de dados coletados nas condições reais de dispositivos e redes dos visitantes.

Essas três métricas representam diferentes dimensões da experiência do usuário: o LCP dá a “sensação de quão rápido a página carregou”, o INP responde à pergunta “com que rapidez a página responde à interação” e o CLS mede se “a página está saltando diante dos meus olhos”. A experiência geral do usuário não pode ser considerada totalmente “boa” a menos que todas as três métricas apresentem bons resultados.

Este guia se concentra especialmente no LCP, pois geralmente é a métrica mais passível de intervenção e a área de melhoria mais concreta; uma imagem grande de destaque ou um vídeo, por si só, pode atrasar o LCP em segundos.

Por que isso é importante?

Essas métricas refletem diretamente a experiência do usuário: uma página que carrega devagar, demora a responder às interações ou fica constantemente tremendo afasta o usuário do site. O Google utiliza os Core Web Vitals como um dos sinais de classificação; o impacto dessas métricas pode ser mais evidente especialmente nas buscas em dispositivos móveis, já que os dispositivos e redes móveis costumam ser mais limitados do que os de desktop.

De acordo com os limites atuais, para que o LCP seja considerado “bom”, ele deve ficar abaixo de 2,5 segundos, e essa métrica deve ser atingida em pelo menos 75% dos usuários reais. Um site que ultrapasse esse limite, mesmo que funcione tecnicamente, será classificado como “lento” do ponto de vista da experiência do usuário, e isso pode afetar negativamente tanto a taxa de conversão quanto a classificação nas buscas.

A origem da lentidão do LCP pode variar de site para site: em alguns, a causa é uma imagem grande e não compactada, enquanto em outros a principal causa é uma resposta lenta do servidor (TTFB) ou scripts de terceiros que bloqueiam a renderização (por exemplo, redes de publicidade, ferramentas de análise). Por isso, antes de iniciar a otimização, é importante identificar qual elemento foi sinalizado como LCP.

Como corrigir isso?

Exemplo

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Exemplo ruim: configurar o carregamento lento (lazy load) da imagem LCP <img src="hero.jpg" loading="lazy"> para carregamento lento (lazy load) — isso impede que o navegador baixe a imagem imediatamente durante o carregamento da página e prolonga significativamente o tempo de LCP.

Erros comuns