Mejorar el LCP en WordPress
Cómo mejorar el LCP en WordPress paso a paso
Mejorar el LCP en WordPress es la tarea más importante cuando se trabaja con Core Web Vitals. El LCP (Largest Contentful Paint) mide cuánto tarda en aparecer el elemento visual más grande de la página, y es la métrica que Google pondera más a la hora de evaluar la experiencia de usuario.
Un buen LCP es inferior a 2,5 segundos. Si el tuyo está por encima, aquí tienes los pasos concretos para reducirlo y mejorar el LCP en WordPress.
¿Qué elemento es el LCP en tu página?
Para mejorar el LCP en WordPress, primero identifica qué elemento lo está marcando: normalmente es la imagen destacada, una imagen de cabecera o el título H1 si no hay imagen grande encima. Ábrelo en PageSpeed Insights, ve a Diagnostics y busca «Largest Contentful Paint element».
Antes de mejorar el LCP en WordPress y optimizar nada, identifica qué elemento está siendo el LCP. Normalmente es la imagen destacada del artículo, una imagen de cabecera o el título H1 si no hay imagen grande encima.
Para verlo, abre PageSpeed Insights con tu URL, baja hasta el apartado Diagnostics y busca «Largest Contentful Paint element». Te mostrará exactamente qué elemento está marcando el LCP.
Paso 1: optimiza la imagen LCP
Si el elemento LCP es una imagen, compárela antes de subirla (idealmente entre 100-150 KB), usa WebP o JPG bien comprimido, redimensiónala al tamaño exacto de visualización, añade fetchpriority=»high» y no le pongas lazy load, ya que está en el primer pantallazo.
Si el LCP es una imagen, es la causa más frecuente de un valor alto. Estas son las acciones concretas:
| Acción | Detalle |
|---|---|
| Comprímela antes de subirla | Una imagen de cabecera no debería superar los 100-150 KB |
| Usa el formato adecuado | WebP o JPG bien comprimido |
| Redimensiónala al tamaño exacto | No la subas más grande de lo que se muestra en pantalla |
| Añade fetchpriority=»high» | En la etiqueta <img> de esa imagen, para que el navegador la cargue antes que nada |
| No le pongas lazy load | El lazy load es solo para imágenes que no se ven en el primer pantallazo |
Si quieres profundizar en cómo comprimir y elegir el formato correcto, consulta nuestras guías sobre reducir el peso de las imágenes en WordPress sin plugins y qué formato de imagen usar en WordPress.
Paso 2: mejora el tiempo de respuesta del servidor (TTFB)
Para mejorar el LCP en WordPress también hay que reducir el TTFB (Time to First Byte): activa un plugin de caché como WP Rocket o LiteSpeed Cache, usa un CDN para acercar el contenido al visitante y revisa tu plan de hosting, ya que un compartido saturado puede superar 1 segundo de TTFB.
El TTFB (Time to First Byte) es el tiempo que tarda el servidor en empezar a enviar la página. Si es alto, el LCP se retrasa aunque la imagen esté perfectamente optimizada.
Para reducirlo en WordPress:
| Acción | Por qué ayuda |
|---|---|
| Activa un plugin de caché (WP Rocket, LiteSpeed Cache o W3 Total Cache) | Sirve páginas estáticas en lugar de generarlas con PHP cada vez |
| Usa un CDN | Acerca el contenido al visitante y reduce la latencia de red |
| Revisa tu plan de hosting | Un compartido saturado puede tener TTFB de más de 1 s; un VPS bien configurado lo baja a menos de 200 ms |
Paso 3: elimina recursos que bloquean el renderizado
Los archivos CSS y JavaScript que se cargan de forma síncrona en el <head> bloquean el renderizado y retrasan el LCP. Para mejorar el LCP en WordPress, difiere el JavaScript no crítico, carga el CSS crítico inline y elimina plugins innecesarios que añaden scripts a todas las páginas.
Los archivos CSS y JavaScript que se cargan de forma síncrona en el <head> bloquean el renderizado de la página: el navegador no puede pintar nada hasta que los descarga y procesa. Esto retrasa directamente el LCP, por lo que es importante para mejorar el LCP en WordPress.
Soluciones:
- Diferir el JavaScript no crítico: añade el atributo
defera los scripts que no son necesarios para el primer renderizado. - Cargar CSS crítico inline: el CSS necesario para pintar el primer pantallazo puede incluirse directamente en el HTML para evitar una petición adicional. Plugins como WP Rocket lo hacen automáticamente.
- Eliminar plugins innecesarios: cada plugin puede añadir scripts y estilos a todas las páginas aunque no los necesiten.
Paso 4: usa preload para la imagen LCP
El atributo preload en el <head> indica al navegador que descargue la imagen LCP lo antes posible, incluso antes de procesar el HTML completo. Es especialmente útil cuando la imagen LCP está definida en el CSS o tarda en descubrirse durante la carga.
El atributo preload en el <head> le dice al navegador que descargue esa imagen lo antes posible, incluso antes de procesar el HTML completo. Es especialmente útil cuando la imagen LCP está en el CSS o tarda en descubrirse.
Añade esto en el <head> de tu tema o con un plugin como Head, Footer and Post Injections:
<link rel="preload" as="image" href="/ruta/imagen-lcp.webp">
¿Cuánto tiempo tarda en mejorar el LCP en WordPress?
Los datos de laboratorio de PageSpeed Insights mejoran de inmediato tras aplicar los cambios para mejorar el LCP en WordPress. Los datos de campo de Google Search Console tardan entre 28 y 35 días en actualizarse, porque se basan en el comportamiento real de los usuarios a lo largo del tiempo.
Los datos de laboratorio PageSpeed Insights mejoran de inmediato tras aplicar los cambios. Los datos de campo (Search Console) tardan entre 28 y 35 días en actualizarse porque Google los recoge de usuarios reales a lo largo del tiempo.
Si, además de mejorar el LCP en WordPress, quieres entender el contexto completo de los Core Web Vitals y qué otras métricas debes vigilar, te lo explicamos en el artículo sobre WordPress y Core Web Vitals. Y si tu prioridad es corregir los saltos visuales, consulta nuestra guía sobre el CLS en WordPress.
¿Tienes más dudas? Consulta todas nuestras preguntas frecuentes.
Preguntas frecuentes sobre mejorar el LCP en WordPress
¿Cuál es un buen valor de LCP en WordPress?
Un LCP inferior a 2,5 segundos se considera bueno según los criterios de Core Web Vitals de Google. Por encima de ese valor, la página puede perder posiciones en los resultados de búsqueda.
¿Cómo sé qué elemento es el LCP de mi página?
Con PageSpeed Insights: introduce tu URL, baja hasta la sección Diagnostics y busca «Largest Contentful Paint element» para ver exactamente qué elemento se está midiendo.
¿El hosting influye en mejorar el LCP en WordPress?
Sí, y mucho. Un hosting compartido saturado puede tener un TTFB superior a 1 segundo, lo que retrasa el LCP aunque las imágenes y el código estén perfectamente optimizados.
¿Hace falta tocar código para mejorar el LCP en WordPress?
No siempre. Optimizar la imagen principal, activar un plugin de caché y un CDN cubre buena parte de la mejora. El atributo preload y diferir JavaScript ofrecen un ajuste adicional, pero pueden aplicarse con plugins sin programar.
