El LCP (Largest Contentful Paint) es la métrica de Core Web Vitals que más afecta a la percepción de velocidad de tu web. Mide el tiempo que tarda en aparecer el elemento más grande visible en pantalla —normalmente la imagen hero o el título principal— desde que el usuario hace clic en tu resultado en Google.
Según los estándares de Google, un LCP por debajo de 2,5 segundos es bueno, entre 2,5 y 4 segundos necesita mejora, y por encima de 4 segundos es malo. La buena noticia es que con los ajustes adecuados es posible pasar de 6 segundos a menos de 2 en una tarde.
¿Qué elemento se mide como LCP en tu web?
Puede ser la imagen hero de portada, el título H1 principal si es grande, una imagen de cabecera del post o un vídeo con carátula. Para descubrirlo, usa PageSpeed Insights, que te muestra exactamente qué elemento es el LCP y dónde se produce el retraso.
Las 6 causas más comunes de un LCP alto en WordPress
1. Imagen hero demasiado pesada
El culpable número uno. Una imagen de 2-5 MB tardará segundos en cargarse incluso con buena conexión. Convierte a WebP y sirve el tamaño correcto para cada dispositivo con srcset.
2. La imagen LCP tiene lazy load activado
El lazy load es excelente para imágenes fuera de pantalla, pero nunca debe aplicarse al elemento LCP. Añade exclusiones específicas para la imagen hero en LiteSpeed Cache.
3. TTFB alto (Time to First Byte)
Si el servidor tarda más de 600ms en responder, todo llega tarde. Activa la caché de página con LiteSpeed Cache bien configurado.
4. CSS bloqueante
El navegador tiene que descargar y procesar todo el CSS antes de mostrar contenido. La solución es el CSS crítico (CCSS) inline para el above-the-fold.
5. JavaScript bloqueante en el head
Scripts síncronos en el <head> bloquean el renderizado. Aplica defer o async a todos los scripts no críticos.
6. Sin CDN o CDN mal configurado
Un CDN reduce el LCP para usuarios alejados del servidor al servir recursos desde nodos próximos al visitante.
Cómo reducir el LCP en WordPress paso a paso
Paso 1 — Convierte la imagen LCP a WebP
Activa «Reemplazar imágenes por WebP» en LiteSpeed Cache → Optimización de Medios. Reducción media del 30-50% respecto a JPG.
Paso 2 — Elimina el lazy load de la imagen LCP
Añade la URL de la imagen hero en las exclusiones de lazy load. También puedes añadir loading="eager" directamente en el HTML.
Paso 3 — Activa el CSS crítico (CCSS)
En LiteSpeed Cache → Optimización de Página → CSS, activa «Generar CCSS». Requiere API key gratuita de QUIC.cloud.
Paso 4 — Implementa preload para la imagen LCP
Añade en el <head>: <link rel="preload" as="image" href="/tu-imagen.webp" fetchpriority="high">
Paso 5 — Reduce el TTFB con caché de página
TTL de caché de al menos 604800 segundos (7 días). El TTFB de una página en caché debería estar por debajo de 200ms.
Paso 6 — Aplica defer a los JavaScript no críticos
Activa «Cargar JS de forma diferida» en LiteSpeed Cache → Optimización de Página → JS.
Herramientas para medir el LCP
- Google PageSpeed Insights — análisis gratuito con datos reales de usuarios
- Google Search Console → Experiencia → Core Web Vitals — datos agregados de tu sitio
- Chrome DevTools → Lighthouse — análisis local en tiempo real
Si quieres que lo apliquemos en tu web, visita nuestra página de optimización PageSpeed profesional.
¿Quieres que optimicemos tu WordPress?
Auditamos tu web y aplicamos todas las mejoras para alcanzar el máximo en PageSpeed y Core Web Vitals. Auditoría gratuita sin compromiso.
Actualidad — más artículos del blog
Descubre más guías sobre velocidad en nuestro blog de WordPress.
Otros usuarios leyeron este artículo buscando:
- cómo mejorar largest contentful paint wordpress
- LCP pagespeed insights wordpress bajo
- elementor LCP alto solución
- preload imagen hero wordpress
- critical css wordpress litespeed
- fetchpriority high wordpress imagen
- reducir tiempo carga wordpress móvil
- wordpress LCP más de 4 segundos qué hacer