Métrica Largest Contentful Paint (LCP): guía para una carga más rápida de la web

El mundo de la métrica Largest Contentful Paint (LCP) podría compararse con el emocionante ambiente de las carreras de autos: es una batalla interminable contra el tiempo. Vamos a recorrer todas las curvas y trampas de nuestra pista de carreras para estar lo mejor preparados posible. ¿Qué vamos a aprender?

• ¿Qué es la métrica LCP?
• ¿Cuáles son sus valores recomendados?
• ¿Por qué es importante?
• ¿Cómo se calcula la métrica LCP?
• ¿Cómo y dónde recomendamos medirla?
• ¿Cuáles son los errores comunes y las posibilidades de optimización?

Conozca la métrica LCP#

La métrica LCP mide el tiempo que tarda en mostrarse el elemento más grande en la página. Esto ayuda a los usuarios a evaluar la utilidad de la página.

Esta métrica forma parte de los Core Web Vitals, utilizados para medir la velocidad de carga de las páginas web. Las métricas Core Web Vitals son también una de las señales consideradas por Google al clasificar los resultados de búsqueda.

Mantenga el LCP por debajo de 2,5 segundos#

Si desea que el Largest Contentful Paint esté en la zona verde de conformidad, el valor debe ser inferior a 2,5 segundos. Un LCP entre 2,5 y 4 segundos se encuentra en la zona naranja y requiere ajustes. Un tiempo de LCP superior a 4 segundos es considerado insatisfactorio por Google.

	Buena	Necesita mejora	Mala
LCP	≤ 2,5 s	2,5 - 4 s	> 4 s

La métrica Largest Contentful Paint (LCP) es importante por varias razones clave que tienen un impacto fundamental en la experiencia del usuario y el éxito de las páginas web.

Entre ellas se encuentran la reducción de la tasa de rebote, la influencia en las conversiones de las tiendas en línea, la credibilidad de la marca o la posición en los resultados de búsqueda.

La métrica LCP en los sitios web de nuestros clientes a menudo correlaciona con la tasa de conversión. Esto lo realizamos dentro del marco de la análisis de conversiones.

¿Qué es el elemento LCP?#

En términos simples, es el elemento visual más grande en la página que se muestra durante el proceso de carga en el viewport principal del usuario. El elemento LCP es aquel que el navegador monitorea y mide el tiempo que toma para su visualización.

Podemos identificar el elemento LCP usando algunas de las herramientas de desarrollo: Lighthouse, la pestaña Performance en DevTools o la extensión Web Vitals para Chrome. Puede leer más en detalle sobre cómo encontrar y probar (no solo) LCP en mi artículo Habilidad clave del desarrollador: probar Web Vitals en el navegador.

Los siguientes elementos pueden evaluarse como elementos LCP:

• Elementos <img>
• Elemento <image> dentro de un elemento <svg>
• Elemento <video> con una imagen "poster"
• Imagen de fondo mediante la propiedad background-image (se ignoran los gradientes de CSS)
• Elementos de nivel de bloque que contienen texto o descendientes de nivel en línea.

Por el contrario, los siguientes elementos no pueden ser elementos LCP:

• Elementos con la propiedad opacity: 0 y otros que son invisibles para el usuario.
• Elementos que llenan todo el viewport. Estos se consideran más ilustrativos que de contenido.
• Imágenes de marcador de posición con bajo contenido informativo. Esto evita los hacks de LCP, donde los desarrolladores colocaban una gran imagen sin información en la página. Si tiene dudas sobre el contenido informativo de sus imágenes, puede probarlas en la calculadora Image BPP (bits por píxel).

Lo esencial es identificar el "elemento LCP". Solo cuidado, en diferentes resoluciones puede ser un elemento diferente.

Vea cómo encontrar el elemento LCP.

¿Cómo se evalúa el elemento LCP?#

Para una correcta evaluación y optimización, es necesario comprender cómo se calcula la métrica LCP. En el elemento LCP generalmente se evalúa su tamaño visible en la pantalla del usuario. No se consideran las partes recortadas, partes ocultas utilizando overflow:hidden, ni las propiedades padding, margin, border y otras. Si desea profundizar más en la evaluación de LCP, hay un buen artículo sobre este tema en web.dev.

Medimos LCP en nuestro propio sitio web#

Una fuente confiable de datos sobre las métricas Core Web Vitals son los conjuntos de datos del Informe de experiencia de usuario de Chrome (CrUX). Puede trabajar con estos datos tanto para todo el dominio como para URLs individuales. La distribución detallada de los valores de LCP a nivel de origen para los usuarios se muestra en un histograma.

Trabajar con datos CrUX crudos es bastante exigente en cuanto a habilidades técnicas. Afortunadamente, ya tenemos herramientas que procesan estos datos y los muestran automáticamente en gráficos. Estas son PageSpeed.ONE o Pagespeed Insights.

Los datos básicos sobre el estado de la métrica LCP los proporcionan nuestra prueba de velocidad web o PageSpeed Insights. Si desea tener una visión general del desarrollo con el tiempo, pruebe nuestra prueba de velocidad web.

