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

Você construiu um site rápido, mas os usuários ainda reclamam de carregamento lento ou interações travadas. Ou talvez suas classificações de SEO tenham caído, e você suspeite que a experiência da página seja a culpada. As Core Web Vitals são as métricas do Google para quantificar a experiência do usuário, e elas impactam diretamente as classificações de pesquisa. Este guia mostrará como medi-las e melhorá-las com passos práticos e acionáveis.

O que são Core Web Vitals?

Core Web Vitals são um conjunto de três métricas que o Google usa para avaliar a experiência do usuário de uma página web:

• Largest Contentful Paint (LCP): Mede o desempenho de carregamento. Marca o tempo em que o maior elemento de conteúdo (por exemplo, imagem, vídeo ou bloco de texto) se torna visível. Um bom LCP é de 2,5 segundos ou menos.
• First Input Delay (FID): Mede a interatividade. Registra o tempo desde a primeira interação do usuário com sua página (por exemplo, clicar em um link) até quando o navegador consegue responder. Um bom FID é de 100 milissegundos ou menos.
• Cumulative Layout Shift (CLS): Mede a estabilidade visual. Quantifica mudanças inesperadas de layout durante o carregamento da página. Um bom CLS é de 0,1 ou menos.

Essas métricas fazem parte do sinal de Page Experience do Google, então otimizá-las pode melhorar tanto a satisfação do usuário quanto as classificações de pesquisa.

Como medir as Core Web Vitals

Antes de melhorar, você precisa medir. Existem dois tipos principais de ferramentas: ferramentas de laboratório (teste sintético) e ferramentas de campo (monitoramento de usuários reais).

Ferramentas de laboratório

Ferramentas de laboratório simulam o carregamento de uma página em um ambiente controlado. Elas são ótimas para depurar e testar mudanças antes da implantação.

• Lighthouse: Integrado ao Chrome DevTools, audita desempenho, acessibilidade e SEO. Fornece pontuações e oportunidades específicas de melhoria.
• WebPageTest: Permite testar de vários locais e dispositivos, com métricas avançadas e filmstrips.

Ferramentas de campo

Ferramentas de campo coletam dados de usuários reais, dando uma visão verdadeira do desempenho em diferentes dispositivos e redes.

• Chrome User Experience Report (CrUX): Um conjunto de dados público de métricas de usuários reais do Chrome. Você pode visualizar dados do CrUX no PageSpeed Insights ou no BigQuery.
• Google Search Console: Fornece um relatório de Core Web Vitals mostrando como suas páginas se comportam com base nos dados do CrUX.
• Biblioteca JavaScript Web Vitals: Você pode instrumentar seu site para enviar dados de Core Web Vitals para sua plataforma de analytics.

Comece verificando as Core Web Vitals do seu site no Search Console ou no PageSpeed Insights. Depois use o Lighthouse para depurar páginas específicas.

Melhorando o Largest Contentful Paint (LCP)

O LCP geralmente é a métrica mais impactante de se otimizar. Veja como melhorá-la:

1. Otimize imagens

• Comprima imagens sem perder qualidade. Use ferramentas como o Image Compressor para reduzir o tamanho dos arquivos.
• Use formatos modernos como WebP ou AVIF, que oferecem melhor compressão que JPEG ou PNG.
• Implemente imagens responsivas com atributos srcset e sizes para servir imagens com tamanho adequado.
• Faça lazy-load de imagens abaixo da dobra, mas evite lazy-load na imagem do LCP.

2. Elimine recursos que bloqueiam a renderização

• Minifique CSS e JavaScript.
• Atrase JavaScript não crítico com atributos defer ou async.
• Incorpore CSS crítico e carregue o restante de forma assíncrona.

3. Melhore o tempo de resposta do servidor

• Use uma rede de entrega de conteúdo (CDN) para servir ativos de locais mais próximos dos usuários.
• Habilite cache para ativos estáticos e respostas de API.
• Otimize consultas de banco de dados e código do lado do servidor.

