Core Web Vitals: Meça e Melhore o Desempenho Web
Você construiu um site rápido, mas os usuários ainda reclamam da lentidão. Ou talvez seu ranking de SEO tenha caído após uma atualização do Google. O culpado podem ser as Core Web Vitals — as métricas do Google para a experiência do usuário. Neste guia, você aprenderá o que são, como medi-las com precisão e passos práticos para melhorar cada uma.
O que são Core Web Vitals?
Core Web Vitals são três métricas específicas que quantificam aspectos-chave da experiência do usuário:
- Largest Contentful Paint (LCP): Mede o desempenho de carregamento. Marca o tempo em que o maior elemento de conteúdo (imagem, vídeo ou bloco de texto) se torna visível. Meta: LCP abaixo de 2,5 segundos.
- First Input Delay (FID): Mede a interatividade. Registra o tempo desde a primeira interação do usuário (ex.: clique em um link) até a resposta do navegador. Meta: FID abaixo de 100 milissegundos.
- Cumulative Layout Shift (CLS): Mede a estabilidade visual. Quantifica mudanças inesperadas de layout durante o carregamento. Meta: CLS abaixo de 0,1.
Essas métricas fazem parte dos sinais de experiência de página do Google e impactam diretamente o SEO. Mas, mais importante, refletem a frustração real do usuário — carregamentos lentos, cliques sem resposta e conteúdo que pula.
Como medir as Core Web Vitals
Você não pode melhorar o que não mede. Existem duas abordagens principais: dados de laboratório (testes sintéticos) e dados de campo (monitoramento de usuários reais). Use ambos para uma visão completa.
Ferramentas de laboratório
- Lighthouse: Integrado ao Chrome DevTools (F12 → aba Lighthouse). Audita o desempenho e fornece pontuações para LCP, FID (como TBT) e CLS. Execute no modo anônimo para evitar que extensões distorçam os resultados.
- WebPageTest: Ferramenta avançada para análise detalhada de waterfall e testes de vários locais.
- PageSpeed Insights: Combina dados de laboratório e de campo. Mostra dados reais do CrUX, se disponíveis.
Ferramentas de campo
- Chrome User Experience Report (CrUX): Conjunto de dados público de métricas de usuários reais para milhões de sites. Acesse via PageSpeed Insights ou BigQuery.
- Google Search Console: O relatório Core Web Vitals mostra grupos de URLs que precisam de atenção com base em dados de campo.
- Biblioteca JavaScript web-vitals: Adicione ao seu site para coletar seus próprios dados de campo e enviar para análise.
// Exemplo: usando a biblioteca web-vitals
import {onLCP, onFID, onCLS} from 'web-vitals';
function sendToAnalytics(metric) {
// Substitua pelo seu endpoint de análise
console.log(metric.name, metric.value);
}
onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
Melhorando o Largest Contentful Paint (LCP)
LCP costuma ser a métrica mais desafiadora. É afetada pelo tempo de resposta do servidor, carregamento de recursos e renderização no lado do cliente. Siga estes passos:
- Otimize a resposta do servidor: Use cache (CDN, cache no servidor), atualize a hospedagem e reduza o tempo de processamento no backend.
- Priorize recursos críticos: Faça preload da imagem ou fonte do LCP. Use
<link rel="preload">para ativos-chave. - Comprima imagens: Sirva formatos modernos (WebP, AVIF) e comprima imagens sem perder qualidade. Ferramentas como o Image Compressor podem ajudar.
- Elimine recursos que bloqueiam a renderização: Adie CSS e JavaScript não críticos. Faça inline do CSS crítico.
- Use uma CDN: Distribua conteúdo globalmente para reduzir a latência.
Melhorando o First Input Delay (FID)
FID mede a capacidade de resposta. Um FID alto significa que a thread principal está ocupada quando o usuário tenta interagir. Para melhorar:
- Divida tarefas longas: Separe o JavaScript em partes menores usando
setTimeoutourequestIdleCallback. - Minimize o trabalho na thread principal: Remova JavaScript não utilizado, adie scripts não críticos e use code splitting.
- Otimize manipuladores de eventos: Evite trabalho síncrono pesado em listeners de eventos.
- Use web workers: Transfira cálculos caros para uma thread de trabalho.
Nota: O FID está sendo substituído pelo Interaction to Next Paint (INP) em março de 2024. Os princípios permanecem semelhantes — mantenha a thread principal livre.
Melhorando o Cumulative Layout Shift (CLS)
CLS mede mudanças inesperadas de layout. Causas comuns incluem imagens sem dimensões, anúncios, embeds e fontes web. Corrija com:
- Sempre defina atributos width e height em imagens e vídeos: Isso reserva espaço e evita deslocamentos.
- Reserve espaço para anúncios e embeds: Use CSS
aspect-ratioou contêineres de tamanho fixo. - Evite inserir conteúdo acima do conteúdo existente: A menos que seja em resposta à interação do usuário.
- Use
font-display: swape faça preload de fontes: Minimize deslocamentos por troca de fonte.
Ferramentas e fluxo de trabalho para monitoramento contínuo
Desempenho não é uma correção única. Configure monitoramento para detectar regressões:
- Adicione a biblioteca web-vitals para enviar métricas à sua plataforma de análise.
- Use o Lighthouse CI no seu pipeline para falhar builds se as pontuações caírem abaixo dos limites.
- Verifique regularmente o relatório Core Web Vitals do Search Console.
Para verificações rápidas durante o desenvolvimento, use a aba Lighthouse no Chrome DevTools. Para análises mais profundas, experimente o WebPageTest.
Perguntas frequentes
O que é uma boa pontuação de LCP?
Um bom LCP é de 2,5 segundos ou menos. Pontuações entre 2,5 e 4 segundos precisam de melhoria, e acima de 4 segundos são ruins.
Com que frequência devo medir as Core Web Vitals?
Meça após mudanças significativas e continuamente via dados de campo. Testes de laboratório são ótimos para depuração; dados de campo refletem a experiência real do usuário.
Melhorar as Core Web Vitals realmente afeta o SEO?
Sim, o Google usa a experiência de página como sinal de classificação, mas a relevância do conteúdo continua sendo primordial. Boas Core Web Vitals também melhoram o engajamento e a conversão dos usuários.
Pronto para otimizar suas imagens para um melhor LCP? Experimente nosso Image Compressor gratuito para reduzir o tamanho dos arquivos sem sacrificar a qualidade.