Core Web Vitals: como medir e melhorar LCP, CLS e INP
Core Web Vitals são as três métricas que o Google usa para avaliar a experiência do usuário: LCP (velocidade de carregamento), CLS (estabilidade visual) e INP (responsividade). Desde 2021, elas são fator de ranking. Lojas com bons scores ganham vantagem no posicionamento orgânico e convertem mais.
LCP: Largest Contentful Paint
Mede o tempo até o maior elemento visível ser renderizado. O ideal é abaixo de 2.5 segundos. Causas comuns de LCP ruim: imagens grandes sem otimização, server response lento (TTFB alto), render-blocking CSS/JS e web fonts lentas. Soluções: preload da imagem hero, otimizar TTFB com CDN, inline critical CSS e usar font-display swap.
CLS: Cumulative Layout Shift
Mede deslocamentos visuais inesperados. O ideal é abaixo de 0.1. Causas comuns: imagens/vídeos sem dimensões, anúncios/banners injetados dinamicamente, web fonts que trocam e conteúdo carregado async que empurra layout. Soluções: definir width/height em toda mídia, reservar espaço para conteúdo dinâmico e usar size-adjust para font fallbacks.
INP: Interaction to Next Paint
Mede o tempo entre uma interação do usuário e a próxima pintura. O ideal é abaixo de 200ms. Causas comuns: JavaScript pesado no main thread, event handlers complexos, hydration pesada em SPAs e third-party scripts bloqueantes. Soluções: code splitting, web workers para tarefas pesadas, debounce em handlers e defer de scripts não essenciais.
Como medir
Dados de campo (real users): PageSpeed Insights, Chrome UX Report (CrUX), Search Console. Dados de lab (simulados): Lighthouse no DevTools, WebPageTest. A diferença importa: dados de lab mostram o potencial, dados de campo mostram a realidade dos seus usuários. Otimize baseado em dados de campo.
Priorização
Se os três estão ruins, comece pelo LCP. É o que mais impacta a percepção de velocidade e tem as soluções mais diretas (otimizar imagens, CDN, TTFB). Depois CLS (definir dimensões, reservar espaço). Por último INP (code splitting, defer scripts). Cada melhoria deve ser medida antes e depois.