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

Você construiu um aplicativo web moderno, mas os usuários reclamam que ele parece lento. O ranking de busca está caindo, e você não sabe por quê. O culpado pode ser Core Web Vitals ruins—as métricas do Google para experiência do usuário. Neste guia, você aprenderá o que são, como medi-las e, mais importante, como melhorá-las com passos acionáveis.

O que são Core Web Vitals?

Core Web Vitals são um conjunto de métricas específicas que o Google usa para avaliar a experiência do usuário de uma página web. Elas se concentram em carregamento, interatividade e estabilidade visual:

• Largest Contentful Paint (LCP): Mede o desempenho de carregamento. O tempo que o maior elemento de conteúdo (por exemplo, imagem hero, título) leva para se tornar visível. Bom: ≤ 2,5 segundos.
• First Input Delay (FID): Mede a interatividade. O tempo desde quando um usuário interage pela primeira vez (por exemplo, clica em um botão) até quando o navegador pode responder. Bom: ≤ 100 milissegundos.
• Cumulative Layout Shift (CLS): Mede a estabilidade visual. Quantifica mudanças inesperadas de layout durante o carregamento. Bom: ≤ 0,1.

Essas métricas fazem parte dos sinais de experiência de página do Google e podem afetar o ranking de busca. Mas, mais importante, elas refletem a satisfação real do usuário.

Como medir Core Web Vitals

Você precisa de dados de laboratório e de campo para obter um panorama completo. Dados de laboratório (sintéticos) ajudam a depurar problemas, enquanto dados de campo (monitoramento de usuários reais) mostram o desempenho real.

Ferramentas de laboratório

• Lighthouse: Integrado ao Chrome DevTools. Execute uma auditoria para obter pontuações e oportunidades.
• PageSpeed Insights: Combina dados de laboratório e de campo para uma URL.
• WebPageTest: Testes avançados com locais e dispositivos personalizados.

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: Adicione ao seu site para coletar métricas de usuários reais e enviar para seu analytics.
• Search Console: O relatório Core Web Vitals mostra o desempenho do grupo com base nos dados do CrUX.

Veja como usar a biblioteca web-vitals para registrar métricas:

import {getLCP, getFID, getCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

Melhorando o LCP

O LCP costuma ser a métrica mais desafiadora. Foque nestas áreas:

1. Otimize imagens: Comprima imagens, use formatos modernos como WebP ou AVIF e sirva imagens responsivas com srcset. Faça lazy-load de imagens fora da tela.
2. Pré-carregue recursos críticos: Use <link rel="preload"> para imagens hero, fontes e CSS principal.
3. Reduza o tempo de resposta do servidor: Use um CDN, ative o cache e otimize o código do backend.
4. Elimine recursos que bloqueiam a renderização: Faça inline do CSS crítico, adie JS não crítico e evite arquivos CSS grandes.
5. Use um CDN: Sirva ativos de locais de borda mais próximos dos usuários.

Melhorando o FID

O FID tem a ver com responsividade. Tarefas longas bloqueiam a thread principal, atrasando a interatividade.

1. Divida tarefas longas: Use setTimeout ou requestIdleCallback para ceder à thread principal.
2. Otimize JavaScript: Faça code-split, tree-shake e adie scripts não críticos.
3. Use web workers: Mova cálculos pesados para fora da thread principal.
4. Reduza o impacto de terceiros: Audite e limite scripts de terceiros.

Melhorando o CLS

O CLS é causado por elementos que mudam durante o carregamento. Evite isso ao:

1. Sempre incluir atributos width e height em imagens e vídeos. Isso reserva espaço.
2. Reservar espaço para anúncios e incorporações: Use CSS aspect-ratio ou contêineres fixos.
3. Evitar inserir conteúdo acima do conteúdo existente: Exceto em resposta à interação do usuário.
4. Usar transformações CSS para animações: Em vez de propriedades que disparam layout.
5. Pré-carregar fontes: Use font-display: swap para evitar texto invisível e mudanças de layout.

Comparação das métricas Core Web Vitals

Fluxo prático para melhorar Core Web Vitals

Siga este processo passo a passo:

1. Meça: Use o PageSpeed Insights para obter uma linha de base para dados de laboratório e de campo.
2. Identifique problemas: Veja as oportunidades e diagnósticos no Lighthouse.
3. Priorize: Foque primeiro na métrica com a pior pontuação.
4. Implemente correções: Aplique as otimizações listadas acima.
5. Teste: Execute o Lighthouse novamente e verifique os dados de campo após a implantação.
6. Monitore: Configure monitoramento de usuários reais com a biblioteca web-vitals e acompanhe ao longo do tempo.

FAQ

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

Para LCP, bom é ≤ 2,5s, precisa melhorar é ≤ 4s, ruim é > 4s. Para FID, bom é ≤ 100ms, precisa melhorar é ≤ 300ms, ruim é > 300ms. Para CLS, bom é ≤ 0,1, precisa melhorar é ≤ 0,25, ruim é > 0,25.

Com que frequência devo medir Core Web Vitals?

Monitore dados de campo continuamente e execute testes de laboratório após mudanças significativas. O Google atualiza os dados do CrUX mensalmente, então verifique o Search Console regularmente.

Posso melhorar Core Web Vitals sem um desenvolvedor?

Algumas correções, como compressão de imagens, podem ser feitas com ferramentas, mas muitas exigem mudanças no código. Considere usar um plugin de otimização de desempenho se você estiver em um CMS como WordPress.

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