Blog › Otimização na prática · por Ana Beatriz da Costa · 7 min de leitura

Core Web Vitals: o que são, como medir e como melhorar de verdade

LCP, CLS e INP explicados sem mistério, com as faixas oficiais de classificação e as correções que mais impactam cada métrica em sites reais.

As três métricas e suas faixas Os Core Web Vitals medem a experiência de uso da página com dados de pessoas reais que usam Chrome (Chrome UX Report). As faixas oficiais atuais são: Métrica Mede Bom Necessita melhoria Ruim --- --- --- --- --- LCP Carregamento do maior elemento visível ≤ 2,5 s 2,5–4 s > 4 s INP Tempo de resposta à interação ≤ 200 ms 200–500 ms > 500 ms CLS Estabilidade visual durante o carregamento ≤ 0,1 0,1–0,25 > 0,25 A classificação usa o percentil 75 das visitas. Não é a média: uma página rápida para 80% dos visitantes e lenta para os outros 20% ainda pode falhar no INP mobile. Laboratório × campo - Dados de campo são de usuários reais (CrUX, Search Console). São o objetivo. - Dados de laboratório são simulações (Lighthouse, PageSpeed). São o diagnóstico. Uma página pode ter nota alta no Lighthouse e INP ruim em campo — geralmente JavaScript que reage devagar em aparelhos modestos. A integração com PageSpeed Insights na plataforma mostra os dois lados: a nota de laboratório e os percentis de campo, quando disponíveis para a origem. Correções por métrica, em ordem de impacto LCP 1. Otimize a imagem do herói (compressão, formato WebP/AVIF, tamanho certo). 2. Use fetchpriority="high" nela e evite lazy-load no primeiro elemento visível. 3. Reduza o tempo até o primeiro byte (cache de servidor, CDN, resposta do backend). INP 1. Divida tarefas longas de JavaScript (bundle splitting, menos JS na rota crítica). 2. Adie scripts não essenciais e use requestIdleCallback para trabalho secundário. 3. Atenção a manipulação pesada de DOM em eventos de input. CLS 1. Declare width e height (ou aspect-ratio) em imagens e vídeos. 2. Reserve espaço para banners e conteúdo inserido por scripts. 3. Não insira conteúdo acima do existente durante o carregamento.

Este é o trecho inicial do guia — o artigo completo, com exemplos e critérios de verificação, é exibido na aplicação.

Continue com os recursos da plataforma, os planos e os demais guias.

OtimizaSEO — plataforma brasileira de otimização de sites com IA. Início · Recursos · Planos · Blog · Sobre · Contato