Web Vitals: o que LCP, INP e CLS medem

O que é

Os Core Web Vitals, definidos pelo web.dev do Google, são três métricas centradas no usuário. O Largest Contentful Paint (LCP) informa o tempo de renderização da maior imagem, do maior bloco de texto ou do maior vídeo visível na viewport, contado a partir do início da navegação. O Interaction to Next Paint (INP) observa a latência de todos os cliques, toques e teclas pressionadas durante uma visita e informa a interação mais longa observada, desconsiderando valores atípicos (uma interação é descartada a cada 50). O Cumulative Layout Shift (CLS) pontua o deslocamento inesperado do conteúdo visível, que costuma ocorrer quando recursos são carregados de forma assíncrona ou quando elementos são inseridos acima do conteúdo já exibido. As metas recomendadas são LCP de até 2,5 segundos, INP de 200 milissegundos ou menos e CLS de 0,1 ou menos, avaliados no percentil 75 dos carregamentos de página, separados entre mobile e desktop.

Por que importa

As ferramentas de laboratório executam um único carregamento sintético em uma só máquina; os vitals são definidos com base em dados de campo, obtidos de usuários e dispositivos reais, que refletem o que as pessoas de fato vivenciam. Saber qual métrica falha indica a causa: o LCP depende do tempo do servidor, da descoberta dos recursos e da renderização; o INP, do trabalho da main thread dentro e depois dos event handlers; o CLS, de conteúdo que chega sem espaço reservado.

Como aplicar

• LCP: entregue o HTML rapidamente (cache, compressão), faça com que a maior imagem seja descoberta já no HTML inicial, e não carregada com lazy loading nem inserida por script, e evite recursos que bloqueiam a renderização antes dela.
• INP: mantenha os event handlers curtos, divida tarefas longas e libere a main thread periodicamente, adie o trabalho não urgente e mantenha o DOM pequeno para que o cálculo de estilo e de layout após uma interação continue barato.
• CLS: reserve espaço para imagens, embeds, anúncios e componentes de carregamento tardio com dimensões explícitas ou aspect-ratio; nunca insira conteúdo acima do que o usuário está lendo, a menos que ele tenha pedido.
• Meça em campo com as APIs de desempenho do navegador ou com a biblioteca web-vitals do Google, e segmente por tipo de página e classe de dispositivo antes de tirar conclusões.
• Trabalhe com o percentil 75, não com a mediana: uma mediana rápida com uma cauda lenta ainda reprova.

Armadilhas

Melhorar a pontuação de laboratório sem mudar os dados de campo, geralmente porque os dispositivos de teste são mais rápidos que os dos usuários. As métricas são atribuídas a carregamentos de página; em uma single-page application, uma troca de rota no cliente não conta como novo carregamento, portanto a atribuição por rota exige instrumentação adicional. Os limites são recomendações da fonte citada, não garantias de efeito sobre ranqueamento ou conversão.