LCP: definição, limites e otimização

O LCP, ou Largest Contentful Paint, identifica o maior elemento visível no viewport no momento do carregamento da página — geralmente uma imagem hero, uma fotografia de produto, um bloco de texto ou um vídeo — e mede o intervalo entre o início do carregamento da página e o momento em que esse elemento é totalmente exibido. Os limites oficiais do Google são: bom (verde) se inferior a 2,5 segundos, a melhorar (laranja) entre 2,5 e 4 segundos, mau (vermelho) acima dos 4 segundos. Exemplo concreto: numa página de produto de e-commerce, se a imagem principal do produto demora 3,8 segundos a ser exibida porque está alojada num CDN lento e pesa 2 MB, o LCP será laranja, penalizando simultaneamente a experiência do utilizador e o SEO. As principais causas de um mau LCP são imagens demasiado pesadas ou não pré-carregadas, recursos CSS e JavaScript que bloqueiam a renderização, um Time to First Byte (TTFB) elevado ligado ao servidor, e ausência de cache eficaz.

O LCP é a métrica Core Web Vitals mais importante para a experiência percebida, pois corresponde ao momento em que o utilizador considera que a página está 'carregada'. Um LCP superior a 4 segundos provoca taxas de abandono significativamente mais elevadas: o Google estima que uma melhoria de um segundo no LCP pode aumentar as conversões em 8 % em mobile. O LCP é também um dos três sinais oficiais do ranking do Google desde 2021.

Para melhorar o LCP: pré-carregue a imagem hero com a tag `<link rel="preload">` e utilize o atributo `fetchpriority="high"`. Comprima as suas imagens e converta-as em WebP ou AVIF. Configure um CDN para reduzir a latência da rede. Otimize o seu TTFB ativando o cache do lado do servidor. Evite scripts bloqueantes antes do conteúdo principal carregando-os de forma assíncrona. Audite regularmente as suas pontuações de LCP através do PageSpeed Insights com dados de campo reais.