Estudo de Caso: Como Melhoramos os Core Web Vitals em 60% em Duas Semanas

O Antes

Um site de e-commerce Next.js, 12 mil SKUs, receita mensal de $2M. O tráfego orgânico vinha caindo há seis meses. O Google Search Console mostrava o problema: 68% das URLs na categoria de LCP "ruim".

Depois: 92% "bom" nas três métricas. Aqui está exatamente o que mudamos.

LCP: de 4.2s para 1.1s

A imagem hero de todas as páginas de produto era carregada em resolução total — 4000x4000px, 2.3MB. O slogan dizia "otimizado", mas eles usavam um CDN genérico sem conversão para WebP. Para uma análise completa de como diagnosticar e corrigir o LCP, consulte nosso guia aprofundado de LCP.

O que fizemos:

- Convertemos todas as imagens hero para WebP com 85% de qualidade

- Adicionamos fetchpriority="high" à imagem de LCP

- Implementamos tamanhos de imagem responsivos via componente de Imagem do Next.js com o atributo sizes

- Movemos o widget de avaliações de terceiros para abaixo da dobra (ele carregava 180KB de JS antes da imagem hero)

A maior vitória foi o widget de avaliações. Remover uma única tag <script> do caminho crítico reduziu o LCP em 1,8 segundos sozinho.

INP: de 320ms para 95ms

O site tinha cinco scripts de análise carregando todos de forma ansiosa. Session replay, mapas de calor, dois provedores de análise diferentes e um chatbot.

O que fizemos:

- Consolidamos em um único provedor de análise

- Adiamos o chatbot para o callback de ociosidade

- Movemos os mapas de calor para um carregamento preguiçoso controlado pelo consentimento de cookies

- Auditamos os manipuladores de eventos na página de produto — um componente de acordeão estava religando os listeners a cada renderização

A ferramenta de medição de latência mostrou que 75% do INP vinha de scripts de terceiros. Cortar três deles foi a correção completa.

CLS: de 0.25 para 0.03

O layout estava mudando por causa de três coisas: ausência de width/height nas imagens de produto, um anúncio em banner injetado dinamicamente e uma fonte da web sendo trocada após a pintura.

O que fizemos:

- Adicionamos width e height explícitos a todas as imagens de produto

- Reservamos um espaço de 60px para o contêiner do banner (mesmo quando vazio)

- Pré-carregamos a fonte principal e usamos font-display: optional

O Cronograma

Dias 1-3: Auditoria com Lighthouse, WebPageTest e dados do CrUX. Dias 4-8: Otimização de imagens e consolidação de scripts. Dias 9-12: Correções de layout e otimização de fontes. Dia 14: Medimos 92% de "bom" nas três métricas no Search Console.

O resultado? O tráfego orgânico voltou aos níveis anteriores em três semanas, e a taxa de conversão melhorou 12% — páginas mais rápidas convertem melhor. Para um guia completo de como corrigir todas as métricas dos Core Web Vitals, consulte nosso guia de correção de Core Web Vitals.

Artigos Relacionados

- Como Corrigir Problemas de Core Web Vitals: LCP, INP e CLS Explicados

- Mergulho Profundo em LCP: Diagnosticando e Corrigindo o Core Web Vital Mais Difícil