Largest Contentful Paint (LCP)

¿Qué es el LCP?

El Largest Contentful Paint es una de las métricas esenciales del Core Web Vitals. El LCP mide el tiempo necesario para que se muestre la porción más grande del contenido visible en pantalla.

Es importante distinguir el LCP del FCP (First Contentful Paint), que como lo describe el W3C, corresponde al "momento en que el navegador comienza a renderizar el primer elemento de contenido del DOM (Document Object Model), que puede ser texto, una imagen, un SVG o un elemento de tipo canvas".

¿Qué es un buen LCP?

Un LCP por debajo de 2.5 segundos proporciona una excelente experiencia, lo que significa que la experiencia del usuario puede deteriorarse si el tiempo de carga de la porción más grande de contenido visible en pantalla supera los 2.5 segundos.

¿Con qué elementos se calcula el LCP?

Los elementos considerados para el cálculo del LCP son:

• elementos <img>
• elementos <video> (se utiliza la imagen del póster)
• elementos <image> situados dentro de un elemento <svg>
• elementos con una imagen de fondo cargada mediante la función url()
• elementos de tipo "block" que contienen texto

¿Cómo optimizar el LCP?

Mejora el tiempo de respuesta del servidor:

• optimizando tu servidor
• utilizando un CDN
• cacheando tus recursos
• sirviendo primero las páginas HTML en caché
• estableciendo preconexiones con terceros

Optimiza el análisis del marcado HTML por el servidor para hacerlo más eficiente:

• reduciendo el tiempo de bloqueo de CSS
• minificando el CSS
• diferenciando los CSS no críticos
• insertando los CSS críticos
• reduciendo el tiempo de bloqueo del JavaScript

Otros recursos pueden afectar la velocidad de carga. Es posible mejorar este proceso:

• optimizando y comprimiendo las imágenes
• precargando los recursos importantes
• comprimiendo archivos de texto
• cacheando recursos

El uso de JavaScript del lado del cliente puede afectar negativamente el LCP. Se puede optimizar este proceso:

• reduciendo el JavaScript crítico
• utilizando el renderizado del lado del servidor (Server-Side Rendering)
• utilizando el prerenderizado