Largest Contentful Paint (LCP)

¿Qué es el Largest Contentful Paint (LCP)?

El Largest Contentful Paint es una medición del tiempo de renderizado del elemento de contenido más grande (de tipo imagen, video o texto) que ha sido pintado en la parte visible de la pantalla. El tiempo de LCP indica el tiempo en milisegundos entre la solicitud de la página y cuando ese elemento de contenido más grande se muestra en la parte visible de la página web (above the fold).

Historia del Largest Contentful Paint

Si lo piensas, el LCP podría parecer una métrica trivial para representar la parte de carga de los Core Web Vitals. ¿Por qué no medir la velocidad de carga como 'el tiempo que tarda la página en cargar'?

Esto se debe a que es difícil (o incluso imposible) en la mayoría de los sitios web modernos definir cuándo la página ha cargado. Cada vez más sitios web utilizan técnicas como lazy loading o carga progresiva donde la página básicamente puede seguir cargando indefinidamente. Eso significa que la velocidad de la página no puede medirse por un solo punto en el tiempo.

Hay varios momentos durante la carga de la página que pueden hacer que un usuario perciba la página como rápida o lenta. Por ejemplo, el retraso del servidor (Time to First Byte), la primera vez que el contenido es visible (First Contentful Paint), el momento en que el viewport visible puede parecer completo (Largest Contentful Paint) y cuando la página se vuelve interactiva (cuando hacer clic en un enlace se vuelve posible) son todos puntos durante el proceso de carga donde el sitio puede parecer lento o rápido.

El Largest Contentful Paint (LCP) fue elegido porque se centra en la user experience del visitante. Cuando ocurre el LCP se puede asumir que un visitante piensa que la página ha terminado de cargar (incluso si los procesos detrás de escena aún están ejecutándose). El LCP fue creado para responder a la pregunta: '¿Cuándo es visible el contenido de una página?'. Por eso el LCP es reconocido como un indicador central del rendimiento centrado en el usuario.

Por qué el LCP es importante para tu negocio

El Largest Contentful Paint es uno de los 3 Core Web Vitals. Como Core Web Vital, el Largest Contentful Paint es importante para SEO, pero más importante aún, el LCP es crítico para UX. Los visitantes no les gusta esperar, y con cada vez más tráfico móvil (que tiende a ser más lento que el tráfico de escritorio) optimizar el Largest Contentful Paint tiene mucho sentido.

• Para SEO. Sí, Google se enfoca en servir las mejores páginas en sus resultados de búsqueda. El LCP es parte de los Core Web Vitals de Google. Google indica claramente que la velocidad del sitio es un factor en los resultados de búsqueda.
• Para los visitantes: Según investigaciones recientes de Google, la probabilidad de que un usuario abandone el sitio se duplica con un tiempo de carga de 3 segundos. Probablemente lo reconoces por ti mismo. Al navegar por internet, casi nada parece tan molesto como un sitio web que carga lentamente. Lo más probable es que abandones rápidamente una página que carga lento.
• Otras razones: La velocidad de la página es un factor en tu puntuación de Google Ads. Esto significa que puedes comprar tus anuncios más baratos y, finalmente, pasar los Core Web Vitals es uno de los prerrequisitos para el cuadro de historias destacadas de Google.

Un LCP rápido le da al visitante la idea de que la página carga rápidamente. Como resultado, es menos probable que un visitante abandone la página.

¿Qué elementos se consideran elementos LCP?

No todos los elementos se consideran como un elemento LCP. El elemento de contenido más grande debe pintarse en la parte visible de la pantalla (el viewport) antes de que el usuario haya interactuado con la página.

El elemento debe ser:

• Un elemento <img>.
• Un elemento <image> anidado dentro de un elemento <svg>.
• Un elemento <video> (se utiliza la imagen del poster o el primer fotograma del video, lo que ocurra primero).
• Un elemento con una imagen de fondo cargada mediante la función CSS url(). (Nota: Este es un antipatrón para la optimización del LCP ya que hace que la imagen no sea descubrible por el escáner de precarga del navegador).

• Un elemento a nivel de bloque que contiene nodos de texto u otros elementos de texto en línea (en el caso de elementos de texto en línea como <span>, se considera el elemento a nivel de bloque más cercano <div> o <p> ).

