Core Web Vitals: Meça e Melhore para Melhor SEO
Por que as Core Web Vitals Importam para o Seu Site
Você construiu um site rápido e cheio de recursos, mas os usuários ainda reclamam de lentidão, e seu ranking de busca está caindo. O culpado podem ser as Core Web Vitals — o conjunto de métricas do Google que quantificam a experiência real do usuário. Desde 2021, essas métricas são um fator de ranking confirmado e impactam diretamente as taxas de rejeição e conversões. Ignorá-las significa perder tráfego e receita.
Neste guia, você aprenderá o que cada métrica significa, como medi-las com precisão e melhorias passo a passo que você pode implementar hoje.
O Que São Core Web Vitals?
Core Web Vitals são três métricas específicas que capturam carregamento, interatividade e estabilidade visual:
- Largest Contentful Paint (LCP): Mede o desempenho de carregamento. Marca o tempo em que o maior elemento de conteúdo (imagem, bloco de texto, vídeo) se torna visível. Um bom LCP é de 2,5 segundos ou menos.
- Interaction to Next Paint (INP): Mede a capacidade de resposta. Registra a latência de todas as interações (cliques, toques, pressionamentos de tecla) e reporta um único valor. Um bom INP é de 200 milissegundos ou menos. O INP substituiu o First Input Delay (FID) em março de 2024.
- Cumulative Layout Shift (CLS): Mede a estabilidade visual. Quantifica mudanças inesperadas de layout durante o carregamento da página. Um bom CLS é de 0,1 ou menos.
Essas métricas são baseadas em campo, ou seja, vêm de dados reais de usuários, não de testes de laboratório. É por isso que ferramentas como Chrome User Experience Report (CrUX) e PageSpeed Insights as utilizam.
Como Medir as Core Web Vitals
Você precisa de dados de laboratório e de campo para obter um panorama completo. Ferramentas de laboratório ajudam a depurar, enquanto dados de campo mostram a experiência real do usuário.
Ferramentas de Campo (Dados Reais de Usuários)
- PageSpeed Insights: Insira uma URL para ver dados de laboratório e de campo. A seção de campo é extraída do CrUX.
- Search Console: O relatório Core Web Vitals agrupa URLs por status (Ruim, Precisa Melhorar, Bom).
- Chrome UX Report (CrUX): Acesse via BigQuery ou API CrUX para dados brutos.
- Biblioteca JavaScript web-vitals: Adicione este script leve ao seu site para coletar métricas de usuários reais e enviá-las ao seu analytics.
Ferramentas de Laboratório (Testes Sintéticos)
- Lighthouse: Integrado ao Chrome DevTools. Execute-o para obter pontuações de laboratório e oportunidades.
- WebPageTest: Testes avançados com filmstrips, gráficos de cascata e limitação personalizada.
- Painel Performance do Chrome DevTools: Grave e analise o desempenho em tempo de execução.
Para começar rapidamente, use o PageSpeed Insights. Ele combina dados de laboratório e de campo em um único relatório.
Passo a Passo: Melhore o LCP
O LCP geralmente é o mais fácil de melhorar com estes passos:
- Otimize imagens: Comprima imagens sem perder qualidade. Use formatos modernos como WebP ou AVIF. Ferramentas como o Image Compressor podem ajudar.
- Pré-carregue o elemento LCP: Adicione
<link rel="preload">para a imagem principal ou fonte. - Reduza o tempo de resposta do servidor: Use um CDN, ative o cache e otimize o código do backend. Para Nginx, verifique seus logs com o Nginx Log Analyzer para identificar requisições lentas.
- Elimine recursos que bloqueiam a renderização: Incorpore CSS crítico, adie JavaScript não crítico e use atributos
asyncoudefer. - Use um CDN: Sirva ativos de locais próximos aos usuários.
Passo a Passo: Melhore o INP
O INP mede a capacidade de resposta. Um INP alto geralmente vem de tarefas longas de JavaScript.
- Divida tarefas longas: Use
setTimeoutourequestIdleCallbackpara ceder à thread principal. - Otimize manipuladores de eventos: Aplique debounce ou throttle em operações custosas.
- Reduza o JavaScript: Remova código não utilizado, faça code-splitting e carregue scripts não críticos sob demanda.
- Use web workers: Mova cálculos pesados para fora da thread principal.
- Evite tamanhos grandes de DOM: Mantenha o DOM abaixo de 1.500 nós quando possível.
Passo a Passo: Melhore o CLS
O CLS é sobre estabilidade visual. Evite mudanças inesperadas com estas táticas:
- Defina atributos de tamanho em imagens e vídeos: Sempre inclua
widtheheight. - Reserve espaço para anúncios e incorporações: Use CSS
aspect-ratioou contêineres fixos. - Evite inserir conteúdo acima do conteúdo existente: Se precisar, use um placeholder ou anime a mudança.
- Use font-display: swap: Evite texto invisível durante o carregamento de fontes (embora isso possa causar pequenas mudanças; considere
font-display: optionalpara fontes críticas). - Pré-carregue fontes: Reduza mudanças de layout causadas por fontes carregadas tardiamente.
Comparação das Métricas Core Web Vitals
| Métrica | O Que Mede | Limite Bom | Correção Principal |
|---|---|---|---|
| LCP | Desempenho de carregamento | ≤ 2,5s | Otimizar imagens, pré-carregar, CDN |
| INP | Capacidade de resposta | ≤ 200ms | Dividir tarefas longas, reduzir JS |
| CLS | Estabilidade visual | ≤ 0,1 | Definir dimensões, reservar espaço |
Monitoramento e Melhoria Contínua
Desempenho não é uma correção única. Configure monitoramento de usuários reais (RUM) para acompanhar as Core Web Vitals ao longo do tempo. Use a biblioteca web-vitals para enviar métricas à sua plataforma de analytics. Defina alertas para regressões. Faça auditorias regulares com Lighthouse no seu pipeline de CI/CD para identificar problemas antes que cheguem à produção.
FAQ
Quais são os limites atuais para as Core Web Vitals?
Para LCP, bom é ≤ 2,5s, precisa melhorar é ≤ 4,0s, e ruim é > 4,0s. Para INP, bom é ≤ 200ms, precisa melhorar é ≤ 500ms, e ruim é > 500ms. Para CLS, bom é ≤ 0,1, precisa melhorar é ≤ 0,25, e ruim é > 0,25.
Com que frequência devo medir as Core Web Vitals?
Monitore continuamente com dados de usuários reais. Execute testes de laboratório após mudanças significativas no código e pelo menos mensalmente. Os dados de campo no Search Console são atualizados diariamente, mas refletem uma janela móvel de 28 dias.
Posso melhorar as Core Web Vitals sem um desenvolvedor?
Algumas correções, como compressão de imagens e cache, podem ser feitas com plugins ou ferramentas. No entanto, otimizações mais profundas, como redução de JavaScript e ajuste do servidor, geralmente exigem envolvimento de um desenvolvedor.
Pronto para acelerar seu site? Comece comprimindo suas imagens com nosso Image Compressor gratuito para dar um impulso rápido ao seu LCP.