LCP (Largest Contentful Paint): qué es y cómo mejorarlo

Qué es el LCP (Largest Contentful Paint)

El LCP (Largest Contentful Paint) mide el tiempo que tarda en dibujarse por completo el elemento visible más grande de una página, contado desde el momento en que el usuario inicia la carga. Ese elemento casi siempre es la imagen de portada, un video o el bloque de texto principal, y Google lo elige automáticamente: busca el contenido más grande dentro del área visible sin hacer scroll y cronometra cuándo aparece. Su umbral de buena experiencia es de 2,5 segundos o menos, medido en el percentil 75 de las visitas reales (web.dev, documentación oficial de Google).

Un ejemplo lo aclara. Entras a la ficha de un producto y lo que domina la pantalla es la foto grande del artículo. El LCP es el tiempo que pasa desde que hiciste clic hasta que esa foto está dibujada y nítida. Si tarda 1,8 segundos, la página aprueba con holgura; si tarda 4 segundos, Google la clasifica como "pobre" y el usuario ya se impacientó.

La razón de que esta métrica importe tanto es psicológica: para una persona, la página "ha cargado" cuando aparece su contenido principal, no cuando termina de descargarse el último script invisible. El LCP intenta capturar exactamente ese instante percibido, y por eso es la Core Web Vital que mejor se correlaciona con que un visitante se quede o se vaya.

El umbral de 2,5 segundos y el percentil 75

El umbral de buen LCP es de 2,5 segundos o menos en el percentil 75 de las cargas. Esto significa que el 75 % de las visitas a la página debe experimentar un LCP de 2,5 segundos o mejor; basta con que una de cada cuatro cargas sea peor de la cuenta para no aprobar. Google eligió 2,5 segundos porque, según su análisis de sitios reales, umbrales más estrictos como 1,5 o 2 segundos no son alcanzables de forma consistente, mientras que 2,5 segundos sí lo es sin dejar de exigir una experiencia rápida.

Los tres rangos oficiales son estos:

Una aclaración importante: estos valores se miden con datos de campo, es decir, usuarios reales de Chrome, no con una prueba de laboratorio. Puedes sacar un LCP excelente en Lighthouse desde tu computadora con buena conexión y aun así tener un LCP "pobre" en campo, porque tus visitantes navegan desde móviles modestos y redes 4G saturadas. Cuando campo y laboratorio discrepan, para el posicionamiento gana el campo.

Los cuatro componentes del LCP

El LCP no es un número mágico: se descompone en cuatro tiempos que ocurren en secuencia, y mejorar el LCP consiste en recortar el que más pesa. Entender esta anatomía evita el error más común, que es optimizar la imagen cuando el problema está en el servidor. Los cuatro componentes, en orden, son:

1. 1 TTFB (Time To First Byte): el tiempo desde que el navegador pide la página hasta que recibe el primer byte del servidor. Hasta aquí no se ha dibujado nada.
2. 2 Retraso de carga del recurso: el tiempo entre que el navegador puede empezar a trabajar y el momento en que arranca la descarga de la imagen o el recurso LCP.
3. 3 Tiempo de descarga del recurso: cuánto tarda en descargarse esa imagen o video.
4. 4 Retraso de renderizado: el tiempo entre que el recurso terminó de descargarse y el momento en que el navegador lo dibuja en pantalla.

El detalle clave es que el TTFB es el suelo del LCP. Si tu servidor tarda 1,5 segundos en responder, tu LCP no bajará de 1,5 segundos aunque la imagen pese 20 KB, porque los otros tres tiempos ocurren después. Por eso el primer diagnóstico ante un LCP malo es medir el TTFB: si es alto, ningún ajuste de imágenes lo va a salvar.

Qué elemento suele ser el LCP

En la mayoría de las páginas el elemento LCP es la imagen de portada o "hero", pero no siempre. Google evalúa qué contenido ocupa más superficie dentro del área visible y ese es el candidato: puede ser una foto de producto, un fondo grande, el póster de un video o, en un artículo sin imagen destacada, el bloque de texto principal. Saber cuál es el tuyo es imprescindible, porque optimizas ese elemento y no otro.

