El lazy loading (carga diferida) hace que las imágenes fuera del viewport no se descarguen hasta que el usuario las necesita. El resultado es inmediato: menos datos en la carga inicial, mejor LCP y páginas que responden más rápido.
¿Por qué importa el lazy loading en WordPress?
Una página web típica carga entre 20 y 60 imágenes. Si el visitante solo ve el 20 % superior de la página, está descargando el 100 % de los recursos visuales. Eso desperdicia ancho de banda y retrasa el primer renderizado.
Con lazy loading activado, el navegador descarga solo las imágenes visibles. El resto se van cargando conforme el usuario hace scroll. Los beneficios concretos son:
- Menor tiempo de carga inicial (menos bytes en la primera petición).
- Mejor puntuación en PageSpeed Insights y Lighthouse.
- Reducción del consumo de datos en usuarios móviles.
- Mejor experiencia en redes lentas (3G, zonas rurales).
Método 1: El atributo nativo loading="lazy"
Desde WordPress 5.5 (agosto 2020), el CMS agrega automáticamente loading="lazy" a todas las imágenes insertadas desde la biblioteca de medios. No necesitas instalar nada.
Para verificar que funciona, inspecciona el código fuente de tu página (Ctrl + U) y busca una etiqueta <img>. Si ves loading="lazy", ya está activo.
<img src="foto.jpg" loading="lazy" alt="descripción" width="800" height="450">Requisito fundamental: el atributo solo funciona si la imagen tiene declarados width y height. Sin dimensiones explícitas, el navegador no puede reservar el espacio y el lazy loading pierde efectividad (además de generar CLS).
¿Cuándo NO usar loading="lazy" en una imagen?
La imagen hero o destacada —la primera visible en pantalla— no debe tener loading="lazy". Retrasar esa imagen perjudica el LCP. WordPress excluye automáticamente la primera imagen del post, pero si tu tema usa imágenes de cabecera personalizadas, verifica que no tengan el atributo.
Método 2: Plugin de caché o rendimiento
Si usas un plugin como WP Rocket, W3 Total Cache o LiteSpeed Cache, estos tienen su propia implementación de lazy loading que va más allá del atributo HTML nativo:
- Soportan iframes y videos embebidos (YouTube, Vimeo), no solo imágenes.
- Incluyen un placeholder de color sólido o difuminado mientras carga la imagen real.
- Permiten excluir imágenes específicas por clase CSS o posición.
En WP Rocket, la opción está en Medios → Lazy Loading de imágenes. Activa también la casilla "Reemplazar YouTube iframe" para evitar que los videos embebidos bloqueen el renderizado.
En LiteSpeed Cache, ve a LiteSpeed Cache → Optimización de imágenes → Lazy Load y habilita la opción. También permite lazy loading del CSS de fondo (background-image), algo que el atributo nativo no cubre.
Método 3: Plugin dedicado (Smush, ShortPixel, Imagify)
Los plugins de optimización de imágenes también integran lazy loading:
- Smush (gratuito): panel claro con activación en un clic y exclusión por página o clase.
- ShortPixel Adaptive Images: reescala imágenes al vuelo y aplica lazy loading. Ideal si no puedes reoptimizar el contenido antiguo.
- Imagify: comprime y aplica lazy loading; integración directa con WP Rocket.
Si ya tienes WP Rocket o LiteSpeed Cache, no dupliques el lazy loading con un segundo plugin. Doble implementación puede causar que las imágenes nunca se muestren.
Verificar que el lazy loading funciona
La forma más fiable es con las DevTools de Chrome:
- Abre tu página, pulsa F12 y ve a la pestaña Network.
- Filtra por Img.
- Recarga la página (Ctrl + Shift + R) sin hacer scroll.
- Solo deberían descargarse las imágenes del viewport visible. Las demás aparecerán conforme bajes.
También puedes usar el análisis de rendimiento web de elenlace.com para detectar imágenes fuera de pantalla que se cargan innecesariamente.
Para un diagnóstico más amplio de velocidad, revisa los artículos de nuestra categoría de rendimiento web.
Conclusiones clave
- WordPress 5.5+ agrega
loading="lazy"automáticamente; verifica que tus imágenes tenganwidthyheight. - La imagen hero (primer elemento visible) no debe tener lazy loading: perjudica el LCP.
- Plugins como WP Rocket o LiteSpeed Cache amplían el lazy loading a iframes y fondos CSS.
- No actives dos sistemas de lazy loading simultáneamente.
- Valida el resultado con las DevTools de Chrome o PageSpeed Insights.
¿Quieres que revisemos tu WordPress y apliquemos todas las optimizaciones de carga correctamente? Contáctanos en elenlace.com y te preparamos un diagnóstico sin costo.
Preguntas frecuentes
¿El lazy loading nativo de WordPress funciona en todos los navegadores?
El atributo loading="lazy" es compatible con Chrome, Edge, Firefox y Safari (versión 15.4+). Para navegadores antiguos simplemente se ignora y las imágenes cargan de forma normal, sin errores.
¿El lazy loading puede afectar negativamente el SEO?
No. Googlebot es capaz de renderizar páginas con lazy loading y rastrear las imágenes diferidas. Asegúrate de que las imágenes tengan atributos alt descriptivos para que sigan siendo indexadas correctamente.
¿Tengo que reoptimizar imágenes antiguas para que funcione el lazy loading?
El atributo HTML se puede agregar a cualquier imagen existente sin reoptimizarla. Sin embargo, si las imágenes antiguas no tienen width y height declarados, el navegador no puede reservar el espacio y puede aparecer CLS (saltos de diseño).
¿Qué pasa si ya tengo Elementor o un page builder?
Algunos page builders como Elementor generan sus propias etiquetas de imagen y pueden entrar en conflicto con el lazy loading del tema. Verifica en el inspector del navegador que las imágenes sí lleven el atributo. Si no lo llevan, activa la opción de lazy loading dentro del propio Elementor (Elementor → Ajustes → Rendimiento → Cargar imágenes de forma diferida).
Recursos útiles
Otros proveedores y guías que vale la pena comparar:
