LCP en WordPress: diagnóstico y soluciones paso a paso sin morir

Por qué tu WordPress suspende en Core Web Vitals, qué medir antes de tocar nada y los pasos exactos para bajar el LCP sin romper la web.

01 El LCP es la métrica que más suspende en WordPress

El LCP (Largest Contentful Paint) mide cuánto tarda en aparecer el elemento principal de la página: la imagen destacada, el titular o un bloque de texto grande. Google lo evalúa en el 75% de las visitas reales. Un LCP por debajo de 2,5 segundos se considera bueno; entre 2,5 y 4 s, mejorable; por encima de 4 s, malo.

En WordPress el LCP suele fallar por una combinación de motivos: imágenes sin dimensiones ni compresión, plugins que cargan CSS y JavaScript en todas las páginas, un hosting lento o falta de caché de página. La mayoría de webs pequeñas tienen los cuatro problemas a la vez.

La trampa habitual es instalar un plugin de optimización que promete arreglar todo y acaba empeorando el LCP porque añade más scripts o difiere mal el CSS. Aquí verás los pasos en orden, sin tocar lo que no debes tocar.

02 Mide el LCP real de tu web antes de cambiar nada

Antes de cambiar nada, mide. Abre PageSpeed Insights en pagespeed.web.dev, introduce la URL de tu página principal y pulsa Analizar. En la sección Core Web Vitals verás el valor de LCP en segundos y un color (verde, amarillo o rojo). No te fijes solo en la puntuación global de rendimiento.

En la misma página, baja hasta Diagnostics y busca 'Largest Contentful Paint element'. Ahí te dirá qué elemento concreto es el LCP: puede ser una imagen, un encabezado o un párrafo. Copia esa información.

Si tu web tiene tráfico suficiente, mira los datos de campo (CrUX) que aparecen en la parte superior de PageSpeed Insights. Esos datos provienen de usuarios reales, no de una simulación. Si no hay datos, usa la pestaña Lighthouse como referencia, pero recuerda que es una prueba de laboratorio.

Abre las herramientas de desarrollo del navegador (F12), ve a la pestaña Network y recarga la página. Filtra por Imagen si el LCP es una imagen y mira cuánto tarda en descargarse y cuánto pesa. Con esto ya tendrás una pista clara de por dónde empezar.

No toques nada todavía. Con estos datos sabrás si el problema es una imagen pesada, un archivo CSS o JS que bloquea, o el servidor que tarda en responder (TTFB alto).

03 Identifica el culpable del LCP: no todo es la imagen

El elemento LCP más común en WordPress es una imagen: la imagen destacada del post o página, un banner de cabecera o la foto de producto. Si es una imagen, mira su peso y sus dimensiones. Si pesa más de 200 KB o se sirve en un tamaño mayor que el contenedor donde se muestra, ya has encontrado la causa.

Si el LCP es un texto (un titular grande), casi siempre es por fuentes web que bloquean el renderizado: la fuente no tiene font-display: swap o se carga un archivo de fuente enorme. En ese caso el problema no es la imagen, sino el CSS y las fuentes.

Si el LCP es un vídeo, o el póster del vídeo, la solución pasa por usar una imagen estática optimizada como póster y no cargar el vídeo hasta que el usuario interactúe. No es habitual en webs de empresa, pero ocurre en portadas con vídeo de fondo.

Confirma siempre qué elemento es antes de actuar. No asumas que es la imagen destacada porque a ti te parezca. PageSpeed Insights te da el selector exacto, y la pestaña Network te muestra el tiempo de descarga.

04 Arregla el LCP causado por imágenes: pasos concretos

Paso 1: sirve la imagen en el tamaño exacto en que se muestra. Si tu contenedor tiene 800 píxeles de ancho, no subas una imagen de 4000 píxeles. Usa el editor de WordPress para escalar o una herramienta como Squoosh para redimensionar antes de subir.

Paso 2: convierte la imagen a WebP o AVIF. La mayoría de plugins de caché incluyen conversión automática; si no usas plugin, sube directamente la imagen en formato WebP. No instales un plugin solo para convertir si ya tienes uno de caché, se duplicará el trabajo.

Paso 3: quita la carga diferida (lazy load) del elemento LCP. Si el LCP es la imagen destacada, no debe tener loading='lazy'. Añade el atributo fetchpriority='high' para que el navegador la descargue antes. La etiqueta correcta sería algo así:

Paso 4: si usas un plugin de caché que aplica lazy load global, excluye la imagen LCP o desactiva el lazy load para las imágenes que se ven sin hacer scroll. La primera imagen de la página nunca debe diferirse.

Paso 5: comprueba que las imágenes se sirven con cabeceras de caché. Si tu hosting ya lo hace, no toques nada. Si no, activa la caché de navegador en tu plugin de caché. No edites .htaccess a mano si no sabes.

<img src='imagen-principal.webp' alt='Descripción de la imagen' width='800' height='600' fetchpriority='high'>

05 Optimiza CSS y JS sin romper el tema: qué sí y qué no

El renderizado bloqueante ocurre cuando el navegador tiene que descargar y procesar archivos CSS y JS antes de pintar el LCP. En WordPress esto viene del tema, de los plugins y, a veces, de jQuery cargado en el pie o en la cabecera.

