La idea clave: en la mayoría de los sitios WordPress, una puntuación roja de Largest Contentful Paint se reduce a una cosa —una imagen hero demasiado grande y con el formato incorrecto, no un problema de hosting. Corregir el formato, las dimensiones y la prioridad de carga de esa única imagen normalmente mueve más la aguja que cualquier mejora de hosting o plugin de caché.
Por qué el LCP es la métrica que realmente afecta al ranking
De las tres Core Web Vitals —LCP, INP y CLS—, el Largest Contentful Paint es la que más sitios WordPress suspenden, y la más directamente ligada a una sola causa: las imágenes.
El LCP mide cuánto tiempo tarda en renderizarse el elemento visible más grande de la página. En la gran mayoría de sitios WordPress —blogs, páginas de producto, portafolios de agencias— ese elemento es una imagen: un banner hero, una imagen destacada, una foto de producto sobre el pliegue.
Si tu puntuación de LCP está en rojo en PageSpeed Insights o Search Console, es muy probable que la solución no sea un hosting nuevo ni un plugin de caché. Es la propia imagen.
La checklist
Sigue estos pasos en orden. Cada uno apunta a una forma concreta en que las imágenes ralentizan el LCP.
1. Identifica tu elemento LCP real
Antes de arreglar nada, confirma qué se está midiendo realmente. Abre Chrome DevTools → pestaña Performance → grava la carga de la página → busca la marca "LCP" en la línea de tiempo. Señalará exactamente el elemento.
Alternativamente, pasa la página por PageSpeed Insights — el informe nombra el elemento LCP directamente bajo "Diagnostics".
No adivines. Optimizar la imagen equivocada pierde tiempo y no mueve la puntuación.
2. Revisa el formato del archivo
JPEG y PNG son formatos de los años 90 que aún se sirven en demasiados sitios. WebP es aproximadamente un 25–35% más pequeño que JPEG con calidad equivalente, y AVIF va más allá —a menudo un 50% más pequeño que JPEG.
Si tu imagen LCP sigue siendo un JPEG o PNG sin procesar, esta es casi siempre la corrección de mayor impacto disponible. Consulta nuestra guía completa para convertir imágenes de WordPress a WebP para los detalles técnicos —en resumen, Erdo Image Optimizer lo hace automáticamente, usando la propia librería GD o Imagick de tu servidor, sin clave API.
3. Revisa las dimensiones realmente renderizadas
Una foto de 4000×3000px mostrada en un contenedor hero de 800px de ancho desperdicia aproximadamente el 90% de los bytes descargados. El navegador tiene que descargar el archivo completo antes de poder reducirlo.
Compruébalo haciendo clic derecho en la imagen → Inspeccionar → compara el tamaño natural con el width/height renderizado en los estilos calculados. Si el tamaño natural es más de ~1,5 veces el tamaño renderizado, la imagen necesita redimensionarse, no solo comprimirse.
4. Define atributos explícitos de width y height
Los atributos width/height ausentes no perjudican directamente al LCP, pero sí perjudican al CLS (la métrica de cambio de diseño), y una página que desplaza su diseño mientras carga a menudo también retrasa la medición del LCP. Cada etiqueta <img> debería tener dimensiones explícitas para que el navegador pueda reservar espacio antes de que se descargue el archivo.
5. Nunca apliques lazy load al candidato a LCP
Este es el error que vemos con más frecuencia: un plugin de "rendimiento" añade loading="lazy" a todas las imágenes de la página, incluida la imagen hero. El lazy loading le dice al navegador que espere hasta que la imagen esté cerca del viewport antes de obtenerla —justo lo contrario de lo que quieres para la imagen que determina tu puntuación de LCP.
La solución: las imágenes sobre el pliegue deben cargarse de forma eager (sin atributo loading="lazy", o explícitamente con loading="eager"), idealmente con fetchpriority="high". Solo las imágenes bajo el pliegue deberían tener lazy load.
6. Precarga la imagen LCP si no es lo primero que ve el navegador
Si tu imagen LCP se carga mediante un background-image de CSS, o está escondida dentro de un slider/carrusel que JavaScript renderiza después de cargar la página, el navegador no la descubre hasta tarde en el proceso de carga. Añadir una etiqueta <link rel="preload" as="image"> para esa imagen específica en el <head> le dice al navegador que la obtenga de inmediato, en paralelo con todo lo demás.
7. Revisa el tiempo de respuesta del servidor para la propia imagen
Una imagen WebP con el tamaño y formato correctos aún no cargará rápido si se sirve desde un origen sin optimizar y sin cabeceras de caché. Confirma que tus imágenes se sirven con tiempos de vida de caché largos (Cache-Control: max-age=31536000 para recursos estáticos) y, si tienes tráfico relevante desde varias regiones, considera un CDN.
8. Vuelve a probar después de cada cambio
No agrupes los ocho pasos y pruebes solo una vez al final. Corrige el formato, vuelve a probar. Corrige las dimensiones, vuelve a probar. Esto te dice qué cambio realmente movió la aguja —útil cuando estás solucionando un sitio donde varias cosas están mal a la vez.
Referencia rápida
| Punto de la checklist | Hacer | No hacer |
|---|---|---|
| Formato | Servir WebP/AVIF | Enviar JPEG/PNG en bruto |
| Dimensiones | Coincidir con el tamaño del contenedor renderizado | Servir una imagen de 4000px en un contenedor de 800px |
| Carga | Eager + fetchpriority="high" para la imagen LCP |
Aplicar lazy load a la imagen hero |
| Entrega | Precargar si se descubre tarde (fondo CSS, carrusel JS) | Enterrar la imagen LCP en marcado renderizado por JS |
Por qué esto suma tanto
Una imagen hero que pasa de un JPEG de 2MB a un WebP de 400KB, dimensionada correctamente para su contenedor y cargada de forma eager en lugar de lazy, puede reducir fácilmente el LCP en más de un segundo en una conexión móvil típica —a menudo la diferencia entre una puntuación roja y verde en Search Console. Ninguno de los ocho pasos anteriores requiere cambios de código en tu tema; todos son cosas que puedes verificar y corregir desde la biblioteca de medios y las herramientas de desarrollo de un navegador.
Hacer esto a escala
Auditar manualmente cada imagen de un sitio de 50 páginas no es realista. Esta es exactamente la brecha que cierra la auditoría SEO integrada de Erdo Image Optimizer —escanea cada imagen de tu sitio y señala archivos demasiado grandes, atributos de lazy loading faltantes (y el error contrario —aplicar lazy load a imágenes sobre el pliegue), formatos incorrectos y texto alternativo faltante, todo en un único informe.
Combinado con la conversión automática a WebP/AVIF al subir archivos, la mayor parte de esta checklist se convierte en una configuración única en lugar de una auditoría manual recurrente.
Resumiendo
Los problemas de LCP se sienten como un problema de hosting o caché porque eso es lo que asume la mayoría de los consejos genéricos de "acelera tu sitio". En la práctica, en un sitio WordPress típico, la solución casi siempre es: servir el formato correcto, en el tamaño correcto, cargado con la prioridad correcta. Sigue la checklist anterior antes de recurrir a un hosting más caro o a una capa de caché a nivel de servidor —el problema normalmente no está ahí.