Core Web Vitals

Core Web Vitals são três métricas específicas que o Google usa para medir a experiência do usuário em sites. Desde maio de 2021, fazem parte oficialmente dos fatores de ranking. Não são apenas "bom ter" - são requisito para competir em buscas competitivas.

O Google quer que usuários tenham boas experiências. Sites lentos, que travam ao clicar ou que "pulam" durante carregamento frustram visitantes. Core Web Vitals quantificam exatamente esses problemas para que você possa corrigi-los.

As Três Métricas Essenciais

LCP - Largest Contentful Paint (Carregamento): Mede quanto tempo leva para o maior elemento visível da página carregar. Pode ser uma imagem hero, um bloco de texto ou vídeo. Meta: menos de 2,5 segundos. Acima de 4 segundos é considerado ruim.

INP - Interaction to Next Paint (Interatividade): Substituiu o FID em março de 2024. Mede a latência de todas as interações do usuário (cliques, toques, teclado) durante a visita. Meta: menos de 200 milissegundos. Acima de 500ms é ruim. Reflete se o site "responde" rapidamente aos comandos.

CLS - Cumulative Layout Shift (Estabilidade Visual): Mede quanto os elementos da página "pulam" durante carregamento. Sabe quando você vai clicar num botão e ele se move porque uma imagem carregou acima? Isso é layout shift. Meta: menos de 0,1. Acima de 0,25 é ruim.

Por Que Core Web Vitals Importam Para SEO?

Google confirmou publicamente que Core Web Vitals são fatores de ranking. Não são os mais importantes (conteúdo e backlinks ainda dominam), mas funcionam como "desempate" entre páginas similares.

Mais importante: sites rápidos convertem melhor. Dados do Google mostram que quando LCP melhora de 2,5s para 1,8s, taxa de rejeição cai 24%. Amazon reportou que cada 100ms de latência adicional custava 1% em vendas. Velocidade é dinheiro.

Como Medir Core Web Vitals

Google Search Console: Relatório dedicado de Core Web Vitals mostra quais URLs têm problemas e quais estão boas. Dados reais de usuários (não laboratório).

PageSpeed Insights: Analisa URL individual com dados de campo (usuários reais) e laboratório (simulação). Dá sugestões específicas de correção.

Chrome DevTools: Aba Performance para diagnóstico detalhado. Lighthouse para auditoria completa.

Web Vitals Extension: Extensão do Chrome que mostra métricas em tempo real enquanto navega.

Como Melhorar Cada Métrica

Melhorando LCP:

• Otimize imagens: use WebP, comprima, defina dimensões explícitas
• Implemente lazy loading para imagens abaixo da dobra
• Use CDN para servir assets de servidores próximos ao usuário
• Minimize CSS e JavaScript críticos
• Considere preload para recursos críticos do LCP

Melhorando INP:

• Quebre tarefas JavaScript longas em chunks menores
• Use web workers para processamento pesado
• Evite JavaScript que bloqueia a thread principal
• Otimize event handlers para responder rapidamente
• Considere debounce/throttle para eventos frequentes

Melhorando CLS:

• Defina dimensões (width/height) para todas as imagens e vídeos
• Reserve espaço para anúncios e embeds antes de carregar
• Evite inserir conteúdo acima de conteúdo existente
• Use font-display: swap para fontes customizadas
• Pré-carregue fontes críticas

Problemas Comuns e Soluções

Imagens sem dimensões: Navegador não sabe quanto espaço reservar. Quando imagem carrega, tudo abaixo "pula". Solução: sempre defina width e height no HTML.

Fontes web causando FOIT/FOUT: Flash of Invisible Text ou Flash of Unstyled Text. Solução: preload fontes críticas e use font-display: swap.

JavaScript bloqueando renderização: Scripts pesados impedem interatividade. Solução: defer/async para scripts não-críticos, code splitting.

Terceiros lentos: Widgets de chat, analytics, anúncios podem degradar métricas. Solução: carregue assincronamente, considere lazy loading.