Performance Web & Core Web Vitals: guia definitivo

# Performance Web & Core Web Vitals: o guia que separa sites rápidos de sites lucrativos

Performance não é vaidade técnica. Cada 100 ms de atraso reduz conversão, aumenta rejeição e piora o ranqueamento. O Google mede isso com três métricas principais: LCP, INP e CLS. Entender o que cada uma significa é o primeiro passo para parar de otimizar no escuro.

O que o Google mede de verdade

• LCP (Largest Contentful Paint): tempo até o maior elemento visível carregar. Deve ficar abaixo de 2,5 s.
• INP (Interaction to Next Paint): tempo de resposta a cliques e toques. Deve ficar abaixo de 200 ms.
• CLS (Cumulative Layout Shift): o quanto o layout "pula" durante o carregamento. Deve ficar abaixo de 0,1.

No React, os vilões costumam ser bundle grande, imagem hero sem prioridade e conteúdo que só aparece depois do JavaScript. Já detalhamos esse cenário em Como otimizar a performance de aplicações React e React Native para passar no Core Web Vitals.

Diagnóstico em ordem de impacto

1. 1.Imagem principal: use fetchpriority="high", formato AVIF/WebP e dimensões fixas. Veja o passo a passo em LCP alto por causa da imagem principal? 6 ajustes que resolvem na maioria dos sites.
2. 2.JavaScript: divida por rota e remova dependências que só uma tela usa. O guia está em Code splitting por rota no React: carregue só o que a página precisa.
3. 3.Interatividade: evite re-renderizações em cascata e trabalho pesado na thread principal. Detalhes em INP: o que fazer quando cliques e toques demoram para responder.
4. 4.Layout: reserve espaço para imagens, anúncios e fontes. Causas em CLS: por que o seu site "pula" enquanto carrega e como parar com isso.
5. 5.Fontes: use font-display: swap e pré-carregue apenas a fonte do título. Mais em Fontes web sem travar a página: font-display, subset e auto-hospedagem.

Checklist de 10 pontos

• HTML crítico entregue no primeiro byte
• Imagem LCP com prioridade alta
• Imagens em AVIF/WebP com srcset
• Bundle por rota
• Fontes com swap e subconjunto latino
• Terceiros carregados após interação
• Dimensões fixas em imagens e iframes
• Cache de assets imutável
• Medição de campo no Search Console
• Orçamento de performance por release

Como transformar isso em resultado

Performance é processo, não projeto pontual. Defina um orçamento por rota, meça em cada deploy e trate regressão como bug. Empresas que fazem isso mantêm nota alta e colhem conversão todos os meses.

Quer um diagnóstico do seu site com prioridades claras? A Wecodex faz auditoria de Core Web Vitals e implementa as correções com meta de nota 100 no PageSpeed.