Largest Contentful Paint, explicado

El Largest Contentful Paint (LCP) es la cantidad de tiempo que le toma a una página mostrar el bloque de contenido más grande visible en la ventana gráfica. Mide cuánto tiempo deben esperar los usuarios para ver el contenido más importante de la página.

LCP es una métrica de la experiencia del usuario que responde a la pregunta "¿cuánto tiempo hasta que una página muestra a los usuarios eso por lo qué están aquí?"

Al medir y rastrear el LCP, el reloj comienza tan pronto como el navegador del usuario solicita la URL de su servidor.

Es importante tener en cuenta que **el LCP es fundamentalmente diferente del concepto de tiempo de carga de la página.

Pero a una persona real no le importa cuándo el servidor de un sitio web comienza a enviar el primer dato. Les importa cuánto tiempo tendrán que esperar hasta que puedan comenzar a consumir el contenido de la página.

¿Cuál es un buen puntaje de LCP?

Según Google, para brindar la mejor experiencia de usuario tu sitio debe tener un LCP de 2.5 segundos o menos.

‍Al igual que las otras métricas de Core Web Vitals, LCP se califica en un espectro de "bueno" a "deficiente":

• Bueno: Cualquier LCP de 2,5 segundos o menos se considera bueno.
• Necesita mejorar: Las puntuaciones entre 2,5 segundos y 4,0 segundos necesitan mejorar.
• Deficiente: Un LCP de más de 4.0 segundos es deficiente y, como resultado, tus usuarios tienen una mala experiencia cuando visitan tu sitio web.

Cómo funciona LCP

En términos muy simples, la puntuación LCP funciona registrando cuánto tiempo tardan los elementos de la página en cargarse y procesarse una vez que el usuario (o la herramienta, si se trata de una prueba de laboratorio) solicita la página desde su navegador. Google analiza los tamaños de los diversos elementos de contenido que se mostrarán dentro de la ventana gráfica del dispositivo del usuario, determina cuál es el más grande y comienza a contar cuánto tiempo hasta que se procesa ese elemento.

Actualmente, Google rastrea los siguientes elementos al calcular First Contentful Paint:

• Elementos <img> o <image>: Como probablemente adivinaste, estas son etiquetas para imágenes. Esto incluye una etiqueta <img> que aparece en un <svg>.
• Elementos <video>: Para videos, LCP mira lo que se conoce como la "imagen póster". Esta es la imagen especificada usando el atributo controls poster=”” dentro de la etiqueta <video>.
• Imágenes de fondo: Elementos que utilizan la función CSS url() para cargar una imagen como fondo. Las imágenes cargadas con una función de gradientes con CSS no se rastrearán para propósitos de LCP.
• Elementos de texto: Para medir el contenido de texto, LCP busca elementos en bloque que especifican texto , como párrafos, encabezados y listas.

Al medir el tamaño del LCP, Google solo observa lo que el usuario puede ver en la ventana gráfica. Entonces, si, por ejemplo, parte de una imagen se extiende fuera de la ventana gráfica o un bloque de texto usa la propiedad CSS de overflow (excedente) para ocultar texto, las partes de esos elementos que no son visibles para el usuario no se miden para LCP.

En otras palabras, si la imagen A tiene 100 x 100 píxeles, pero el 75% de esa imagen está fuera de la pantalla, mientras que la imagen B de 50 x 50 es completamente visible para el usuario, la imagen B se mediría para LCP aunque sea una imagen más pequeña.

También debes recordar que cualquier relleno o margen alrededor de los elementos no cuenta al determinar el tamaño para LCP.

Cambios de diseño y LCP

Muchos sitios web se cargan por etapas, lo que provoca cambios en el diseño y la aparición de nuevos elementos en las pantallas de los usuarios. En estos casos, suceden algunas cosas en el cálculo de LCP.

• El navegador identifica y registra el elemento más grande en la pantalla después de que se ha renderizado el primer fotograma. Con una publicación de blog, por ejemplo, es probable que este sea el texto del encabezado con el título del artículo.
• Cuando se ha renderizado el segundo fotograma y aparece un nuevo elemento, el navegador crea un segundo registro identificando el nuevo elemento más grande (si lo hay). Así es como el navegador manejaría la carga de una imagen de encabezado en el segundo marco para una publicación de blog.
• A medida que se cargan y renderizan nuevos elementos, el navegador registrará todos los que aparezcan en la ventana gráfica que sean más grandes que el elemento más grande anterior. Estos elementos más grandes se convertirán en el elemento que se rastrea como LCP.
• A medida que el diseño cambia y los elementos se eliminan de la ventana gráfica, eso no cambia lo que se registra como el elemento más grande. Entonces, si la publicación del blog carga un gran bloque de texto que es empujado fuera de la página por elementos más pequeños, como un bloque de tabla de contenido, ese texto inicial sigue siendo el contenido más grande a pesar de que ahora está fuera de la ventana gráfica.
• El navegador deja de rastrear LCP una vez que el usuario interactúa con la página, ya que la interacción del usuario a menudo cambia lo que está visible en la ventana gráfica (al desplazarse hacia abajo en la página, por ejemplo).

En el siguiente ejemplo, vemos los primeros fotogramas de una página que representan varios elementos:

Entonces, a medida que se carga esta página, presenta algunos elementos de texto de varios tamaños y luego algunas imágenes.

Entonces, así es como funcionaría LCP para esta página:

• En el primer fotograma, el texto pequeño es el primer elemento cargado y renderizado (esto es lo que se conoce como First Contentful Paint).
• En el segundo marco, un elemento grande que contiene un texto de encabezado se carga junto con algunos elementos de texto más pequeños a continuación. Este elemento de texto con el encabezado se convierte en el elemento más grande de la página.
• Se cargan más elementos de texto. Sin embargo, todos son más pequeños que el elemento de encabezado, por lo que no se cuentan para LCP.
• Una imagen grande se carga en la parte inferior de la página, pero solo una pequeña parte es visible en la ventana gráfica. Dado que esta parte visible de la imagen es más pequeña que el elemento de texto del encabezado, esta imagen no cuenta para la pintura con contenido más grande de la página.
• Se representa una imagen en la página. Esta imagen es más grande que el bloque de texto del encabezado, por lo que se convierte en el elemento más grande de la página.

El tiempo que tarda la página en cargar la imagen grande, desde el momento en que el usuario solicita la URL del servidor del sitio, es la puntuación LCP. Entonces, si la imagen se carga después de 1 segundo, el LCP sería "bueno", mientras que si la imagen se renderiza en 3 segundos, el LCP sería "pobre".

Por qué es importante el Largest Contentful Paint

El Largest Contentful Paint es una forma medible y precisa de medir cuánto tiempo tarda una página en ser útil cuando se carga para los usuarios de la vida real. Esto lo convierte en un parámetro fundamental para evaluar y calificar la experiencia del usuario de un sitio web. Además, es una métrica fácil de rastrear y optimizar, lo que siempre ayuda.

Más allá de la experiencia del usuario, y a un nivel muy práctico, Largest Contentful Paint es importante porque Google usa puntajes LCP como parte de su métrica Core Web Vitals al clasificar sitios web en los resultados de búsqueda.

Tener un LCP deficiente para tu sitio no solo significa que tus usuarios están esperando más de lo debido para que se cargue el contenido. También podría tener un impacto negativo en el SEO, evitando que tu sitio aparezca en la parte superior de los resultados de búsqueda.