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

Por que as Core Web Vitals importam

Você construiu um site bonito, mas os usuários estão saindo porque parece lento. As Core Web Vitals são as métricas do Google para a experiência real do usuário: Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS). Elas afetam o ranking de busca e, mais importante, se os visitantes permanecem. Este guia mostra como medi-las e melhorá-las.

Entendendo as três métricas

Cada métrica captura um aspecto diferente de carregamento, interatividade e estabilidade visual.

Nota: o FID está sendo substituído pelo Interaction to Next Paint (INP) em 2024, mas os princípios de otimização permanecem semelhantes.

Como medir as Core Web Vitals

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

1. Chrome DevTools Lighthouse: Execute uma auditoria na aba Lighthouse. Ela fornece pontuações de laboratório e oportunidades.
2. PageSpeed Insights: Insira sua URL para ver dados de campo do Chrome User Experience Report (CrUX) e sugestões de laboratório.
3. Search Console: Verifique o relatório de Core Web Vitals para dados de campo em nível de grupo.
4. Biblioteca JavaScript Web Vitals: Adicione web-vitals ao seu site para coletar métricas de usuários reais.

import {onLCP, onFID, onCLS} from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

Use esses dados para identificar padrões e priorizar correções.

Melhorando o Largest Contentful Paint (LCP)

O LCP costuma ser a métrica de maior impacto. Otimize estas áreas:

• Otimize imagens: Comprima imagens, use WebP ou AVIF e sirva tamanhos responsivos. Ferramentas como o Image Compressor podem ajudar a reduzir o tamanho do arquivo sem perda visível de qualidade.
• Pré-carregue recursos críticos: Use <link rel="preload"> para imagens hero e fontes.
• Elimine recursos que bloqueiam a renderização: Faça inline do CSS crítico, adie JavaScript não crítico.
• Use uma CDN: Sirva ativos de locais mais próximos dos usuários.
• Faça cache de ativos: Defina tempos de cache longos para arquivos estáticos.

Exemplo: Pré-carregue sua imagem LCP:

<link rel="preload" as="image" href="#">

Melhorando o First Input Delay (FID)

O FID mede a capacidade de resposta. Tarefas longas de JavaScript bloqueiam a thread principal.

• Divida tarefas longas: Use setTimeout ou requestIdleCallback para ceder à thread principal.
• Minimize o trabalho na thread principal: Remova JavaScript não utilizado, faça code-split e adie scripts não críticos.
• Use web workers para cálculos pesados.
• Evite scripts síncronos grandes: Carregue scripts de terceiros de forma assíncrona.

Audite com as oportunidades "Minimize main-thread work" e "Reduce JavaScript execution time" do Lighthouse.

Melhorando o Cumulative Layout Shift (CLS)

O CLS ocorre quando elementos se movem inesperadamente. Causas comuns e correções:

• Imagens sem dimensões: Sempre defina atributos width e height ou use aspect-ratio no CSS.
• Anúncios, embeds, iframes: Reserve espaço com um placeholder ou contêiner de tamanho fixo.
• Injeção de conteúdo dinâmico: Evite inserir conteúdo acima do conteúdo existente, a menos que seja acionado por interação do usuário.
• Web fonts: Use font-display: swap e pré-carregue fontes para evitar texto invisível ou mudanças de layout.

Exemplo: Reserve espaço para uma imagem:

<img src="#" width="800" height="600" alt="...">

Ferramentas e fluxo de trabalho para monitoramento contínuo

Desempenho não é uma correção única. Integre o monitoramento ao seu processo de desenvolvimento:

• Lighthouse CI: Execute auditorias em cada pull request para detectar regressões.
• Real User Monitoring (RUM): Use a biblioteca web-vitals e envie dados para sua plataforma de analytics.
• Orçamentos de desempenho: Defina limites para métricas e falhe builds quando forem excedidos.

Verifique regularmente o PageSpeed Insights e o Search Console para acompanhar o progresso.

FAQ

O que são Core Web Vitals?

Core Web Vitals são um conjunto de métricas definidas pelo Google que medem a experiência real do usuário: Largest Contentful Paint (carregamento), First Input Delay (interatividade) e Cumulative Layout Shift (estabilidade visual).

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

Monitore continuamente com RUM e execute auditorias de laboratório em cada mudança significativa de código. Verifique dados de campo mensalmente via Search Console ou PageSpeed Insights.

Posso melhorar as Core Web Vitals sem um desenvolvedor?

Algumas correções, como compressão de imagens e uso de CDN, podem ser feitas com plugins ou ferramentas, mas otimizações mais profundas geralmente exigem mudanças de código. Comece com imagens e cache.

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