Si la limitación a los usuarios del navegador Chrome es demasiado restrictiva para usted, siempre puede recurrir a la medición propia utilizando RUM (monitoreo real de usuarios), o escribir su propia recolección de datos utilizando JavaScript y la API Performance Observer.

Google Search Console es una de las fuentes que nos proporciona información importante sobre las prioridades en la optimización de LCP.

Otra opción son las mediciones sintéticas, que puede obtener mediante herramientas como SpeedCurve, Google Lighthouse, WebPageTest y similares.

Escribimos sobre las diferencias entre las mediciones en una página separada: synth vs. CrUX vs. RUM.

Errores y posibilidades de optimización de LCP#

La métrica LCP es bastante compleja. Es necesario darse cuenta de que puede verse afectada por una multitud de factores. En primer lugar, se trata de recursos críticos para el primer renderizado:

• Velocidad del tiempo de backend (métrica TTFB).
• Tamaño y complejidad del HTML.
• Tamaño del CSS y otros recursos críticos.

La optimización del tiempo de backend (TTFB) a menudo ayuda a mejorar la métrica LCP.

Sin embargo, en LCP también se incluyen recursos asincrónicos, como imágenes o fuentes web que pueden formar el elemento LCP. Por lo tanto, LCP puede verse afectado por lo siguiente:

• Formato, tamaño físico y de datos de la propia imagen.
• Tamaño de los archivos de fuentes, etc.
• Presencia de una imagen en el atributo poster de la etiqueta <video>.

En general, mantenga todos los tiempos y tamaños lo más bajos posible. ¿Nuestro consejo secreto? Utilice carga diferida de imágenes y hágalo bien.

Aquí encontrará más consejos para la optimización de imágenes en la web.

Aquí la carga diferida ayudaría. Las imágenes cargadas de manera diferida (todas excepto la primera) ayudarían a priorizar la primera imagen, que tiene un impacto en LCP.

Sin embargo, también puede mejorar LCP con ajustes más complejos, que describimos a continuación:

La carga diferida puede perjudicar a LCP#

La regla es que las imágenes sin carga diferida se descargan primero en el navegador. Las imágenes con carga diferida lo hacen más tarde, incluso si están en la parte visible del viewport. Si tiene carga diferida en una imagen que también es un elemento LCP, se descargará mucho más tarde, lo que aumenta el tiempo de LCP. Por lo tanto, elimine la carga diferida de los elementos LCP en su sitio web y agregue carga diferida a todos los demás elementos:

<img src="image-non-lcp.webp" loading="lazy" alt="Image" />

La prioridad de fetch impulsa la descarga de archivos#

Una estructura HTML complicada o demasiados archivos descargados pueden hacer que nuestro elemento LCP se descargue demasiado tarde. Sin embargo, con el atributo fetchpriority, podemos aumentar la prioridad de un archivo descargado seleccionado. Esto mejorará la métrica LCP. Sin embargo, es necesario manejar esta técnica con cuidado y probar el impacto de manera exhaustiva.

<img src="image.webp" fetchpriority="high" alt="" />

Precargue los recursos de fuentes web de los elementos LCP#

Si descubre que un elemento de texto se evalúa como el elemento LCP en la página, debe asegurarse de que los archivos de fuentes web se descarguen y muestren lo más rápido posible. Para lograr este objetivo, puede utilizar técnicas de precarga (preload). Una pequeña advertencia: use la precarga con moderación, por lo tanto, precargue solo el único estilo de fuente que afecta al LCP:

<link rel="preload" href="font-1.woff2" as="font" type="font/woff2" crossorigin />

Consulte nuestro texto sobre la optimización de LCP.

Lo que debe recordar sobre LCP#

• Largest Contentful Paint (LCP) es una métrica que mide el tiempo en que se muestra el elemento visual más grande en la página.
• Los valores recomendados para LCP son hasta 2,5 segundos, de 2,5 a 4 segundos requieren ajustes, y más de 4 segundos es insatisfactorio.
• LCP es una parte clave de los Core Web Vitals, que afecta la experiencia del usuario y con frecuencia también la tasa de rebote de la web, las conversiones de las tiendas en línea o su posición en los buscadores.
• Al optimizar LCP, concéntrese en mejorar la velocidad de carga de los recursos críticos, el uso correcto de la carga diferida o el uso del atributo fetchpriority para aumentar la prioridad de descarga de archivos.

La métrica LCP es parte de nuestra métrica de velocidad unificada, el puntaje PageSpeed.ONE (SPS).

Tenemos años de experiencia en la optimización de LCP#

Nuestra colaboración a largo plazo con el proyecto Footshop.cz comenzó con las optimizaciones de LCP. Aquí, entre otras cosas, ajustamos la transición del renderizado del lado del cliente almacenado en caché mediante Service Worker al renderizado del lado del servidor. El resultado es una velocidad de LCP 2,5 veces mejor en móviles.

Ilustración de la imagen principal: Unsplash.