Core Web Vitals: Meça e Melhore o Desempenho Web

Seus usuários esperam experiências rápidas e suaves. Se seu site parece lento, eles saem—e os mecanismos de busca percebem. Core Web Vitals são as métricas que quantificam a experiência real do usuário: velocidade de carregamento, interatividade e estabilidade visual. Este guia mostra como medi-las e fazer melhorias práticas.

O que são Core Web Vitals?

Core Web Vitals são um conjunto de três métricas definidas pelo Google para capturar aspectos-chave da experiência do usuário:

• Largest Contentful Paint (LCP): mede o desempenho de carregamento. Marca o tempo quando o maior elemento de conteúdo (frequentemente uma imagem hero ou título) se torna visível. Mire em LCP abaixo de 2,5 segundos.
• Interaction to Next Paint (INP): mede a capacidade de resposta. Registra o tempo desde uma interação do usuário (clique, toque, tecla) até a próxima atualização visual. Mire em INP abaixo de 200 milissegundos.
• Cumulative Layout Shift (CLS): mede a estabilidade visual. Quantifica mudanças inesperadas de layout durante o carregamento. Mire em CLS abaixo de 0,1.

Esses limites são baseados em dados de campo de usuários reais (75º percentil). Dados de laboratório ajudam a diagnosticar problemas, mas dados de campo refletem a experiência real.

Como medir Core Web Vitals

Você precisa de dados de campo e de laboratório. Dados de campo mostram o desempenho real do usuário; dados de laboratório permitem depurar e testar mudanças.

Ferramentas de dados de campo

• Chrome UX Report (CrUX): dados agregados de usuários reais para milhões de sites. Acesse via PageSpeed Insights, Search Console ou a API CrUX.
• Biblioteca JavaScript web-vitals: colete seus próprios dados de campo enviando métricas para seu endpoint de analytics.

Ferramentas de dados de laboratório

• Lighthouse: integrado ao Chrome DevTools, executa auditorias e fornece oportunidades de melhoria.
• WebPageTest: testes avançados com limitação de rede e filmstrips.
• Painel Performance do Chrome DevTools: análise profunda do desempenho em tempo de execução.

Comece com o PageSpeed Insights: ele mostra dados de campo e de laboratório para uma URL. Depois use o Lighthouse localmente para iterar.

Melhorando o LCP

O LCP geralmente é a métrica mais impactante de corrigir. O maior elemento é geralmente uma imagem ou um bloco de texto. Otimize estas áreas:

1. Otimize a imagem LCP: comprima-a, sirva formatos modernos como WebP ou AVIF e defina dimensões explícitas.
2. Pré-carregue o recurso LCP: use <link rel="preload"> para imagens ou fontes usadas acima da dobra.
3. Elimine recursos que bloqueiam a renderização: insira CSS crítico inline, adie CSS e JavaScript não críticos.
4. Use uma CDN: sirva ativos de locais próximos aos usuários.
5. Reduza o tempo de resposta do servidor: otimize o backend, use cache e considere renderização na borda.

Exemplo: pré-carregar uma imagem hero:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Melhorando o INP

O INP mede a capacidade de resposta. Tarefas longas bloqueiam a thread principal e atrasam o feedback visual. Correções comuns:

• Divida tarefas longas: use setTimeout ou scheduler.yield() para ceder à thread principal.
• Otimize manipuladores de eventos: aplique debounce ou throttle em eventos rápidos, evite trabalho síncrono pesado.
• Reduza o JavaScript: faça code-splitting, tree-shaking e adie scripts não críticos.
• Use web workers para tarefas intensivas de CPU.
• Evite grandes atualizações do DOM: agrupe mudanças no DOM e use requestAnimationFrame.

Meça o INP com a biblioteca web-vitals e identifique interações lentas no painel Performance.

Melhorando o CLS

Mudanças de layout acontecem quando elementos mudam de posição inesperadamente. Preveni-las:

• Defina atributos de tamanho em imagens e vídeos (largura e altura).
• Reserve espaço para anúncios e embeds com CSS aspect-ratio ou contêineres fixos.
• Evite inserir conteúdo acima do conteúdo existente a menos que em resposta a interação do usuário.
• Use font-display: swap e pré-carregue fontes para minimizar mudanças de FOIT/FOUT.
• Anime com transform em vez de propriedades que acionam layout.

Comparação rápida: métricas e metas

Monitore e itere

Desempenho não é uma correção única. Configure monitoramento contínuo:

• Use a biblioteca web-vitals para enviar métricas ao seu analytics.
• Configure alertas para regressões no seu pipeline de CI/CD usando Lighthouse CI.
• Revise regularmente os dados de campo no Search Console.

Lembre-se de que as melhorias devem ser validadas com dados de usuários reais, não apenas com pontuações de laboratório.

Perguntas frequentes

O que são Core Web Vitals e por que importam?

Core Web Vitals são métricas de desempenho centradas no usuário (LCP, INP, CLS) que medem carregamento, interatividade e estabilidade visual. Elas importam porque se correlacionam com a experiência do usuário e são usadas como sinal de classificação pelo Google.

Com que frequência devo verificar Core Web Vitals?

Verifique dados de campo mensalmente e após lançamentos importantes. Use ferramentas de laboratório durante o desenvolvimento para detectar regressões precocemente. O monitoramento contínuo com métricas de usuários reais é o ideal.

Posso melhorar Core Web Vitals sem reconstruir meu site?

Sim. Muitas melhorias—como otimização de imagens, pré-carregamento de recursos-chave, adiamento de scripts e definição de dimensões de elementos—podem ser aplicadas incrementalmente sem uma reformulação completa.

Precisa comprimir imagens rapidamente para melhorar o LCP? Experimente nosso Compressor de Imagens gratuito para reduzir tamanhos de arquivo sem perder qualidade.