Qué es el LCP y cómo mejorarlo (Core Web Vitals)

Si tu web tarda demasiado en mostrar lo importante, los usuarios se van antes de ver tu oferta y Google lo nota. El LCP es la métrica que mide exactamente eso: cuánto tarda en aparecer el elemento principal de tu página. Es uno de los Core Web Vitals y, por tanto, una señal que influye en tu posicionamiento. En esta guía te explicamos qué es, qué valor debes alcanzar y cómo mejorarlo.

El elemento principal (hero image) de una web cargando rápido en móvil y escritorio como ejemplo de buen LCP

Qué es el LCP (Largest Contentful Paint)

El LCP (Largest Contentful Paint) mide el tiempo que tarda en renderizarse el elemento de contenido más grande visible en pantalla cuando cargas una página: normalmente la imagen principal, un vídeo o un bloque de texto destacado. En otras palabras, marca el momento en que el usuario percibe que "ya ha cargado lo importante".

Forma parte de los Core Web Vitals, el conjunto de métricas con las que Google evalúa la experiencia de página. Hoy son tres: LCP (carga), INP (interactividad, que sustituyó a FID en 2024) y CLS (estabilidad visual).

Qué valor de LCP es bueno

Google establece tres umbrales, medidos en el percentil 75 de tus usuarios (es decir, la experiencia del 75% de las visitas):

  • Bueno: 2,5 segundos o menos.
  • Necesita mejorar: entre 2,5 y 4 segundos.
  • Deficiente: más de 4 segundos.
El objetivo es mantener el LCP por debajo de 2,5 s en móvil, que es donde más se sufre la latencia de red y donde Google da prioridad al rastreo.
Medidor de Core Web Vitals con el LCP en 2,4 segundos dentro del rango Bueno (verde), junto a los umbrales Necesita mejorar y Deficiente

Por qué tu LCP es lento (causas habituales)

  • Respuesta lenta del servidor (TTFB alto): si el servidor tarda en entregar el HTML, todo lo demás se retrasa.
  • Recursos que bloquean el renderizado: CSS y JavaScript pesados que se cargan antes del contenido.
  • Imágenes sin optimizar: la imagen principal en formato pesado, sin comprimir o sin dimensiones adecuadas.
  • Carga diferida del elemento LCP: aplicar lazy loading a la imagen principal es un error: retrasa justo lo que debería cargar primero.
  • Renderizado en cliente (CSR): webs que dependen de ejecutar mucho JavaScript antes de pintar el contenido.
Usuaria esperando frente a una web que sigue cargando en el móvil, ejemplo del impacto de un LCP lento en la experiencia

Cómo mejorar el LCP

1. Optimiza la imagen principal

Sirve la imagen del LCP en formatos modernos (WebP o AVIF), comprimida y con el tamaño justo para cada dispositivo. Y nunca le apliques loading="lazy": al contrario, dale prioridad de carga.

<link rel="preload" as="image" href="/img/portada.webp" fetchpriority="high">
<img src="/img/portada.webp" alt="..." fetchpriority="high" width="1200" height="630">

2. Reduce el tiempo de respuesta del servidor (TTFB)

Implementa caché, usa un CDN para servir el contenido desde el nodo más cercano al usuario y evita procesos pesados en cada petición. Un TTFB bajo es la base de un buen LCP.

3. Elimina los recursos que bloquean el renderizado

Minimiza y divide el CSS, carga el JavaScript no crítico de forma diferida (defer/async) y deja solo lo imprescindible en la carga inicial.

4. Apuesta por HTML estático o renderizado en servidor

Entregar el HTML ya construido desde la primera respuesta (SSR o generación estática) hace que el navegador pinte el contenido al instante, sin esperar a ejecutar JavaScript.

Cómo medir el LCP

Tienes datos de dos tipos: de laboratorio (en condiciones controladas) y de campo (usuarios reales, que es lo que Google usa para clasificar):

  • PageSpeed Insights: combina laboratorio y datos reales (CrUX) de tu URL.
  • Search Console > Core Web Vitals: el informe de tu propiedad con las URLs agrupadas por estado (bueno / a mejorar / deficiente).
  • Lighthouse (en las DevTools de Chrome) para diagnóstico en desarrollo.

Nuestra experiencia: migrar a Astro para clavar los Core Web Vitals

Cuando reconstruimos consultoriaseosevilla.es migrando de WordPress a Astro, uno de los objetivos era pasar todos los Core Web Vitals en verde en móvil. La clave fue salir de una instalación cargada de plugins y maquetadores —que generaban HTML pesado y JavaScript innecesario— y pasar a HTML estático y ligero servido desde la primera respuesta. Menos peso y menos JavaScript se traducen directamente en un LCP más bajo. Si vienes de una web lenta, este suele ser el mayor salto de rendimiento que puedes dar.

Preguntas frecuentes

¿El LCP afecta al posicionamiento?

Sí, es un factor de experiencia de página. No es el más determinante (el contenido y la relevancia mandan), pero a igualdad de condiciones, una web rápida posiciona mejor y convierte más.

¿Qué elemento suele ser el LCP?

Lo más habitual es la imagen destacada de la parte superior (hero) o un titular grande. Puedes verlo señalado en el informe de PageSpeed Insights o en Lighthouse.

¿Cada cuánto debo revisar el LCP?

Revísalo tras cada cambio importante de diseño o plantilla, y monitoriza el informe de Core Web Vitals de Search Console de forma periódica.

Una web rápida es una web que vende

Mejorar el LCP no es un capricho técnico: es reducir el número de personas que abandonan tu web antes de ver lo que ofreces. Si tu Core Web Vitals están en rojo, casi siempre hay margen de mejora claro. En Consultoría SEO Sevilla analizamos el rendimiento real de tu web y atacamos las causas de raíz. Empieza por una auditoría SEO técnica o conoce nuestro servicio de posicionamiento SEO. Y si quieres entender cómo encaja todo esto en que Google rastree e indexe bien tu sitio, lee nuestra guía sobre cómo indexar tu web en Google.

Fuentes