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

Você criou um site rápido, mas os usuários ainda reclamam de lentidão. Ou talvez seu ranking de SEO tenha caído após uma atualização do Google. O culpado pode ser as Core Web Vitals — um conjunto de métricas que quantificam a experiência real do usuário. Ignorá-las pode prejudicar tanto a usabilidade quanto a visibilidade nos mecanismos de busca. Este guia mostrará como medir e melhorar cada vital, com passos práticos que você pode implementar hoje mesmo.

O que são Core Web Vitals?

As Core Web Vitals são três métricas específicas que o Google usa para avaliar a experiência na página:

• Largest Contentful Paint (LCP): Mede o desempenho de carregamento. Rastreia o tempo necessário para o maior elemento de conteúdo (imagem, vídeo ou bloco de texto) se tornar visível. Um bom LCP é de 2,5 segundos ou menos.
• Interaction to Next Paint (INP): Mede a interatividade. Registra a latência de todas as interações (cliques, toques, pressionamentos de tecla) e reporta um percentil alto. Um bom INP é de 200 milissegundos ou menos.
• Cumulative Layout Shift (CLS): Mede a estabilidade visual. Quantifica mudanças inesperadas de layout durante o carregamento. Um bom CLS é de 0,1 ou menos.

Essas métricas fazem parte dos sinais de experiência na página do Google, mas também afetam diretamente como os usuários percebem seu site. Um LCP lento frustra os usuários, um INP alto faz a página parecer sem resposta, e o CLS causa cliques errados.

Como Medir as Core Web Vitals

Você precisa de dados de laboratório e de campo para obter um panorama completo. Ferramentas de laboratório simulam condições, enquanto os dados de campo vêm de usuários reais.

Ferramentas de Laboratório

• Lighthouse: Integrado ao Chrome DevTools, audita o desempenho e fornece pontuações para LCP, CLS e TBT (um proxy para INP). Execute-o no modo anônimo com limitação para simular condições móveis.
• WebPageTest: Oferece testes avançados de vários locais e dispositivos, com visualizações em filmstrip e gráficos de cascata.
• PageSpeed Insights: Combina dados de laboratório e de campo (do CrUX) em um único relatório.

Ferramentas de Campo

• Chrome User Experience Report (CrUX): Um conjunto de dados público de métricas de usuários reais para milhões de sites. Acesse via PageSpeed Insights ou pela API do CrUX.
• Google Search Console: Mostra o status das Core Web Vitals do seu site, agrupado por URL.
• Biblioteca JavaScript web-vitals: Adicione-a ao seu site para coletar métricas de usuários reais e enviá-las ao seu analytics.

Use ferramentas de laboratório para depuração e dados de campo para validar correções. Um erro comum é otimizar apenas para pontuações de laboratório, ignorando a experiência real do usuário.

Melhorando o LCP

O LCP geralmente é a métrica mais impactante de corrigir. Veja como otimizá-lo:

1. Otimize imagens: Comprima imagens sem perder qualidade, use formatos modernos como WebP ou AVIF e sirva imagens responsivas com srcset. Ferramentas como o Image Compressor podem ajudar a reduzir o tamanho dos arquivos.
2. Pré-carregue recursos críticos: Use <link rel="preload"> para imagens principais, fontes e arquivos CSS/JS essenciais.
3. Elimine recursos que bloqueiam a renderização: Faça inline do CSS crítico, adie o JavaScript não crítico e evite arquivos CSS grandes.
4. Use uma CDN: Sirva ativos de locais de borda próximos aos usuários para reduzir a latência.
5. Armazene ativos em cache: Defina tempos de cache longos para recursos estáticos com cache busting via nomes de arquivo.
6. Otimize o tempo de resposta do servidor: Use hospedagem rápida, ative a compressão (Brotli ou Gzip) e otimize as consultas ao banco de dados.

Para um exemplo detalhado, considere uma imagem principal. Em vez de servir um JPEG de 2MB, comprima-o para menos de 200KB, converta para WebP e pré-carregue-o. Só isso pode reduzir o LCP em segundos.

Melhorando o INP

O INP mede a responsividade. Um INP alto geralmente resulta de longas tarefas JavaScript bloqueando a thread principal.

1. Divida tarefas longas: Use setTimeout ou requestIdleCallback para ceder à thread principal.
2. Otimize manipuladores de eventos: Aplique debounce ou throttle em eventos frequentes como scroll ou resize. Evite cálculos pesados nos manipuladores.
3. Reduza a execução de JavaScript: Faça code-splitting, tree-shaking e lazy-loading de JS não crítico.
4. Use web workers: Transfira tarefas caras para uma thread de worker.
5. Minimize scripts de terceiros: Audite e remova analytics, anúncios ou widgets sociais desnecessários.

Teste o INP interagindo com sua página no painel Performance do Chrome DevTools. Procure por tarefas longas (triângulos vermelhos) e otimize-as.

Melhorando o CLS

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

1. Defina dimensões para imagens e vídeos: Sempre inclua atributos width e height ou use CSS aspect-ratio.
2. Reserve espaço para anúncios e incorporações: Use placeholders com tamanhos fixos.
3. Evite inserir conteúdo acima do conteúdo existente: Exceto para interações acionadas pelo usuário.
4. Use font-display: swap: Mas esteja ciente de que a troca de fontes pode causar mudanças. Considere pré-carregar fontes ou usar size-adjust.
5. Aplique transformações CSS para animações: Em vez de propriedades que acionam layout.

Use o recurso Layout Shift Regions no Chrome DevTools para visualizar as mudanças.

Ferramentas e Fluxo de Trabalho

Integre o monitoramento das Core Web Vitals ao seu fluxo de desenvolvimento:

• Execute o Lighthouse no CI para detectar regressões.
• Use a biblioteca web-vitals para coletar dados de campo e configurar alertas.
• Verifique regularmente o Search Console em busca de problemas.
• Priorize correções com base no impacto e no esforço.

Lembre-se de que as Core Web Vitals são apenas uma parte do desempenho. Sempre considere a experiência geral do usuário.

Perguntas Frequentes

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

Limites bons: LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1. Precisa melhorar: LCP ≤ 4s, INP ≤ 500ms, CLS ≤ 0,25. Ruim: acima desses valores.

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

Monitore os dados de campo continuamente e execute testes de laboratório após mudanças significativas. No mínimo, verifique mensalmente e após implantações.

Posso melhorar as 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. Mas otimizações mais profundas geralmente exigem alterações no código.

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