Reduzir LCP, CLS e INP para sair da faixa vermelha do Search Console e melhorar conversão.
O que são Core Web Vitals em 2026
São três métricas que o Google usa como sinal direto de ranqueamento: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) e INP (Interaction to Next Paint, que substituiu FID em 2024). Cada uma mede um aspecto diferente da experiência percebida pelo usuário.
LCP mede quanto tempo até o maior elemento visível carregar. Faixa verde é abaixo de 2.5 segundos.
CLS mede o quanto o layout pula durante o carregamento. Faixa verde é abaixo de 0.1 (escala absoluta, não percentual).
INP mede o tempo de resposta a interações do usuário (clique, toque, tecla). Faixa verde é abaixo de 200 milissegundos.
Site na faixa vermelha em qualquer uma das três perde posição em ranqueamento. Site na faixa amarela tem oportunidade significativa.
Diagnóstico antes de otimização
PageSpeed Insights (pagespeed.web.dev) é o ponto de partida. Cole a URL e ele mostra as três métricas para mobile e desktop separadamente. Atenção: PageSpeed usa lab data (simulação) E field data (CrUX, dados reais de Chrome users). Field data é o que conta para ranqueamento.
Para diagnóstico profundo, abra o DevTools do Chrome em Performance, grave um carregamento, e analise o trace. O elemento LCP fica destacado, e cada layout shift aparece anotado no timeline.
Cada template (home, blog post, página de produto) tem perfil de performance diferente. Otimize separadamente.
Otimizando LCP
LCP geralmente é a imagem hero ou texto principal. Para imagens:
Use formato moderno (AVIF preferido, WebP como fallback, JPG só em último caso). AVIF reduz peso em 50% sobre WebP sem perda visual.
Dimensione a imagem para o tamanho que ela é exibida. Servir imagem 4000px de largura para um container 800px é desperdiçar bandwidth.
Use srcset e sizes para entregar versão apropriada ao viewport. Mobile não precisa da versão desktop.
Adicione fetchpriority="high" no LCP. É um hint para o browser priorizar o download.
Não use lazy loading no LCP. Lazy loading atrasa o que deveria ser a primeira coisa a carregar.
Reduzindo CLS
Layout shift acontece quando elementos aparecem na tela depois e empurram outros. Causas comuns: imagens sem dimensões declaradas, fontes web carregando depois e mudando métricas tipográficas, banners de cookies/ads injetados após o carregamento.
Para imagens, declare width e height (mesmo que a renderização final seja por CSS). O browser reserva o espaço.
Para fontes web, use font-display: swap E pré-carregue a fonte principal com preload. Considere fonts métricos próximos ao fallback do sistema.
Para elementos dinâmicos (carrosséis, embeds, ads), reserve o espaço com min-height ou aspect-ratio no CSS. Mesmo que o conteúdo não tenha carregado, o espaço está reservado.
Reduzindo INP
INP mede a latência de interação. Geralmente é JavaScript bloqueante na thread principal.
Identifique tasks longas (>50ms) no Performance do DevTools. Cada barra vermelha em Main é um bloqueio.
Quebre código longo em chunks menores. Use setTimeout, requestIdleCallback ou scheduler.yield para dar respiro ao browser.
Defer ou async scripts não críticos. Análise de tracking pode esperar dois segundos sem prejudicar a métrica.
Para sites pesados de JS (SPAs), considere code-splitting agressivo. Carregue só o JS da rota atual.
Critérios de qualidade
Páginas-tipo principais (home, post de blog, produto) na faixa verde para LCP, CLS e INP em mobile (mais difícil que desktop).
Field data no CrUX (não só lab data) reflete a melhoria — leva até 28 dias para o CrUX atualizar.
Relatório de antes/depois com screenshots do PageSpeed e commits documentados (cada otimização teve um commit identificável).
Sem regressão nos meses seguintes — performance é prática contínua, não projeto único. Documentar guia de boas práticas para o dev team manter.