CORRIGIR CADA CORE WEB VITAL
Três métricas, três trabalhos diferentes. Os fixes específicos que movem cada uma, sem teoria.
← Guides All guides in this topic
LCP: faça a coisa principal carregar rápido
Largest Contentful Paint costuma ser uma imagem hero, uma manchete grande ou um frame de poster. Encontre esse elemento. Tudo mais é secundário até que seja rápido.
Alavancas que movem LCP: comprimir e redimensionar o recurso, usar um formato moderno, definir dimensões, fazer preload da URL exata quando ela for descoberta tarde, colocar em um CDN e reduzir TTFB para que os bytes possam começar. Evite lazy-loading da imagem LCP. Evite carrosséis que atrasam o nó LCP real.
Ângulo do servidor: se o próprio HTML é lento, nenhum truque de imagem o salva. Corrija cache e origin primeiro.
Ponto-chave: Nomeie o elemento LCP, depois torne esse arquivo e seu caminho de descoberta entediante e rápido.
INP: mantenha a thread principal livre
Interaction to Next Paint se importa com a velocidade com que a página responde após um toque ou clique. JavaScript pesado na main thread é o vilão habitual: hidratação grande, handlers caros, scripts de terceiros que rodam para sempre.
Alavancas: delete ou adie terceiros, divida handlers, evite componentes síncronos grandes em páginas de marketing, prefira HTML renderizado no servidor com pequenas ilhas e teste em um dispositivo Android de faixa média real, não apenas um preset de throttling de desktop.
Ponto-chave: INP melhora quando você remove trabalho da main thread, não quando você micro-otimiza uma transição CSS.
CLS: pare a página de pular
Cumulative Layout Shift é instabilidade visual. Imagens sem dimensões, fontes que trocam tarde e redimensionam texto, anúncios e embeds que abrem um buraco no layout, banners injetados acima do conteúdo.
Alavancas: width e height ou aspect-ratio CSS em mídia, slots reservados para anúncios, estratégias de font-display que não detonam o layout e nenhuma UI carregada tarde acima do conteúdo existente. Prefira transformar espaço existente a inserir novos blocos no topo.
Ponto-chave: Se algo aparece depois, reserve seu espaço antes.
Os erros que continuam falhando cada
| Metric | Common miss | Better move |
|---|---|---|
| LCP | Lazy-loading the hero | Eager + preload the real LCP URL |
| LCP | Optimising a non-LCP image | Identify the LCP node first |
| INP | Blaming CSS animations | Cut JS and third parties |
| INP | Testing only on desktop | Use a mid-tier phone |
| CLS | Ignoring font metrics | Subset fonts, reserve space |
| CLS | Cookie banners without space | Reserve or overlay carefully |
Ponto-chave: A maioria das falhas repetidas são erros de processo, não micro-otimizações ausentes.
Como passar nos três
Ordem de operações em um site com falha: limpe LCP, depois INP, depois CLS. Re-meça dados de campo entre etapas. Use a checklist CWV como porta de lançamento e o guia de site lento quando ainda não conseguir diferenciar servidor de front end.
Passar nos três no 75º percentil em mobile é suficiente. Não segure um lançamento por causa de 100s em lab depois que os dados de campo estiverem saudáveis.
Ponto-chave: Limpe LCP primeiro. INP e CLS ficam mais fáceis uma vez que o caminho do conteúdo principal é honesto.
Um plano de resgate de uma semana
Dia 1: puxe dados de campo, nomeie o elemento LCP nos três templates principais, liste todo script de terceiros com um proprietário. Dia 2 e 3: lance apenas as correções de mídia LCP e descoberta. Dia 4: remova ou adie os piores terceiros e re-verifique INP em um telefone. Dia 5: reserve espaço para os infratores CLS que você pode ver na experiência de campo. Dia 6 e 7: re-meça, documente o que permanece, e decida se o trabalho remanescente é bloqueador de lançamento.
Essa semana supera um mês de refatorações mistas porque cada dia tem uma métrica e um loop de evidência. Se LCP ainda estiver vermelho após o dia 3, não comece uma limpeza de design system. Fique no elemento LCP até ele se mover.
Ponto-chave: Uma métrica por dia com re-medição supera um backlog de performance misto.