Pintura de mayor contenido (LCP)

El Largest Contentful Paint (LCP) es una métrica de Core Web Vitals que mide cuántos segundos tarda en cargarse por completo el elemento visible más grande de tu página. Puede ser una imagen, un vídeo, un bloque de texto o una imagen de fondo. Google considera que un LCP de 2,5 segundos o menos es bueno, entre 2,5 y 4 segundos es moderado, y por encima de 4 segundos es malo. Para una tienda online o un proveedor de servicios neerlandés, un LCP lento significa que los visitantes tienen que esperar más tiempo antes de ver la parte más importante de la página, lo que se traduce en mayores tasas de rebote y menores conversiones.

Cómo se mide el Largest Contentful Paint

Google mide el LCP desde el momento en que un visitante solicita la página hasta el momento en que el elemento más grande de la ventana de visualización queda completamente visible. Esto se mide en el navegador de usuarios reales a través del Informe de experiencia de usuario de Chrome. La métrica solo tiene en cuenta los elementos situados por encima de la línea de pliegue, es decir, lo que ve el visitante sin tener que desplazarse hacia abajo. Las imágenes tienen más peso que el texto, ya que suelen ocupar más espacio. Si añades contenido mediante JavaScript después de la carga, el elemento más grande puede cambiar. En ese caso, el navegador registra el último cambio como valor definitivo de LCP. Herramientas como Google PageSpeed Insights y Lighthouse muestran tanto los datos de laboratorio como los datos de campo de visitantes reales.

Por qué el Largest Contentful Paint es crucial desde 2020

Google introdujo el LCP en 2020 como parte de los Core Web Vitals, ya que métricas más antiguas, como DOMContentLoaded y First Contentful Paint, no reflejaban con suficiente precisión cuándo la página era realmente utilizable. Una página puede cargarse rápidamente desde el punto de vista técnico, pero aun así mostrar un espacio en blanco durante un tiempo antes de que aparezca la imagen principal. El LCP resuelve este problema centrándose en el elemento más grande que el visitante ve realmente. Desde la actualización de la experiencia de página, el LCP es un factor de posicionamiento oficial. En la práctica, observamos en nuestros clientes de pymes que una mejora del LCP de 3,5 a 2,2 segundos suele traducirse en una reducción de entre el 10 y el 15 % en la tasa de rebote, sobre todo en dispositivos móviles.

Qué aporta el Largest Contentful Paint a tu sitio web

Un buen LCP garantiza que los visitantes vean más rápidamente de qué trata tu página, lo que aumenta la confianza y el compromiso. Para las tiendas online, esto se traduce en una mayor probabilidad de que alguien haga clic para acceder a la página de un producto. Para los proveedores de servicios con un formulario de contacto o de solicitud de presupuesto, un LCP rápido se traduce en un mayor número de formularios rellenados. Además, Google tiene en cuenta el LCP en el posicionamiento web, por lo que una puntuación baja puede costarte visibilidad. Si quieres saber cómo rinde tu sitio web y cuáles son los puntos débiles, una auditoría técnica de posicionamiento web de Monkey Vision te ayudará a identificar las mejoras más importantes. A menudo observamos que optimizar las imágenes, retrasar la carga de JavaScript y utilizar una red de distribución de contenidos (CDN) acelera el LCP entre un 30 % y un 50 %.

El Largest Contentful Paint no es un objetivo en sí mismo, sino un indicador que te ayuda a implementar mejoras concretas. Utilizas el valor de LCP para detectar cuellos de botella en tu proceso de carga y dar prioridad a las optimizaciones que tienen mayor impacto en la experiencia del usuario y la conversión. A continuación puedes ver cómo las pymes aplican el LCP en la práctica.

Optimización de imágenes para tiendas online y sitios web de portafolios

El elemento más importante de una página de producto o de un proyecto del portafolio suele ser una imagen. Si esa imagen ocupa 2 MB y tarda 4 segundos en aparecer, tu LCP obtendrá una mala puntuación. Al comprimir las imágenes a formato WebP o AVIF, aplicar la carga diferida a las imágenes situadas por debajo de la línea de pliegue y utilizar una CDN, a menudo se reduce el tiempo de 4 a 2 segundos. Una tienda online de muebles de Nimega con 800 productos vio cómo, tras optimizar las imágenes destacadas, el LCP bajaba de 3,8 a 2,1 segundos, lo que se tradujo en un aumento del 12 % en las visitas a las páginas de productos. Atención: no debes aplicar la carga diferida a la imagen más grande situada por encima de la línea de pliegue, ya que, de lo contrario, ralentizarás el LCP.

Mejorar el tiempo de respuesta del servidor para plataformas de contenido

Si tu elemento más grande es un bloque de texto o un componente generado dinámicamente, el LCP depende de la rapidez con la que responda tu servidor. Una consulta a la base de datos lenta o un alojamiento web sobrecargado hacen que el HTML no se envíe hasta pasados 2 segundos, lo que provoca que el elemento más grande también aparezca más tarde. Al habilitar el almacenamiento en caché, optimizar las consultas a la base de datos y cambiar a un alojamiento WordPress con SSD y almacenamiento en caché del lado del servidor, puedes reducir el tiempo de respuesta del servidor de 1,5 a 0,3 segundos. Para un proveedor de servicios B2B con una base de conocimientos de 200 artículos, esto supuso una mejora del LCP de 3,2 a 1,9 segundos.

Aplazar la ejecución de JavaScript en sitios web interactivos

Si se carga mucho JavaScript para el seguimiento, los widgets de chat o las animaciones, esto puede bloquear la visualización del elemento principal. El navegador debe descargar y ejecutar primero todos esos scripts antes de poder mostrar la imagen principal o el bloque de texto. Al aplazar los scripts no esenciales con «async» o «defer», y cargar los scripts de terceros, como Google Analytics, solo después del LCP, se da prioridad al contenido visible. Una agencia de eventos con un calendario interactivo vio cómo su LCP descendía de 3,6 a 2,3 segundos al activar los widgets de chat y los vídeos incrustados solo después de cargar la sección principal.

Cuándo es adecuado centrarse en el Largest Contentful Paint y cuándo no

El LCP es crucial si tu elemento más grande tarda en cargarse y los visitantes abandonan la página por ello. Es la primera métrica que hay que tener en cuenta si las tasas de rebote son elevadas o si Google te avisa en Search Console. Sin embargo, el LCP no es la única métrica: un LCP rápido con un «Interaction to Next Paint» lento significa que tu página parece rápida, pero no responde a los clics. Y si tu elemento más grande es una imagen de fondo que nadie mira realmente, es mejor que te centres en el contenido que sí genera conversiones. Por lo tanto, optimiza siempre el LCP junto con el Cumulative Layout Shift y el resto de los Core Web Vitals.