Core Web Vitals: Medir e Melhorar o Desempenho Web

Seu site carrega, mas os usuários ainda abandonam. Tempos de carregamento lentos, mudanças inesperadas de layout e interações não responsivas frustram os visitantes e prejudicam seu ranking de busca. As Core Web Vitals (CWV) são as métricas do Google para experiência do usuário e impactam diretamente o SEO. Este guia mostra como medi-las e melhorá-las com passos acionáveis.

O que são Core Web Vitals?

As Core Web Vitals são três métricas que quantificam aspectos-chave da experiência do usuário:

• Largest Contentful Paint (LCP): Mede o desempenho de carregamento. O tempo que o maior elemento de conteúdo (imagem, bloco de texto, vídeo) leva para se tornar visível. Bom: ≤ 2,5s.
• First Input Delay (FID): Mede a interatividade. O tempo desde a primeira interação do usuário (clique, toque, pressionamento de tecla) até a resposta do navegador. Bom: ≤ 100ms.
• Cumulative Layout Shift (CLS): Mede a estabilidade visual. Quantifica mudanças inesperadas de layout durante o carregamento da página. Bom: ≤ 0,1.

Essas métricas fazem parte dos sinais de experiência na página do Google e afetam os rankings de busca. Elas também refletem a experiência real do usuário, então melhorá-las beneficia tanto o SEO quanto a satisfação do usuário.

Como medir as Core Web Vitals

Você precisa de dados de campo (medições de usuários reais) e dados de laboratório (testes sintéticos). Use ambos para uma visão completa.

Ferramentas de dados de campo

• Chrome User Experience Report (CrUX): Conjunto de dados público de métricas de usuários reais. Acesse via PageSpeed Insights, Search Console ou BigQuery.
• PageSpeed Insights: Mostra dados de campo (se disponíveis) e dados de laboratório para uma URL.
• Relatório Core Web Vitals do Search Console: Agrupa URLs por status (ruim, precisa melhorar, bom).
• Biblioteca JavaScript web-vitals: Colete seus próprios dados de campo com import {onLCP, onFID, onCLS} from 'web-vitals'; e envie para seu endpoint de análise.

Ferramentas de dados de laboratório

• Lighthouse: Integrado ao Chrome DevTools. Execute auditorias de desempenho, acessibilidade e SEO. Fornece métricas de laboratório e oportunidades de melhoria.
• WebPageTest: Testes avançados com condições de rede personalizadas e gráficos de cascata.
• Painel Performance do Chrome DevTools: Grave o desempenho em tempo de execução para identificar tarefas longas e problemas de renderização.

Melhorando o Largest Contentful Paint (LCP)

O LCP geralmente é a métrica de maior impacto. Otimize o caminho crítico de renderização e o maior elemento.

1. Otimize o maior elemento

• Se o LCP for uma imagem: comprima-a, use formatos modernos (WebP, AVIF) e defina atributos width e height para evitar mudanças de layout.
• Pré-carregue a imagem LCP: <link rel="preload" as="image" href="#">.
• Use imagens responsivas com srcset e sizes.
• Se o LCP for texto: garanta que as fontes carreguem rapidamente. Use font-display: swap e pré-carregue fontes-chave.

2. Elimine recursos bloqueantes de renderização

• Incorpore CSS crítico e adie CSS não crítico.
• Adie ou torne assíncrono o JavaScript: <script src="#" defer></script>.
• Minifique CSS e JavaScript.

3. Melhore o tempo de resposta do servidor

• Use uma CDN para servir ativos de locais mais próximos aos usuários.
• Ative o cache (cabeçalhos de cache HTTP, service workers).
• Otimize o desempenho do backend (consultas de banco de dados, cache no lado do servidor).

4. Reduza o tamanho do payload

• Comprima imagens e use carregamento lazy para imagens abaixo da dobra.
• Remova JavaScript e CSS não utilizados.
• Use divisão de código para carregar apenas o código necessário.

Melhorando o First Input Delay (FID)

O FID mede a responsividade. Tarefas longas de JavaScript bloqueiam a thread principal, atrasando o tratamento de interações.

1. Divida tarefas longas

Use setTimeout ou requestIdleCallback para ceder à thread principal. Ou use scheduler.yield() onde suportado.

// Exemplo: ceder à thread principal após um bloco de trabalho
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    // processar item
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

2. Otimize manipuladores de eventos

• Use debounce ou throttle em eventos de alta frequência (scroll, resize, input).
• Use listeners de eventos passivos para eventos de toque e roda: element.addEventListener('touchstart', handler, {passive: true});.
• Evite trabalho pesado em manipuladores de eventos; transfira para Web Workers.

3. Reduza o tempo de execução de JavaScript

• Divida o código e carregue sob demanda JavaScript não crítico.
• Remova dependências não utilizadas.
• Use tree-shaking e minificação.

Melhorando o Cumulative Layout Shift (CLS)

O CLS mede a estabilidade visual. Mudanças inesperadas incomodam os usuários e causam cliques errados.

1. Sempre inclua atributos de tamanho

Para imagens e vídeos, defina width e height (ou use CSS aspect-ratio) para que o navegador reserve espaço.

2. Reserve espaço para conteúdo dinâmico

• Para anúncios, incorporações ou conteúdo dinâmico, use um placeholder com dimensões fixas.
• Evite inserir conteúdo acima do conteúdo existente, a menos que em resposta a uma interação do usuário.

3. Use animações com transform

Prefira CSS transform e opacity para animações; eles não causam mudanças de layout.

4. Carregue fontes com cuidado

Use font-display: optional ou swap para evitar texto invisível e mudanças de layout. Pré-carregue fontes-chave.

Ferramentas e fluxo de trabalho para melhoria contínua

O desempenho é contínuo. Integre a medição ao seu processo de desenvolvimento.

• Use Lighthouse CI no seu pipeline para detectar regressões.
• Monitore dados de campo via web-vitals e sua análise.
• Defina orçamentos de desempenho e alerte sobre violações.

Para verificações rápidas, use o Analisador de Logs Nginx do TryQuickToolBox para identificar respostas lentas do servidor que podem afetar o LCP.

FAQ

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

LCP: bom ≤ 2,5s, precisa melhorar ≤ 4s, ruim > 4s. FID: bom ≤ 100ms, precisa melhorar ≤ 300ms, ruim > 300ms. CLS: bom ≤ 0,1, precisa melhorar ≤ 0,25, ruim > 0,25. Estes são avaliados no 75º percentil de carregamentos de página.

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

Monitore dados de campo continuamente via análise e Search Console. Execute testes de laboratório em cada mudança significativa de código e pelo menos mensalmente para verificações de linha de base.

Melhorar as Core Web Vitals realmente afeta o SEO?

Sim, o Google usa sinais de experiência na página, incluindo as Core Web Vitals, como fator de ranking. Embora o conteúdo permaneça primordial, boas CWV podem lhe dar uma vantagem, especialmente em nichos competitivos.

Pronto para otimizar? Comece medindo suas pontuações atuais com o PageSpeed Insights, depois ataque as maiores oportunidades. Para uma verificação rápida no lado do servidor, experimente nosso Analisador de Logs Nginx para identificar respostas lentas do backend que podem estar prejudicando seu LCP.