Performance

LCP, INP e CLS: o que significam e como melhorá-los

LCP, INP e CLS: o que significam e como melhorá-los

Se já leste Core Web Vitals explicados para quem não é técnico, sabes que o Google mede a experiência do teu site com três métricas. Este artigo é o passo seguinte: ver cada uma delas em detalhe — o que mede, que valor é "bom", o que costuma estragá-la e, sobretudo, como a melhorar.

É um pouco mais técnico, mas vale a pena perceber, nem que seja para saber o que pedir a quem trata do teu site.

LCP — Largest Contentful Paint

O que mede

O LCP mede quanto tempo demora a aparecer o maior elemento visível quando se abre a página — tipicamente a imagem grande do topo, um vídeo ou o bloco principal de texto. É a métrica que responde a "a página carregou rápido?".

Que valor é bom

  • Bom: até 2,5 segundos.
  • A melhorar: entre 2,5 e 4 segundos.
  • Mau: acima de 4 segundos.

O que costuma estragar o LCP

  • Imagens enormes e não otimizadas no topo.
  • Alojamento lento a responder.
  • Tipos de letra e scripts que bloqueiam a renderização.
  • Excesso de código a carregar antes do conteúdo principal.

Como melhorar

  • Otimiza a imagem principal (comprime, usa formatos modernos, dimensiona certo) — ver Imagens lentas a travar o site.
  • Dá prioridade ao carregamento do elemento principal e adia o resto.
  • Melhora o alojamento e usa cache e CDN para o servidor responder depressa.
  • Reduz o que bloqueia a renderização (CSS e JavaScript críticos primeiro, o resto depois).

INP — Interaction to Next Paint

O que mede

O INP mede a rapidez com que a página responde quando interages com ela — clicar num botão, abrir um menu, escrever num campo. Ao contrário do LCP (que olha para o carregamento inicial), o INP avalia a resposta ao longo de toda a visita. Substituiu uma métrica anterior, o FID, por dar um retrato mais fiel da interatividade.

Que valor é bom

  • Bom: até 200 milissegundos.
  • A melhorar: entre 200 e 500 milissegundos.
  • Mau: acima de 500 milissegundos.

O que costuma estragar o INP

  • Excesso de JavaScript a ocupar o processador.
  • Scripts de terceiros pesados (chats, tracking, widgets).
  • Código que faz a página "congelar" enquanto processa.

Como melhorar

  • Reduz e otimiza o JavaScript — menos código, melhor escrito.
  • Limita os scripts de terceiros ao essencial e carrega-os de forma a não travar a interação.
  • Divide tarefas pesadas para a página não bloquear enquanto trabalha.
  • Remove plugins desnecessários (sobretudo em WordPress).

CLS — Cumulative Layout Shift

O que mede

O CLS mede o quanto os elementos da página saltam de sítio enquanto ela carrega. É a métrica da estabilidade visual — aquela frustração de ires clicar e, no último instante, tudo se mexer e clicares no sítio errado.

Que valor é bom

  • Bom: 0,1 ou menos.
  • A melhorar: entre 0,1 e 0,25.
  • Mau: acima de 0,25.

O que costuma estragar o CLS

  • Imagens e vídeos sem dimensões definidas — o espaço deles só "aparece" depois de carregarem, empurrando o resto.
  • Anúncios e conteúdo inserido dinamicamente sem espaço reservado.
  • Tipos de letra que mudam o tamanho do texto ao carregar.

Como melhorar

  • Define sempre largura e altura de imagens e vídeos, para o espaço ser reservado à partida.
  • Reserva espaço para anúncios, banners e elementos que carregam depois.
  • Gere bem os tipos de letra para evitar que o texto "salte" quando a fonte final carrega.

Como medir e acompanhar

Para ver os três valores do teu site:

  • PageSpeed Insights — teste rápido com diagnóstico e sugestões.
  • Search Console — relatório de Core Web Vitals com os dados reais dos teus visitantes, agregados.

Lembra-te da distinção entre dados de laboratório (teste simulado, útil para diagnosticar) e dados de campo (a experiência real, que é o que o Google valoriza). Otimiza, mas confirma sempre com os dados de campo ao longo do tempo.

A ordem prática

Se tens de priorizar:

  1. CLS — costuma ser o mais rápido de corrigir (definir dimensões, reservar espaço).
  2. LCP — atacar imagens e alojamento dá grandes ganhos.
  3. INP — o mais técnico, ligado a JavaScript e scripts.

Se ainda não sabes porque é que o site, no geral, está lento, começa por Porque é que o seu site é lento (e como acelerá-lo).

Conclusão

LCP, INP e CLS traduzem três perguntas simples — carrega rápido, reage depressa, fica quieto — em números que podes medir e melhorar. Nenhum exige magia: imagens otimizadas e bom alojamento tratam do LCP; menos JavaScript trata do INP; dimensões definidas e espaço reservado tratam do CLS. Resolver isto melhora a experiência de quem te visita, as tuas conversões e a forma como o Google te vê.

No sitesfixe.pt construímos sites em Lisboa com LCP, INP e CLS no verde de raiz — não como remendo depois. Websites desde 1.500€, lojas online desde 3.500€. Pede um orçamento sem compromisso.

Lê também:

Fontes

Precisas de um site ou loja online?

Estúdio digital português. Sites e lojas online rápidos, otimizados para o Google e feitos para resultado.

Pedir orçamento