Minificar JavaScript promete velocidade e entrega 3% de LCP no melhor cenário. Servir a imagem correta entrega 30%. As otimizações abaixo estão ordenadas por impacto medido em produção, não por ordem de checklist.

Limites de cada métrica

LCP abaixo de 2,5s mede a percepção de carregamento do maior elemento visível. INP, que substituiu o FID em março de 2024, exige resposta a interações em menos de 200ms ao longo de toda a sessão. CLS fica sob 0,1 quando nada salta na tela. Dados de campo vencem números de laboratório: CrUX e RUM capturam Androids intermediários em rede 4G, enquanto seu MacBook com SSD conta outra história.

Imagens dominam o LCP

O hero tende a ser uma imagem, então é ali que o ganho mora. AVIF ou WebP cortam 20 a 50% do peso frente ao JPEG. srcset serve o tamanho certo para cada viewport. fetchpriority="high" adianta o download do elemento principal. O erro clássico persiste: aplicar loading="lazy" no próprio LCP faz o navegador descobrir a imagem só depois do layout, e você paga segundos de atraso.

O que trava o INP

  • Tarefas longas na main thread: code splitting por rota e hidratação adiada devolvem espaço para o browser responder
  • Scripts de terceiros: tag manager, chat widget e pixel de anúncio custam centenas de ms por interação
  • DOM gigante: acima de cerca de 1.400 nós, recálculo de estilo e layout ficam lentos

scheduler.yield() divide tarefas longas sem abrir mão de prioridade, e o efeito aparece direto no INP.

Origem do CLS

Imagem sem width e height declarados, troca de fonte web e banner injetado acima do conteúdo respondem pela maioria dos casos. Em fontes, font-display: optional vence swap para CLS porque elimina o período de fallback visível. Reserve espaço com aspect-ratio e faça preload das fontes usadas acima da dobra.

Quantidade de JavaScript

Envie menos código: code splitting por rota já é default no Next.js e no Nuxt, mas bundles únicos ainda aparecem em SPAs legadas. Rode um bundle analyzer (webpack-bundle-analyzer, rollup-plugin-visualizer) e confirme se o tree-shaking funciona. Auditorias de dependência derrubaram moment.js de muitos projetos; cada freeloader removido vale mais que qualquer microbenchmark de runtime.

Papel do servidor

Cache na borda com Cache-Control correto tira a origem da equação para visitas repetidas. Early Hints (status 103) adianta o preload de CSS crítico antes do servidor terminar de montar o HTML. A escolha SSR versus CSR merece decisão por rota, não por aplicação: página de marketing em SSR, dashboard autenticado em CSR com dados em cache.

Medição sem autoengano

O relatório Core Web Vitals do Search Console aponta quais templates sofrem em campo. PageSpeed Insights faz o diagnóstico URL por URL, e a biblioteca web-vitals envia métricas reais para seu analytics, com atribuição a releases. Configure alerta para regressão de métrica de campo em até uma semana após cada deploy; o culpado ainda estará fresco no git log.