Primer paso: desactiva y borra los plugins que no uses. Cada plugin añade CSS y JavaScript aunque no lo necesites en esa página. Cuantos menos plugins, menos peticiones y menos bloqueo.

Segundo paso: si usas un plugin de caché, activa la opción de combinar CSS y JS, pero con cabeza. La opción 'eliminar CSS no usado' o 'cargar CSS de forma asíncrona' puede romper el diseño si tu tema no está preparado. Actívala, comprueba la web y si se descuadra, deshaz el cambio.

Tercer paso: si tu hosting ofrece caché a nivel de servidor (LiteSpeed, NGINX FastCGI Cache), no instales otro plugin de caché. Configura el que ya tienes. Dos sistemas de caché a la vez generan conflictos y páginas en blanco.

Qué no debes tocar: no edites el archivo functions.php del tema si no sabes PHP. No añadas reglas manuales en .htaccess para caché o compresión si no entiendes la sintaxis: un error tira la web. No instales varios plugins de optimización a la vez; se pisan y provocan errores difíciles de diagnosticar.

Cuándo parar y llamar a un técnico: si después de optimizar imágenes, desactivar plugins y configurar la caché básica el LCP sigue por encima de 3 segundos, deja de tocar. Un desarrollador con herramientas de rendimiento puede identificar el cuello de botella exacto sin romper nada.

06 Hosting y caché: cuándo el problema es el servidor

El TTFB (Time To First Byte) mide cuánto tarda el servidor en enviar el primer byte de la respuesta. Si en PageSpeed Insights, dentro de Oportunidades, ves 'Reduce initial server response time' con un valor superior a 0,8 s, el problema principal no es la web, es el servidor o la configuración de PHP.

Paso 1: comprueba el TTFB en los datos de laboratorio de PageSpeed Insights. Si es alto, habla con tu proveedor de hosting y pregúntale si tu plan usa PHP 8.1 o superior, si tiene caché de objetos (Redis o Memcached) y si el servidor compartido está saturado.

Paso 2: si estás en un hosting barato con cientos de sitios en el mismo servidor, es normal que el LCP sea malo. Cambiar a un hosting optimizado para WordPress, con LiteSpeed o NGINX y PHP-FPM, puede bajar el LCP entre 1 y 2 segundos sin tocar código ni imágenes.

Paso 3: no hace falta un servidor dedicado para una web de negocio. Un hosting de 10-20 € al mes con caché de páginas y de objetos suele ser suficiente para bajar el TTFB a menos de 0,5 s. Pide al proveedor que te active la caché y la compresión GZIP o Brotli.

Criterio: si el TTFB es bajo (menos de 0,5 s) y el LCP sigue malo, el problema está en el contenido o en el código de la web. Si el TTFB es alto, arregla primero el hosting; de nada sirve optimizar imágenes si el servidor tarda un segundo en responder.

07 Criterio de decisión: cuándo seguir tú mismo y cuándo pagar a un desarrollador

El orden de actuación es: medir, identificar el elemento LCP, arreglar la imagen si es el caso, optimizar CSS y JS, y revisar el hosting si el TTFB es alto. No cambies varias cosas a la vez: así sabrás qué funcionó.

Puedes hacer tú mismo: redimensionar y convertir imágenes a WebP, desactivar plugins que no usas, configurar un plugin de caché con ajustes básicos y contratar un mejor hosting si el actual es claramente lento.

Debes parar y contactar con un técnico si: necesitas tocar PHP, .htaccess o el tema para eliminar CSS crítico; si tras los pasos básicos el LCP no baja de 3 segundos; si no sabes interpretar los datos de PageSpeed Insights o la web se rompe al activar opciones de optimización.

No instales plugins milagro que prometen una puntuación perfecta. La mayoría empeoran el LCP porque cargan más scripts o realizan optimizaciones agresivas que rompen el diseño. Menos es casi siempre más en WordPress.

Un desarrollador con experiencia en WordPress puede dejarte el LCP por debajo de 2,5 segundos en una o dos horas si el hosting es correcto, tocando el tema y la configuración de caché. Comparado con perder clientes por una web lenta, el coste es bajo.

Preguntas frecuentes

¿Qué es un buen valor de LCP para una web de negocio?

Un LCP bueno es inferior a 2,5 segundos en el 75% de las visitas reales. Entre 2,5 y 4 segundos es mejorable y por encima de 4 segundos es malo. Para una web de negocio, intenta estar por debajo de 3 segundos como mínimo, pero Google solo da verde por debajo de 2,5.

¿Puedo arreglar el LCP solo con un plugin de caché?

No siempre. Un plugin de caché ayuda con la caché de página y la combinación de archivos, pero si tienes una imagen de 1 MB o el servidor tarda 1,5 segundos en responder, el plugin no lo soluciona. Primero diagnostica el elemento LCP y el TTFB antes de decidir.

¿Por qué mi web va bien en mi ordenador pero suspende en PageSpeed Insights?

Tu ordenador tiene caché, buena conexión y quizá una ubicación cercana al servidor. PageSpeed Insights usa una conexión simulada y un servidor de prueba que puede estar lejos. Los datos de campo (CrUX) reflejan la experiencia real de usuarios, no la tuya personal. Confía en CrUX si hay suficientes visitas.