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

Seu site carrega, mas os usuários ainda saem. Interações lentas frustram os visitantes, e os mecanismos de busca percebem. Core Web Vitals são as métricas do Google para a experiência real do usuário: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) e Cumulative Layout Shift (CLS). Neste guia, mostramos como medi-las com precisão e melhorá-las com técnicas práticas em nível de código.

O que são Core Web Vitals?

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

• LCP mede o desempenho de carregamento. Marca o momento em que o maior elemento de conteúdo (imagem, bloco de texto, vídeo) se torna visível. Meta: ≤ 2,5 segundos.
• INP mede a interatividade. Rastreia a latência de todas as interações (cliques, toques, teclas) e reporta a pior. Meta: ≤ 200 milissegundos.
• CLS mede a estabilidade visual. Pontua deslocamentos inesperados de layout durante o carregamento. Meta: ≤ 0,1.

Essas métricas fazem parte do sinal de Page Experience do Google, mas, mais importante, refletem a frustração real do usuário. Melhorá-las beneficia tanto o SEO quanto as taxas de conversão.

Como medir o Core Web Vitals

Você precisa de dados de laboratório e de campo. Ferramentas de laboratório simulam condições; dados de campo vêm de usuários reais.

Ferramentas de laboratório

• Lighthouse (no Chrome DevTools ou CI) fornece um instantâneo com oportunidades de melhoria.
• PageSpeed Insights combina dados de laboratório e de campo do Chrome User Experience Report (CrUX).
• WebPageTest oferece scripts avançados e visualizações em tira de filme.

Ferramentas de campo

• Chrome UX Report (CrUX) mostra dados agregados de usuários reais para sua origem.
• Biblioteca web-vitals permite coletar métricas de usuários reais e enviá-las ao seu analytics.
• Search Console reporta o status do Core Web Vitals do seu site.

Comece verificando o PageSpeed Insights para suas páginas principais. Depois, configure o monitoramento de usuários reais com a biblioteca web-vitals para acompanhar o desempenho ao longo do tempo.

Melhorando o LCP

O LCP costuma ser a métrica mais impactante de corrigir. O maior elemento geralmente é uma imagem hero ou um bloco de texto grande.

1. Otimize o caminho crítico

• Reduza o tempo de resposta do servidor (TTFB) com cache, CDNs e código de backend eficiente.
• Elimine recursos que bloqueiam a renderização: embuta o CSS crítico, adie CSS e JavaScript não críticos.
• Pré-carregue a imagem do LCP: <link rel="preload" as="image" href="#">.

2. Otimize imagens

• Use formatos modernos como WebP ou AVIF.
• Sirva imagens responsivas com srcset e sizes.
• Comprima imagens sem perda visível de qualidade. Para compressão rápida, experimente nosso Image Compressor.

3. Melhore a resposta do servidor

• Use um CDN para armazenar em cache ativos estáticos globalmente.
• Ative compressão Brotli ou gzip.
• Otimize consultas de banco de dados e use cache no lado do servidor.

Exemplo: preload e fetchpriority para imagem do LCP:

<link rel="preload" as="image" href="#" fetchpriority="high">
<img src="#" alt="Hero" width="1200" height="600" fetchpriority="high">

Melhorando o INP

O INP mede a rapidez com que sua página responde à entrada do usuário. INP alto significa interações lentas.

1. Divida tarefas longas

• Use setTimeout, requestIdleCallback ou scheduler.yield para liberar a thread principal.
• Evite funções JavaScript de longa duração; divida-as em blocos menores.

2. Otimize manipuladores de eventos

• Use debounce ou throttle em eventos frequentes (scroll, resize, input).
• Use listeners de eventos passivos para eventos de toque e roda do mouse.
• Minimize atualizações do DOM dentro dos manipuladores.

3. Reduza a execução de JavaScript

• Faça code-splitting e lazy-load de JavaScript não crítico.
• Remova dependências e polyfills não utilizados.
• Use web workers para cálculos pesados.

Exemplo: liberar a thread principal em uma tarefa longa:

async function processLargeArray(items) {
  for (let i = 0; i < items.length; i++) {
    // Process item
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

Melhorando o CLS

O CLS mede deslocamentos inesperados de layout. Causas comuns: imagens sem dimensões, anúncios, embeds e conteúdo injetado dinamicamente.

1. Sempre defina dimensões

• Inclua atributos width e height em imagens e vídeos.
• Use aspect-ratio do CSS para contêineres responsivos.

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

• Use placeholders ou telas skeleton para anúncios e embeds.
• Evite inserir conteúdo acima do conteúdo existente, a menos que em resposta à interação do usuário.

3. Otimize o carregamento de fontes

• Use font-display: swap para evitar texto invisível, mas esteja ciente de possíveis deslocamentos de layout.
• Pré-carregue fontes principais para reduzir atrasos de troca.

Exemplo: reserve espaço com aspect-ratio:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Ferramentas e fluxo de trabalho

Integre verificações de desempenho ao seu fluxo de desenvolvimento:

• Execute o Lighthouse no CI (por exemplo, GitHub Actions) para detectar regressões.
• Use a biblioteca web-vitals para enviar dados de campo ao seu analytics.
• Monitore o CrUX e o Search Console para tendências de usuários reais.
• Teste em dispositivos reais, especialmente celulares de médio porte.

Lembre-se: desempenho é um recurso. Trate-o como qualquer outra métrica de qualidade.

FAQ

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

LCP: bom ≤ 2,5s, precisa melhorar ≤ 4,0s. INP: bom ≤ 200ms, precisa melhorar ≤ 500ms. CLS: bom ≤ 0,1, precisa melhorar ≤ 0,25. Esses limites são baseados em dados de usuários reais.

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

Monitore dados de campo continuamente por meio de ferramentas como CrUX e seu próprio RUM. Execute testes de laboratório a cada mudança significativa de código e pelo menos mensalmente para páginas principais.

Posso melhorar o Core Web Vitals sem um desenvolvedor?

Algumas correções, como compressão de imagens e cache, podem ser feitas via plugins ou configurações de CDN. No entanto, otimizações mais profundas (code splitting, CSS crítico) geralmente exigem envolvimento de um desenvolvedor.

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