Actualmente, ciertos elementos están excluidos como candidatos de LCP, como elementos ocultos con opacity: 0, imágenes que coinciden con el 100% del tamaño del viewport (imágenes de portada) y marcadores de posición (imágenes de baja entropía). ¡Ten en cuenta que esto puede cambiar a medida que la especificación evolucione!

Entrando en lo técnico: midiendo el tamaño del elemento LCP

El LCP identifica el elemento de contenido visible más grande en el viewport y calcula su tamaño basándose en un conjunto de reglas precisas. Estas reglas garantizan consistencia y precisión, incluso en diseños complejos:

• Solo el viewport - Solo se considera la parte visible de la página. Si un elemento está solo parcialmente en el viewport visible, el tamaño considerado se recortará.
• Sin borde, padding ni margen. Para todos los elementos, los bordes de texto e imagen, el padding y los márgenes se ignoran completamente.
• Tamaño de texto - el tamaño de los elementos de texto se reporta como el rectángulo más pequeño que se puede pintar alrededor de los nodos de texto.
• Tamaño de imagen - para las imágenes se utiliza el menor entre las dimensiones intrínsecas (el ancho y alto originales) y el tamaño de visualización (el tamaño en pantalla) para calcular el tamaño del elemento LCP
• El primer tamaño cuenta - cuando el diseño cambia o cuando el tamaño de un elemento cambia, solo se considera el primer tamaño para el LCP
• Los elementos eliminados se incluyen - cuando un elemento se elimina del DOM, sigue siendo un candidato de LCP

Naturaleza dinámica del LCP

El Largest Contentful Paint (LCP) es una métrica dinámica. Aunque el renderizado puede ser complejo y ocurrir en etapas, es normal que el elemento LCP cambie durante la carga de la página. Antes de la primera interacción del usuario, el observador de rendimiento del navegador identifica todos los elementos que podrían considerarse candidatos de LCP. Si se renderiza un nuevo elemento que es visible dentro del viewport y más grande que el elemento LCP identificado previamente, se convierte en el nuevo LCP.

Conclusiones de los datos de campo del LCP: En CoreDash rastreamos millones de entradas de LCP por día. Resulta que, para las visitas móviles, el elemento LCP suele ser un elemento basado en texto, ya sea un párrafo o un encabezado. En promedio (o en el percentil 75 para ser precisos) los Core Web Vitals se aprueban cuando el elemento LCP es un nodo de texto o incluso una imagen normal. Cuando el elemento LCP es una imagen de fondo, video o una imagen con lazy loading, los Core Web Vitals tienden a fallar.

¿Cuál es un buen puntaje de LCP?

Para aprobar los Core Web Vitals del Largest Contentful Paint, al menos el 75% de tus visitantes necesitan tener un puntaje de LCP 'bueno'. Un puntaje de LCP entre 0 y 2.5 segundos se considera un puntaje de LCP bueno, un puntaje de LCP entre 2.5 y 4 segundos necesita mejora y un puntaje de LCP superior a 4 segundos se considera deficiente.

Cómo se mide el LCP: Las cuatro fases clave

Según Google, el Largest Contentful Paint se puede dividir en 4 subpartes.

El tiempo final de LCP de una página no es un valor único y monolítico. Es la suma de cuatro subpartes distintas. Comprender este desglose es la clave para diagnosticar y solucionar problemas de LCP de manera eficiente.

Aquí tienes un desglose de las cuatro fases:

• Time to first byte (TTFB) - Este es el tiempo de respuesta puro del servidor. Es el tiempo que tarda el navegador en recibir el primer byte de datos de tu servidor. Un TTFB lento es un problema fundamental que siempre arruinará tu LCP.
• Retraso en la carga del recurso - Esta es la "brecha de descubrimiento". Es el tiempo entre el TTFB y cuando el navegador comienza a descargar el recurso LCP. Un retraso largo aquí significa que el navegador encontró el recurso LCP tarde, un síntoma clásico de usar imágenes de fondo CSS o renderizado del lado del cliente.
• Tiempo de carga del recurso - Este es el tiempo que tarda en descargar realmente el archivo del recurso LCP (por ejemplo, la imagen o fuente). Esto tiene que ver con el tamaño del archivo y las condiciones de la red.
• Retraso en el renderizado del elemento - Este es el retraso final. Es el tiempo entre cuando el recurso LCP termina de descargarse y cuando el elemento se renderiza completamente. Este retraso casi siempre es causado por el hilo principal del navegador estando bloqueado por otras tareas, especialmente el procesamiento de JavaScript.

