Core Web Vitals: como melhorar LCP, INP e CLS sem destruir o design

LCP: entregue cedo o que domina a primeira tela

O Largest Contentful Paint mede o tempo até o maior elemento de conteúdo visível ser renderizado. Em sites visuais, esse elemento costuma ser a imagem do hero, uma fotografia de projeto ou um bloco grande de texto. Se o navegador descobre esse recurso tarde, o LCP cresce mesmo em servidores rápidos.

As correções mais efetivas incluem imagem em formato adequado, dimensões corretas, preload quando realmente necessário, `fetchpriority="high"` para o recurso principal e eliminação de cadeias que impedem a descoberta. Também é importante evitar esconder o hero atrás de loaders longos sem necessidade.

INP: interação precisa responder sem disputar a thread principal

O Interaction to Next Paint observa a latência das interações do usuário ao longo da sessão. Scripts longos, cálculos de layout repetidos e eventos de scroll mal implementados podem atrasar a resposta. A estratégia é quebrar tarefas, reduzir trabalho síncrono e evitar que animações dependam de leituras e escritas de layout a cada frame.

Animações baseadas em transform e opacity tendem a ser mais amigáveis à composição. Quando o projeto exige lógica complexa, medir no dispositivo real é mais útil do que presumir que uma máquina de desenvolvimento representa o usuário.

CLS: reserve espaço antes do conteúdo chegar

Cumulative Layout Shift aumenta quando elementos mudam de posição inesperadamente. Imagens sem width e height, fontes que alteram a métrica, banners injetados tardiamente e blocos que expandem sem reserva são causas comuns.

Definir proporção, dimensões e placeholders estáveis resolve grande parte dos casos. Em layouts responsivos, o objetivo não é impedir mudança entre breakpoints, mas impedir deslocamentos inesperados depois que a página já começou a ser exibida.

Site cinematográfico pode ser rápido

Um site com movimento pode manter boa performance quando o efeito é planejado desde a arquitetura. Sequências de frames devem ser otimizadas e carregadas de forma progressiva; cenas fora da viewport não precisam competir com o hero; bibliotecas devem entrar apenas quando utilizadas.

O problema não é o movimento em si. O problema é entregar todos os recursos ao mesmo tempo, executar trabalho desnecessário ou usar imagens gigantes sem estratégia adaptativa.

Laboratório e campo medem coisas diferentes

PageSpeed Insights combina dados de laboratório e, quando disponíveis, dados reais de usuários. Lighthouse é excelente para diagnóstico controlado, mas Core Web Vitals de campo representam condições reais de rede e dispositivo. Uma boa rotina usa ambos.

Para sites com pouco tráfego, os dados de campo podem demorar a aparecer. Nesse caso, o laboratório serve para priorizar gargalos, mas as decisões devem considerar também experiência manual em celular intermediário e conexão limitada.

Ordem de otimização que costuma dar mais retorno

Comece pelo elemento LCP e pelo caminho crítico. Depois trate deslocamentos de layout e JavaScript bloqueante. Em seguida, adie imagens e módulos abaixo da dobra, revise terceiros e meça novamente. Fazer vinte micro-otimizações antes de corrigir o recurso principal costuma desperdiçar tempo.