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

Por que as Core Web Vitals são importantes

Você construiu um site rápido, mas os usuários ainda reclamam de carregamento lento ou interações travadas. Os mecanismos de busca também podem te classificar mais abaixo se suas pontuações de Core Web Vitals (CWV) forem ruins. As CWV são um conjunto de métricas que o Google usa para quantificar a experiência do usuário: Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS). Em 2021, o Google tornou essas métricas um fator de classificação, então ignorá-las pode prejudicar seu SEO e a retenção de usuários.

Este guia explica como medir cada métrica, identificar problemas comuns e aplicar correções práticas. Vamos focar em etapas acionáveis que você pode tomar hoje, sem mergulhar em todos os casos extremos.

Entendendo as três Core Web Vitals

Antes de otimizar, saiba o que cada métrica mede e seus limites.

Nota: O FID está sendo substituído pelo Interaction to Next Paint (INP) em março de 2024, mas os princípios de otimização são semelhantes. Vamos focar no FID aqui, pois ainda é amplamente referenciado.

Como medir as Core Web Vitals

Você precisa de dados de laboratório e de campo. Dados de laboratório (sintéticos) ajudam a depurar; dados de campo (usuários reais) mostram o desempenho real.

Ferramentas de Laboratório

• Lighthouse no Chrome DevTools: Execute auditorias de desempenho, acessibilidade e SEO. Ele reporta LCP, CLS e TBT (um proxy para FID).
• WebPageTest: Testes avançados com filmstrips e gráficos de cascata.
• PageSpeed Insights: Combina dados de laboratório e de campo (se disponíveis).

Ferramentas de Campo

• Chrome User Experience Report (CrUX): Conjunto de dados público de métricas de usuários reais. Acesse via PageSpeed Insights ou BigQuery.
• Biblioteca JavaScript web-vitals: Colete métricas de usuários reais em sua análise.
• Relatório Core Web Vitals do Search Console: Mostra grupos de URLs com problemas.

Comece com o PageSpeed Insights para obter uma visão geral rápida, depois use o Lighthouse para diagnósticos detalhados.

Melhorando o Largest Contentful Paint (LCP)

O LCP frequentemente sofre com resposta lenta do servidor, recursos que bloqueiam a renderização ou imagens não otimizadas. Siga estas etapas:

1. Otimize o tempo de resposta do servidor: Use cache, um CDN e código de backend eficiente. Mire em Time to First Byte (TTFB) abaixo de 0,8s.
2. Elimine recursos que bloqueiam a renderização: Coloque CSS crítico inline, adie CSS e JavaScript não críticos. Use async ou defer para scripts.
3. Otimize imagens: Comprima imagens, use formatos modernos (WebP, AVIF) e implemente imagens responsivas com srcset. Para a imagem LCP, pré-carregue-a com <link rel="preload">.
4. Use um CDN: Sirva ativos estáticos a partir de localizações de borda.
5. Faça cache de ativos: Defina tempos de cache longos para recursos estáticos.

Exemplo: Pré-carregue a imagem LCP e defina dimensões explícitas para evitar mudanças de layout.

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

Melhorando o First Input Delay (FID)

O FID mede a responsividade. Tarefas JavaScript longas bloqueiam a thread principal, atrasando as interações. Para melhorar o FID:

• Divida tarefas longas: Use setTimeout ou requestIdleCallback para ceder à thread principal.
• Minimize o trabalho na thread principal: Reduza o tempo de execução de JavaScript, evite bundles grandes e use divisão de código.
• Otimize manipuladores de eventos: Aplique debounce ou throttle em manipuladores custosos.
• Use web workers para tarefas intensivas de CPU.
• Evite scripts de terceiros grandes: Audite e remova scripts desnecessários.

Ferramentas como o Lighthouse sinalizam tarefas longas. Use o painel Performance no Chrome DevTools para identificá-las.

Melhorando o Cumulative Layout Shift (CLS)

O CLS mede a estabilidade visual. Mudanças de layout ocorrem quando elementos mudam de posição inesperadamente. Causas comuns e correções:

• Imagens sem dimensões: Sempre defina atributos width e height ou use CSS aspect-ratio.
• Anúncios, incorporações e iframes: Reserve espaço com um placeholder ou defina dimensões fixas.
• Conteúdo dinâmico: Evite inserir conteúdo acima do conteúdo existente, a menos que em resposta à interação do usuário.
• Fontes web: Use font-display: swap e pré-carregue fontes para evitar texto invisível (FOIT) e mudanças de layout.
• Animações: Prefira transform e opacity do CSS para animações, pois não disparam layout.

Teste com a Layout Instability API no DevTools ou use a biblioteca web-vitals para registrar CLS em campo.

Fluxo de trabalho prático para monitoramento contínuo

Otimização não é uma tarefa única. Configure o monitoramento:

1. Instrumente seu site com a biblioteca web-vitals e envie métricas para sua plataforma de análise.
2. Configure alertas para quando as métricas excederem os limites.
3. Execute o Lighthouse regularmente em CI/CD para capturar regressões.
4. Use o Search Console para monitorar tendências de dados de campo.

Lembre-se de que os dados de campo são o que importam para o ranking. Dados de laboratório ajudam a depurar, mas sempre valide com usuários reais.

FAQ

Quais são os limites atuais para as Core Web Vitals?

Em 2023, os limites são: LCP bom ≤2,5s, precisa melhorar 2,5s–4,0s, ruim >4,0s; FID bom ≤100ms, precisa melhorar 100ms–300ms, ruim >300ms; CLS bom ≤0,1, precisa melhorar 0,1–0,25, ruim >0,25. Observe que o FID está sendo substituído pelo INP em 2024.

Com que frequência devo medir as Core Web Vitals?

Monitore dados de campo continuamente via análise e execute testes de laboratório (por exemplo, Lighthouse) em cada implantação ou pelo menos semanalmente. Mudanças importantes devem acionar uma nova auditoria.

Posso melhorar as Core Web Vitals sem um desenvolvedor?

Algumas correções, como comprimir imagens ou habilitar cache, podem ser feitas via plugins ou configurações de hospedagem. No entanto, otimizações mais profundas (por exemplo, divisão de código, CSS crítico) normalmente exigem trabalho de desenvolvimento.

Pronto para otimizar suas imagens para um melhor LCP? Experimente nosso Compressor de Imagens gratuito para reduzir o tamanho dos arquivos sem perder qualidade.