LCP, CLS e INP: as três medidas que o Google olha

As Core Web Vitals são três números que tentam responder a três perguntas de quem visita: já apareceu?, parou quieto?, responde quando toco?

1. LCP — já apareceu?

Mede quanto tempo demora a desenhar o maior elemento visível: quase sempre a imagem de topo ou o título. O bom é 2,5 segundos.

O que o estraga, por ordem de frequência: imagens grandes sem otimização, tipos de letra que bloqueiam o texto, e servidores lentos a responder ao primeiro pedido.

<!-- Para a imagem principal, o contrário do lazy -->
<img src="destaque.jpg" fetchpriority="high" width="1200" height="630" alt="" />

2. CLS — parou quieto?

Mede o quanto a página salta enquanto carrega. O bom é 0,1.

A causa número um é sempre a mesma: imagens sem dimensões declaradas. O browser não sabe que espaço reservar, desenha o texto, e empurra-o para baixo quando a imagem chega — normalmente no instante exato em que a pessoa ia carregar num link.

<!-- Estes dois atributos são a correção de CLS mais barata que existe -->
<img src="foto.jpg" width="800" height="600" alt="" />

A seguir vêm os anúncios e as mensagens de consentimento inseridos por cima do conteúdo já desenhado. Se tiverem de lá estar, reserve-lhes o espaço com antecedência.

3. INP — responde quando toco?

Substituiu o antigo FID em 2024, e é mais exigente: em vez de medir só o primeiro toque, mede a pior das interações ao longo da visita. O bom é 200 ms.

O que o estraga é JavaScript a ocupar a thread principal — um filtro que percorre dez mil elementos a cada tecla, um componente que se volta a desenhar inteiro por causa de um clique.

// Deixar o browser desenhar antes de fazer o trabalho pesado
elemento.addEventListener('click', async () => {
  mostrarEstadoDeCarregamento();
  await new Promise((resolve) => setTimeout(resolve, 0));
  trabalhoPesado();
});

4. Medir, e não adivinhar

O Lighthouse dá números de laboratório, úteis para comparar antes e depois. Os números que contam para o Google são os de visitantes reais, e esses vêm da Search Console, no relatório de Core Web Vitals.

Um site pode ter 100 no Lighthouse e falhar em campo — normalmente porque o teste corre num portátil rápido com fibra, e a realidade é um telemóvel de há quatro anos numa rede móvel.