El LCP (Largest Contentful Paint) es la métrica Core Web Vital más difícil de optimizar porque depende de varios factores en cadena: la velocidad del servidor, la eficiencia de la red, el tamaño y formato de los recursos y la priorización del renderizado. Esta guía descompone el problema en sus causas raíz y da soluciones concretas para cada una.

Cómo se calcula el LCP exactamente

Google divide el tiempo de LCP en cuatro fases acumulativas: tiempo hasta el primer byte del servidor (TTFB), tiempo de carga del recurso LCP, tiempo de renderizado y delay inicial. Identificar cuál de estas fases consume más tiempo es el primer paso del diagnóstico.

Fase	Qué mide	Objetivo
TTFB	Tiempo hasta recibir el primer byte del HTML	< 800 ms
Resource load delay	Tiempo entre TTFB y el inicio de carga del recurso LCP	< 200 ms
Resource load duration	Tiempo de descarga del recurso LCP (imagen, etc.)	< 500 ms
Element render delay	Tiempo entre fin de descarga y renderizado visible	< 200 ms

Causa 1: Servidor lento (TTFB alto)

Si el servidor tarda más de 800ms en devolver el primer byte del HTML, el LCP ya empieza con retraso antes de que el navegador haya descargado nada. Esta es la causa más frecuente en sitios con hosting de baja calidad, bases de datos mal optimizadas o sin caché de página.

•Activa caché de página completa (en WordPress: WP Rocket, W3 Total Cache; en Next.js: ISR o caché de CDN).
•Usa un CDN (Cloudflare, Vercel Edge, Fastly) para servir el HTML desde servidores cercanos al usuario.
•Optimiza las queries de base de datos más lentas — usa la pestaña de consultas lentas de MySQL o el panel de debug de tu CMS.
•Considera un hosting más potente o serverless si el servidor actual está consistentemente saturado.

Causa 2: Imagen LCP sin preload ni optimización

El elemento LCP suele ser una imagen hero o un banner principal. Si esa imagen no está preloaded, el navegador no la descarga hasta que parsea el HTML y encuentra la etiqueta <img> — añadiendo un delay significativo.

html

<!-- Añade este preload en el <head> para la imagen LCP -->
<link rel="preload" as="image" href="/images/hero.webp"
      imagesrcset="/images/hero-480.webp 480w, /images/hero-1024.webp 1024w"
      imagesizes="100vw" fetchpriority="high" />

<!-- La etiqueta <img> correspondiente debe tener fetchpriority="high" -->
<img src="/images/hero.webp"
     srcset="/images/hero-480.webp 480w, /images/hero-1024.webp 1024w"
     sizes="100vw"
     fetchpriority="high"
     alt="Hero del sitio" />

•Convierte las imágenes a formato WebP o AVIF — reducción típica del 30-50% de tamaño sin pérdida visible de calidad.
•Redimensiona la imagen al tamaño máximo que se muestra en pantalla — no sirvas una imagen de 4000px para un elemento de 1200px.
•Añade el atributo loading="eager" (o elimina loading="lazy") en la imagen LCP — lazy loading retrasa la carga del elemento más importante.

Causa 3: CSS o JavaScript que bloquea el renderizado

El navegador no puede renderizar nada hasta que ha procesado todo el CSS y el JavaScript síncronos del <head>. Cada archivo CSS o JS externo que añades en el <head> sin async o defer bloquea el renderizado y retrasa el LCP.

html

<!-- Incorrecto: bloquea el renderizado -->
<script src="/app.js"></script>
<link rel="stylesheet" href="/non-critical.css">

<!-- Correcto: JS con defer, CSS no crítico con preload + onload -->
<script src="/app.js" defer></script>
<link rel="preload" href="/non-critical.css" as="style"
      onload="this.rel='stylesheet'">

•Inlinea el CSS crítico (above the fold) directamente en el <head> para eliminar el round-trip de red.
•Carga el resto del CSS de forma asíncrona con la técnica preload + onload.
•Usa defer o async en todos los scripts del <head> que no sean críticos para el renderizado inicial.
•Identifica y elimina scripts de terceros no esenciales del <head> (social widgets, chats, analytics no críticos).

Causa 4: Fuentes web que bloquean el texto

Si el elemento LCP es un bloque de texto que usa una fuente web personalizada, el navegador puede mostrar texto invisible (FOIT) o texto con la fuente fallback (FOUT) hasta que carga la fuente. Esto retrasa el LCP porque Google lo mide cuando el elemento es visible con su contenido final.

css

/* Añade font-display: swap o optional para evitar texto invisible */
@font-face {
  font-family: 'MiFuente';
  src: url('/fonts/mi-fuente.woff2') format('woff2');
  font-display: swap; /* Muestra fallback inmediatamente, sustituye al cargar */
}

•Preloada las fuentes más importantes con <link rel="preload" as="font">.
•Usa font-display: optional si la fuente no es crítica — el navegador la usa solo si ya está en caché.
•Aloja las fuentes en tu propio servidor en lugar de Google Fonts para evitar la resolución DNS extra.
•Limita el número de variantes (weights/styles) de fuente que cargas a las estrictamente necesarias.

Causa 5: LCP en un elemento con background-image CSS

Si el elemento LCP usa background-image en CSS en lugar de una etiqueta <img>, el navegador no puede hacer preload de esa imagen — primero debe descargar el CSS, parsearlo y aplicarlo para saber que hay una imagen de fondo. Esto añade un delay importante.

•Siempre que sea posible, usa etiquetas <img> o <picture> para las imágenes principales — permiten preload, srcset y lazy loading nativos.
•Si necesitas mantener background-image por razones de diseño, preloada la imagen manualmente con <link rel="preload">.
•Asegúrate de que el CSS que define el background-image es CSS crítico inlineado, no un archivo externo.

Diagnostica cuál es tu causa exacta

El Monitor Core Web Vitals de iRankly te muestra el LCP actual de cada URL y las sugerencias de optimización de PageSpeed Insights priorizadas. Úsalo para identificar qué URLs tienen LCP en rango "Necesita mejora" o "Malo" y priorizar cuáles optimizar primero.

Prueba la herramienta gratis

Analiza tus URLs con Monitor Core Web Vitals de iRankly. Sin registro, sin tarjeta.

Usar herramienta gratis

Para un diagnóstico más detallado de las fases del LCP, usa WebPageTest (webpagetest.org) con la opción "LCP Breakdown" activada. Te muestra exactamente cuánto tiempo consume cada fase del LCP y dónde está el cuello de botella principal.

Las otras dos métricas, y cómo llevarlas a la práctica en tu stack:

Cómo Mejorar el LCP: Causas, Diagnóstico y Soluciones