4. Pré-carregue recursos importantes

Use <link rel="preload"> para ativos críticos como fontes, imagens principais ou scripts descobertos tarde.

Melhorando o First Input Delay (FID)

O FID mede a capacidade de resposta. Um FID alto significa que a thread principal está ocupada e não consegue responder prontamente à entrada do usuário.

1. Divida tarefas longas

Tarefas longas de JavaScript bloqueiam a thread principal. Divida-as em tarefas menores usando setTimeout ou requestIdleCallback.

2. Otimize a execução de JavaScript

• Remova JavaScript não utilizado (tree shaking).
• Faça code-splitting dos seus bundles para que apenas o código necessário carregue inicialmente.
• Use web workers para cálculos pesados.

3. Evite scripts de terceiros grandes

Scripts de terceiros como analytics ou anúncios podem bloquear a thread principal. Carregue-os de forma assíncrona e considere usar um gerenciador de tags para controlar quando são disparados.

4. Reduza o tempo de inicialização do JavaScript

Minimize a quantidade de JavaScript que precisa ser analisada e executada no carregamento da página. Renderização do lado do servidor ou geração de site estático podem ajudar.

Melhorando o Cumulative Layout Shift (CLS)

O CLS mede a estabilidade visual. Mudanças de layout ocorrem quando elementos mudam de posição inesperadamente.

1. Sempre inclua atributos de tamanho para mídia

Para imagens e vídeos, defina atributos width e height ou use CSS aspect-ratio para reservar espaço.

2. Reserve espaço para anúncios e incorporações

Se você tem conteúdo dinâmico como anúncios ou iframes, reserve espaço para eles com um placeholder ou dimensões fixas.

3. Evite inserir conteúdo acima do conteúdo existente

Conteúdo injetado dinamicamente (por exemplo, banners, notificações) que empurra o conteúdo existente para baixo causa mudanças. Use sobreposições ou reserve espaço.

4. Use font-display swap

Fontes personalizadas podem causar FOIT (Flash of Invisible Text) ou FOUT (Flash of Unstyled Text). Use font-display: swap para mostrar o texto de fallback imediatamente.

Comparação das métricas Core Web Vitals

Exemplo prático: otimizando uma imagem para LCP

Suponha que seu elemento LCP seja uma imagem hero. Veja como otimizá-la:

<!-- Antes: Não otimizado -->
<img src="#" alt="Hero">

<!-- Depois: Otimizado -->
<img src="#" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high">

Use o Image Compressor para converter e comprimir a imagem para WebP. Defina fetchpriority="high" para dizer ao navegador para carregá-la cedo. Especifique dimensões para evitar mudança de layout.

Monitorando as Core Web Vitals ao longo do tempo

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

• Use a biblioteca web-vitals para enviar métricas para seu analytics.
• Configure alertas no Search Console para regressões.
• Audite regularmente com Lighthouse no seu pipeline de CI/CD.

Perguntas frequentes

O que são Core Web Vitals e por que importam?

Core Web Vitals são três métricas (LCP, FID, CLS) que medem carregamento, interatividade e estabilidade visual. Elas importam porque refletem a experiência real do usuário e são usadas pelo Google como sinal de classificação.

Com que frequência devo verificar minhas Core Web Vitals?

Verifique após implantações importantes e monitore continuamente via dados de campo. O Search Console fornece um relatório mensal, mas você pode usar a biblioteca web-vitals para rastrear em tempo real.

Posso melhorar as Core Web Vitals sem um desenvolvedor?

Algumas melhorias como comprimir imagens ou usar uma CDN podem ser feitas com plugins ou ferramentas. No entanto, otimizações mais profundas geralmente exigem mudanças no código. Comece com compressão de imagens e cache.

Pronto para melhorar seu LCP? Comprima suas imagens com nosso Image Compressor gratuito para reduzir o tamanho dos arquivos sem perder qualidade.