Core Web Vitals: guia prático para acelerar seu site

Um site lento perde visitantes antes de exibir a primeira manchete. O Google sabe disso, e por isso os Core Web Vitals fazem parte do seu sistema de ranqueamento: se suas páginas carregam rápido e respondem bem, você compete melhor. A boa notícia é que raramente é preciso refazer o site para melhorar essas métricas — é preciso saber o que medir e por onde começar.

O que são os Core Web Vitals

São três métricas com as quais o Google resume a experiência real de carregamento de uma página:

• LCP (Largest Contentful Paint): quanto tempo o maior elemento visível leva para renderizar, geralmente a imagem ou o título principal. Meta: menos de 2,5 segundos.
• INP (Interaction to Next Paint): quanto tempo a página demora para reagir quando o usuário toca, clica ou digita. Meta: menos de 200 milissegundos.
• CLS (Cumulative Layout Shift): o quanto o layout “pula” durante o carregamento. Meta: menos de 0,1.

O detalhe importante: o Google avalia dados de usuários reais (o relatório CrUX), não apenas testes de laboratório. Por isso um site pode passar no seu notebook e falhar em um celular intermediário com conexão móvel.

Como medir sem pagar nada

Três ferramentas gratuitas cobrem quase todo o fluxo de diagnóstico:

1. PageSpeed Insights mostra dados de campo e uma auditoria de laboratório por URL.
2. Search Console (relatório “Principais métricas da web”) agrupa as URLs com problemas em todo o site.
3. Lighthouse no Chrome DevTools permite repetir os testes enquanto você aplica mudanças.

Você também pode rodar uma auditoria direto do terminal:

npx lighthouse https://seu-site.com --view

Três melhorias com impacto imediato

Otimize a imagem principal

O LCP quase sempre depende de uma imagem. Sirva-a em formato moderno (AVIF ou WebP), com dimensões definidas, e marque-a com fetchpriority="high". Tudo que fica abaixo da dobra deve usar loading="lazy".

Reduza o JavaScript que bloqueia

Cada kilobyte de JavaScript precisa ser baixado, interpretado e executado antes de a página responder com fluidez. Remova bibliotecas que você não usa mais, divida o código por rota e adie scripts de terceiros que não sejam essenciais para a primeira renderização.

Reserve espaço para o que carrega depois

O CLS aparece quando anúncios, imagens ou fontes empurram o conteúdo. Sempre defina width e height nas imagens, reserve contêineres de altura fixa para os anúncios e use font-display: swap com uma fonte de fallback parecida.

Conclusão

Não persiga uma pontuação perfeita de 100: ela é um indicador de laboratório, não o objetivo. Concentre-se em deixar as três métricas de campo no verde para usuários reais. Meça primeiro, corrija a imagem principal, corte JavaScript e estabilize o layout; na maioria dos sites, essa ordem resolve a maior parte do problema.