Cada una de estas áreas de enfoque se puede optimizar para mejorar el Largest Contentful Paint. Para entender los pasos que debes seguir, lee Identificar y solucionar problemas del Largest Contentful Paint (LCP).

¿Cómo medir el Largest Contentful Paint?

El Largest Contentful Paint (LCP) se puede medir con JavaScript puro, datos de laboratorio y herramientas de campo. Ambos tienen sus ventajas y desventajas.

Medir el Largest Contentful Paint con JavaScript

Para medir el Largest Contentful Paint (LCP) usando JavaScript, la API de Performance Observer ofrece una solución rápida. El siguiente fragmento de código demuestra cómo capturar el tiempo y la información del elemento LCP:

new PerformanceObserver((list) => {
    const lcpEntry = list.getEntries().at(-1);
    console.log('LCP value: ', lcpEntry.startTime);
    console.log('LCP element: ', lcpEntry.element, lcpEntry.url);
  }).observe({ type: 'largest-contentful-paint', buffered: true });

Este fragmento rastrea la entrada de LCP a medida que se reporta, mostrando su marca de tiempo y detalles del elemento en la consola. Este fragmento rastrea la entrada de LCP a medida que se reporta. Para obtener información más detallada, considera usar la biblioteca Web Vitals.

Medir el Largest Contentful Paint (LCP) en Chrome DevTools

1. Abre Chrome DevTools presionando Ctrl+Shift+I (o Cmd+Option+I en Mac).
2. Navega a la pestaña Performance.
3. Recarga la página para ver los Core Web Vitals.

La pestaña de rendimiento de las herramientas de desarrollo ahora muestra información sobre los Core Web Vitals, incluyendo el tiempo y el elemento del Largest Contentful Paint.

Medir el Largest Contentful Paint con herramientas de laboratorio y campo

Aclaremos: los datos de laboratorio y campo sirven para dos propósitos diferentes. Necesitas ambos.

• Datos de campo (RUM y CrUX) son los únicos datos que realmente importan para aprobar los Core Web Vitals. Es lo que tus usuarios reales experimentan. Google usa estos datos de su conjunto de datos CrUX. Comienza aquí para descubrir si tienes un problema.
• Datos de laboratorio (Lighthouse, etc.) son una prueba controlada. No es lo que Google usa para el ranking, pero es esencial para la depuración. Usa esto para descubrir por qué tienes un problema.

Aquí tienes una guía rápida de las herramientas esenciales:

Mejorar el Largest Contentful Paint

Optimizar el LCP requiere un enfoque sistemático que aborde las cuatro fases. Cualquier cosa que ocurra antes de que el elemento LCP se pinte, ya sea relacionada con la red o intensiva en CPU, puede impactar el puntaje de LCP. No persigas solo una corrección; entiende toda la cadena. Esta es la estrategia de alto nivel:

• Optimiza el TTFB: Tu servidor necesita ser rápido. Si tu TTFB es lento, nada más importa. Esto implica caché del lado del servidor, usar un CDN y código backend eficiente. Lee más en nuestra guía para optimizar el TTFB.
• Elimina el retraso en la carga del recurso: Asegúrate de que el elemento LCP esté en el HTML inicial para que el escáner de precarga del navegador pueda encontrarlo instantáneamente. Evita las imágenes de fondo CSS para el LCP. Precarga las imágenes críticas que se descubren tarde. Aprende cómo en nuestra guía para corregir el retraso en la carga del recurso.
• Reduce el tiempo de carga del recurso: Haz que el archivo LCP sea más pequeño. Esto significa usar formatos de imagen modernos como AVIF, imágenes responsivas y compresión adecuada. Consulta nuestra guía completa sobre cómo optimizar la imagen LCP.
• Acorta el retraso en el renderizado del elemento: Deja de bloquear el hilo principal. Difiere el JavaScript no crítico, divide las tareas largas y minimiza el CSS que bloquea el renderizado. Esto se cubre en nuestra guía para solucionar problemas de LCP.