La métrica Largest Contentful Paint (LPC) mide la velocidad de carga de cada una de las páginas de tu sitio web, registrando el momento en el que se carga el contenido principal, que como principal, se trata del contenido más grande dentro de la página.

Largest Contentful Paint (LCP), al igual que Cumulative Layout Shift (CLS), es otra métrica de Google englobada en los Core Web Vitals, que se centra en la experiencia de usuario en cada uno de los sitios web que posiciona el Buscador de Google.

¿Qué es una buena puntuación de LCP?

Para proporcionar una buena experiencia de usuario, los sitios web deben esforzarse por tener una puntuación LCP de 2,5 segundos o menos. Cuanto más baja sea tu puntuación, más rápido será tu sitio web.

Las puntuaciones oficiales de LCP utilizadas por las herramientas de rendimiento de Google son las siguientes:

  • Bueno - LCP por debajo de 2,5 segundos.
  • Mejorable - LCP entre 2,5 y 4,0 segundos.
  • Necesita mejorar - LCP por encima de 4,0 segundos.

¿Qué elementos analiza la métrica LCP?

No todos los elementos de tu sitio web están incluidos en la métrica LCP. Según la API de LCP, los elementos que se pueden considerar como parte de la métrica son:

  • Elementos de imagen, <img>
  • Elementos de imagen dentro de un elemento, <image> y <svg>
  • Elementos de video, <video>
  • Elementos con una imagen de fondo, con CSS
  • Elementos en bloque que contienen texto u otros elementos en línea de texto.

¿Cómo se analiza el Largest Contentful Paint (LCP)?

Debido a que los sitios web a menudo tiene configurado el lazy-loading para cargar por etapas la página según navega el usuario, el elemento más grande de la página podría cambiar a medida que se procesa el resto de los elementos. Como resultado de este cambio potencial, el navegador crea una entrada de rendimiento de LCP para identificar el elemento de mayor contenido tan pronto como el navegador carga el primer fotograma. Sin embargo, mientras se sigue cargando la página, el navegador registrará los nuevos elementos adicionales cada vez que aparezcan, y cambiará el LCP con el nuevo elemento con mayor proporción que el inicial si fuera el caso.

En el siguiente ejemplo se muestra un cambio de contenido y el registro del nuevo contenido con más proporción:

Conclusión

La métrica LCP evalúa el tiempo de carga de tu sitio web y se informa antes de que el usuario interactúe con la página. Una vez que el usuario toca, hace clic o se desplaza en la página, el navegador dejará de crear entradas de rendimiento porque las interacciones del usuario a menudo cambiarán lo que se muestra en la página.


Photo by Nicolas Hoizey on Unsplash

Referencias:
· Largest Contentful Paint (LCP)