Para descubrirlo no hace falta adivinar. En PageSpeed Insights, dentro del diagnóstico de laboratorio, aparece una sección que señala exactamente cuál es el elemento LCP de la página. La extensión Web Vitals de Chrome hace lo mismo en vivo mientras navegas. Un error frecuente es asumir que el LCP es el logo o el menú superior; casi nunca lo es, porque son pequeños. El LCP es lo grande.

Un matiz útil: si tu elemento LCP es texto en lugar de una imagen, tus prioridades cambian. En ese caso el enemigo suele ser una fuente web que tarda en descargar y bloquea la aparición del texto, o un CSS pesado que retrasa el renderizado. La solución pasa por precargar la fuente y usar font-display: swap, no por tocar imágenes que no existen.

Cómo mejorar el LCP paso a paso

Para bajar el LCP hay que atacar dos frentes: que el servidor entregue el HTML rápido y que el elemento principal aparezca cuanto antes. Estas son las acciones con mayor impacto, ordenadas por rentabilidad, de modo que si solo haces las primeras ya notarás la mayor parte de la mejora.

• Reduce el TTFB con caché y buen hosting. Un WordPress sin caché ejecuta PHP y consulta la base de datos en cada visita. Con caché a nivel de servidor entrega HTML ya generado y el TTFB se desploma. Si tu servidor sigue lento, el problema es la infraestructura: discos, servidor web o latencia.
• Optimiza las imágenes y usa formatos modernos. Convierte a WebP o AVIF, que pesan entre un 25 % y un 50 % menos que un JPG a la misma calidad, y sirve cada imagen al tamaño real en que se muestra. Una foto que se ve a 800 píxeles no necesita 3.000.
• No apliques lazy loading a la imagen del hero. El lazy loading (carga diferida) retrasa a propósito la descarga de las imágenes hasta que el usuario se acerca a ellas. Es ideal para lo que está más abajo, pero aplicarlo a la imagen LCP —justo la que debe aparecer primero— arruina la métrica. Regla simple: carga diferida para todo menos para el hero.
• Precarga el recurso LCP. Una etiqueta <link rel="preload"> sobre la imagen principal le dice al navegador que la descargue con prioridad, sin esperar a descubrirla en el HTML. Para imágenes de contenido también ayuda fetchpriority="high".
• Elimina el CSS y el JavaScript que bloquean el renderizado. Un archivo CSS o un script en el <head> que el navegador debe procesar antes de dibujar retrasa el LCP aunque la imagen ya esté lista. Difiere lo que no sea crítico e incorpora en línea solo el CSS mínimo necesario para lo visible.
• Usa una CDN. Una CDN (Content Delivery Network, red de distribución de contenido) guarda copias de tus archivos estáticos en servidores repartidos por el mundo, de modo que el visitante descarga las imágenes desde el nodo más cercano en lugar de cruzar el planeta.

Por qué el hosting es el techo del LCP

El hosting fija el suelo del LCP a través del TTFB, y ese es el factor de velocidad que más se subestima. Como el TTFB es el primero de los cuatro componentes y ocurre antes de que se descargue una sola imagen, un servidor lento penaliza el LCP de todas las páginas del sitio a la vez, sin importar cuánto optimices el frontend. Es el cuello de botella que ninguna herramienta de imágenes puede arreglar.

Un ejemplo con números lo deja claro. Dos sitios con las imágenes igual de optimizadas: el sitio A está en un servidor saturado con TTFB de 1,4 segundos y su LCP termina en 3,6 segundos (pobre); el sitio B está en un servidor rápido con TTFB de 0,3 segundos y el mismo contenido rinde un LCP de 2,4 segundos (bueno). La única diferencia es el servidor.

Tres componentes concretos bajan el TTFB: discos NVMe (mucho más rápidos que los SATA en cualquier sitio con base de datos), un servidor web con caché eficiente como LiteSpeed (que sirve páginas ya generadas sin reejecutar PHP) y baja latencia de red (alojar cerca del público reduce la distancia física que viajan los datos). En nuestros planes de hosting esos tres vienen de serie, con la opción de elegir la ubicación más cercana a tu audiencia. Si quieres ver cómo el LCP encaja con las otras dos métricas de Google, la guía completa de Core Web Vitals lo explica de principio a fin.