¿Qué es el Largest Contentful Paint (LCP) y cómo optimizarlo?

En publicaciones anteriores del blog de SiteW hemos enfatizado en la importancia de la experiencia del usuario (UX) y de factores como la velocidad de carga y el diseño responsivo como básicos para el diseño de tu sitio web.

Uno de los factores que más influye en la experiencia de usuario es el tiempo en que tarda en cargar el primer contenido renderizado de la página. A esto se le denomina First Contentful Paint (FCP) o primer despliegue del contenido, un factor que mide el tiempo en renderizarse el contenido inicial. 

Por su parte, el despliegue del contenido más extenso, Largest Contentful Paint o LCP es otra métrica que se enfoca solo en el elemento más grande de la ventana de visualización.

Hoy en el blog de SiteW te contaremos todo lo que debes saber sobre Largest Contentful Paint que es, cómo se mide y su impacto en el SEO de tu página web.

Largest Contentful Paint: qué es

LPC es una métrica de Google Core Web Vitals que mide el tiempo en que se hace visible el elemento de contenido más grande en la pantalla, es decir, el que está en la parte superior de la página web y que se ve sin la necesidad de desplazarse. 

Ya que LPC es una métrica de Google, únicamente considera el tiempo de carga que es relevante para la experiencia del usuario. Es decir: las imágenes, tags de imágenes, miniaturas de videos, imágenes de fondo, párrafos, listas, encabezados y otros elementos de texto que permiten al usuario interactuar con el sitio web.

¿Cómo se mide el LCP?

Básicamente, existen dos formas de medir el LCP: mediante un método de campo directamente en el sitio web, o bien, con simulaciones de rendimiento realizadas por algoritmos, es decir, con herramientas de laboratorio. En ambos casos se usan herramientas para tener una medición precisa y a continuación te contamos a detalle.

Medición de campo de LCP 

Los datos de campo se obtienen de los usuarios que navegan en el sitio y la experiencia que tuvieron. Las herramientas para medir dichos datos son:

Chrome User Experience Report

También conocido como informe CrUX, es un conjunto de datos públicos obtenidos de datos reales de la experiencia de usuario recopilados en millones de sitios web. Mide el LCP y otras métricas de la Core Web Vitals como First Input Delay (FID), Cumulative Layout Shift (CLS), métricas de diagnóstico como el Time to First Byte (TTFB) y First Contentful Paint (FCP).

Este conjunto de datos contiene información cualitativa sobre la experiencia del usuario, los dispositivos de navegación y tipo de conexión para profundizar en la información recopilada.

PageSpeed Insights 

Esta herramienta de Google muestra el tiempo en que tardan en cargar los recursos de una página web así como los elementos que pueden retrasar la carga completa. Además, brinda un informe detallado sobre los fallos detectados para corregirlos y optimizar la página.

Google Search Console 

Search Console es otra herramienta de Google que proporciona un informe de UX con los datos de las Core Web Vitals. Este informe no brinda datos de una URL en concreto, sino del rendimiento general del sitio web y posibles problemas en varias páginas.

Medición de laboratorio de LCP

Los datos de laboratorio se recopilan con herramientas que recogen la información de un entorno simulado. Dichas herramientas son:

Chrome DevTools

Este conjunto de herramientas para desarrolladores también es de Google y se encuentra integrado en el navegador Google Chrome. Su función es inspeccionar el código HTML, el renderizado, la actividad de red de las páginas, el JavaScript, elementos de descarga y sus tiempos, el rendimiento de la carga, entre otros elementos.

Lighthouse

Esta herramienta es una extensión de Google Chrome que mide la calidad de una página web en términos de rendimiento, carga de primeras imágenes y contenidos, accesibilidad, entre otros.

WebPageTest

Esta herramienta mide el tiempo que una página web tarda en cargar, desde la primera petición hasta que el navegador muestra todo el contenido. Es decir, mide el tiempo que un usuario debe esperar hasta poder usar la página.

¿Cuáles son los valores buenos de LCP?

En general, los valores buenos de LCP se miden en un tiempo de carga de 2,5 segundos, mientras que una valoración mala es de más de 4 segundos.

Cómo optimizar LCP

En general, las causas más comunes de una valoración deficiente de LCP son tiempos de respuesta lentos por parte del servidor, errores en el JavaScript y el uso incorrecto de archivos de imagen. Por ello, para optimizar el LCP se recomienda:

✅ Optimizar el tiempo de respuesta del servidor, por ejemplo, al enrutar a los usuarios a una CDN cercana.

✅ Usar imágenes comprimidas y en un tamaño adecuado para evitar que pesen demasiado al descargarlas.

✅ Utilizar un servicio de CDN para que las imágenes se carguen más rápido.

✅ Evitar el uso de JavaScript para la carga de imágenes.

✅ Elegir un buen servicio de hospedaje.

Elige el modo sencillo y diseña tu sitio web con SiteW 🤩

Esperamos que esta información te sea de utilidad.

Si quieres evitar todo el problema que conlleva el análisis y optimización de estos factores, entonces diseña tu página web con SiteW. 

Tú solo tienes que registrarte, elegir tu suscripción y diseñar tu página web a tu gusto. Nosotros nos encargamos de la parte técnica, la optimización SEO, el diseño responsivo y todos esos factores que influyen en la experiencia del usuario. 🥳