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

El LCP dentro de las Core Web Vitals

El Largest Contentful Paint (LCP) es una de las tres métricas Core Web Vitals con las que Google mide cómo el rendimiento afecta la experiencia de usuario. Registra el tiempo que pasa hasta que se renderiza la imagen, el bloque de texto o el video más grande visible en el viewport, contado desde que el visitante navega a la página. Las otras dos métricas son Interaction to Next Paint (INP), que mide la capacidad de respuesta, y Cumulative Layout Shift (CLS), que mide la estabilidad visual.

El tiempo de carga de la página impacta de forma significativa la experiencia de usuario de tu sitio, y las Core Web Vitals están entre las señales que Google considera en su posicionamiento de búsqueda.

¿Qué elementos cuentan para el LCP?

Según la documentación de LCP de Google, actualizada por última vez el 4 de septiembre de 2025, solo unos pocos tipos de elemento pueden ser el elemento LCP:

• Elementos `<img>` (en formatos animados como GIF cuenta el primer fotograma).
• Elementos `<image>` dentro de un `<svg>`.
• Elementos `<video>`, cronometrados desde la imagen poster o el primer fotograma, lo que se renderice primero.
• Imágenes de fondo cargadas con la función `url()` de CSS.
• Elementos a nivel de bloque que contienen texto.

Nunca califican los elementos invisibles, los fondos que cubren todo el viewport ni las imágenes placeholder de baja entropía (las versiones borrosas que se muestran mientras carga la imagen real). En la práctica, en la mayoría de las páginas el elemento LCP es la imagen hero o el bloque de texto del titular principal.

El navegador no elige el elemento LCP una sola vez: reporta un primer candidato en cuanto pinta contenido y reporta uno nuevo cada vez que se renderiza algo más grande. Un titular suele ser el candidato al inicio de la carga y deja de serlo cuando termina de renderizarse la imagen hero. Además, el tamaño es el tamaño visible: solo cuenta el área que el elemento muestra realmente dentro del viewport. La medición termina en cuanto el visitante hace scroll, toca la pantalla o presiona una tecla, o cuando la pestaña pasa a segundo plano; el último candidato reportado queda como el elemento LCP de la página.

Antes de optimizar, confirma qué elemento eligió el navegador: PageSpeed Insights y Chrome DevTools nombran el elemento LCP final.

¿Qué es un buen puntaje de LCP?

Para Google, un buen LCP es de 2.5 segundos o menos, medido en el percentil 75 de las cargas de página y segmentado entre móvil y escritorio. Entre 2.5 y 4 segundos, necesita mejorar; más de 4 segundos es deficiente.

Por su naturaleza, el LCP nunca puede ser menor que el First Contentful Paint (FCP). Ambos son iguales cuando el primer contenido pintado es también el más grande, como en una página de solo texto cuyo titular se renderiza primero. El objetivo de Google para el FCP es de 1.8 segundos o menos: indica que el primer contenido aparece rápido, mientras que el LCP marca cuándo aparece el contenido elegible más grande. Una brecha grande entre el FCP y el LCP puede señalar un elemento LCP que se descubre, carga o renderiza tarde.

¿Cómo revisar tu puntaje de LCP?

Tienes dos tipos de datos. Los datos de campo, en PageSpeed Insights y en el reporte de Core Web Vitals de Google Search Console, muestran el LCP que usuarios reales de Chrome registraron en tus páginas, recopilado mediante el Chrome User Experience Report (CrUX). Los datos de laboratorio, en Lighthouse y Chrome DevTools, provienen de una sola ejecución de prueba en condiciones controladas.

Es normal que difieran. El LCP de campo incluye el tiempo de redirecciones y el Time to First Byte del servidor tal como los experimentan los visitantes reales, agregado a través de cada dispositivo, conexión y ubicación de tu audiencia; una prueba de laboratorio es una sola ejecución con una configuración controlada. Usa los datos de campo para juzgar el rendimiento real (es lo que Google evalúa) y las herramientas de laboratorio para reproducir una carga lenta y diagnosticar su causa.

¿Cómo mejorar un LCP lento?

Un LCP lento no tiene una sola causa, así que diagnostica antes de corregir. Un trace de rendimiento en Chrome DevTools divide el tiempo de LCP en subpartes: la respuesta del servidor, la carga del recurso LCP o su renderizado. Estas son las causas más comunes; aplica la corrección que corresponda a cada una:

• Respuesta lenta del servidor: agrega caché del lado del servidor o una CDN, o migra a un hosting con mejor tiempo de respuesta.
• CSS y JavaScript que bloquean el renderizado: difiere los scripts no críticos e inserta inline el CSS que necesita el primer paint.
• Imagen hero grande sin optimizar: comprímela, dimensiónala al espacio que ocupa y nunca apliques lazy loading al elemento LCP, porque retrasa justo el elemento que esta métrica mide.
• Renderizado del lado del cliente: si JavaScript arma la página en el navegador, el elemento más grande no puede renderizarse hasta que terminen los scripts; renderiza el contenido principal en el servidor.

Si tu LCP supera los 2.5 segundos, empieza con la guía de DreamHost para mejorar los Core Web Vitals.