Lazy loading: qué es y cómo activarlo en tu web

Introducción

El lazy loading (carga diferida o perezosa) es una técnica que retrasa la carga de imágenes y vídeos hasta que el usuario hace scroll y los ve. Así, la parte visible de la web carga mucho más rápido porque no se descargan todos los elementos de golpe.

Es una de las optimizaciones que más impacto tiene en la percepción de velocidad, sobre todo en webs con muchas imágenes. En este artículo vas a ver qué es, por qué sirve y cómo activarlo.

Qué es el lazy loading (en palabras sencillas)

Imagina una página de un periódico con 30 fotos. Sin lazy loading, el navegador intenta descargar las 30 fotos a la vez en cuanto entras, aunque solo veas las 3 primeras. El resultado: la web tarda mucho en cargar porque está descargando fotos que no se ven.

Con lazy loading, el navegador solo descarga las fotos que están a la vista. El resto se descargan a medida que haces scroll. Así, la página inicial carga mucho más rápido.

[Imagen sugerida: comparativa visual de carga con y sin lazy loading]

La parte visible de la web (lo primero que ve el usuario) carga mucho antes. La sensación de velocidad es inmediata.

Por qué usar lazy loading

• Carga inicial más rápida. Solo se descarga lo que se ve.
• Menos consumo de datos en móvil. El usuario móvil no descarga imágenes que no va a ver.
• Menos carga del servidor. Si el usuario no hace scroll, no se descargan todas las imágenes.
• Mejor LCP (Core Web Vitals). Al priorizar la imagen principal, el LCP mejora.
• Mejor SEO. Google recomienda el lazy loading.

Cómo activar el lazy loading en WordPress

WordPress ya lo incluye

Desde la versión 5.5 (lanzada en 2020), WordPress activa lazy loading en todas las imágenes por defecto. No tienes que hacer nada.

Si usas una versión reciente de WordPress, ya tienes lazy loading. Puedes confirmarlo viendo que tus imágenes tienen el atributo loading="lazy" en el código fuente.

Con LiteSpeed Cache (recomendado)

Si tu hosting usa LiteSpeed (como los planes de miHosting), el plugin LiteSpeed Cache te da control sobre el lazy loading:

1. Ve a LiteSpeed Cache → Page Optimization → Media Settings.
2. Activa Lazy Load Images.
3. (Opcional) Activa Lazy Load Iframes para vídeos de YouTube y similares.
4. Guarda y vacía la caché.

[Imagen sugerida: captura de la configuración de lazy load en LiteSpeed Cache]

Con otros plugins

Si no usas LiteSpeed Cache, otros plugins que añaden lazy loading avanzado:

• WP Rocket: incluye lazy loading en su configuración.
• Smush: además de optimizar imágenes, incluye lazy loading.
• Lazy Load by WP Rocket: plugin gratuito específico para esto.

Cómo activar el lazy loading en HTML (sin WordPress)

Si tu web no es WordPress, puedes activar lazy loading añadiendo el atributo loading="lazy" a tus imágenes:

<img src="foto.jpg" alt="Mi foto" loading="lazy" width="800" height="600">

Recuerda incluir siempre width y height para evitar saltos en la página (mejora el CLS de Core Web Vitals).

Para vídeos e iframes

Igual, añade loading="lazy":

<iframe src="https://youtube.com/..." loading="lazy"></iframe>

Compatibilidad: el atributo loading="lazy" es compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge). En navegadores antiguos simplemente se ignora y la imagen carga normal.

Qué elementos deben y no deben llevar lazy loading

Sí: lazy loading

• Imágenes que aparecen debajo del pliegue (fuera de la vista inicial).
• Vídeos embebidos (YouTube, Vimeo).
• Iframes.
• Fondos de imágenes CSS (con plugins).

No: sin lazy loading

• La imagen principal (la que aparece nada más entrar). Esta imagen contribuye al LCP, y si la retrasas, perjudicas la métrica.
• Logos y cabeceras siempre visibles.
• Imágenes por encima del pliegue.

Un error común es aplicar lazy loading a la imagen principal de cada página. Esto empeora el LCP. Las imágenes visibles al cargar deben cargar de inmediato.

Consejos útiles

• No apliques lazy loading a la imagen principal. Es contraproducente.
• Usa placeholders. Si una imagen tarda en cargar al hacer scroll, deja un hueco o una imagen de fondo para que no haya saltos.
• Combina con optimización de imágenes. Lazy loading retrasa la carga; la optimización reduce el peso. Las dos juntas son perfectas.
• No abuses en webs con poca scroll. Si tu web tiene todo el contenido visible de golpe, el lazy loading apenas aporta.
• Prueba en móvil. El beneficio del lazy loading es mayor en conexiones lentas.

Problemas frecuentes

Las imágenes no aparecen al hacer scroll

Puede ser un conflicto con JavaScript o con un tema mal construido. Prueba otro plugin de lazy loading o desactívalo para esas imágenes concretas.

El LCP empeora tras activar lazy loading

Has aplicado lazy loading a la imagen principal. Exclúyela del lazy loading.

Google Search Console avisa de que faltan imágenes

Algunas herramientas y buscadores antiguos no ejecutan lazy loading. Si es crítico para SEO de imágenes, asegúrate de que las imágenes importantes no lleven lazy loading.

Los vídeos embebidos de YouTube siguen cargando aunque estén abajo

Los iframes de YouTube no usan lazy loading por defecto. Necesitas activar específicamente lazy load de iframes (lo hace LiteSpeed Cache o WP Rocket).

No sé qué imágenes excluir

La regla es sencilla: excluye la primera imagen visible de cada página. El resto puede llevar lazy loading.

Preguntas frecuentes

¿El lazy loading afecta al SEO?

No, al contrario. Google lo recomienda. Lo único: asegúrate de no aplicarlo a la imagen principal para no perjudicar el LCP.

¿WordPress ya tiene lazy loading?

Sí, desde la versión 5.5. Las imágenes lo llevan por defecto.

¿Puedo usar lazy loading con un plugin de caché?

Sí, son compatibles. LiteSpeed Cache, WP Rocket y similares incluyen lazy loading en su configuración.

¿El lazy loading funciona en todos los navegadores?

En los modernos sí. En los antiguos se ignora y las imágenes cargan normal, sin que falle nada.

¿Necesito lazy loading si mi web tiene pocas imágenes?

Apenas se notará. Su mayor impacto es en webs con muchas imágenes (blogs, tiendas online, periódicos).

Carga primero lo importante

El lazy loading es una de esas técnicas que aportan mucho con poco esfuerzo: reduce el tiempo de carga inicial y prioriza lo que el usuario ve primero. Si tienes una web con imágenes o vídeos, deberías usarlo.

Si tienes un hosting con LiteSpeed como los de miHosting, configurar lazy loading es muy fácil: el plugin LiteSpeed Cache lo activa en un par de clics y con opciones avanzadas. Abre un ticket desde tu panel de cliente si necesitas ayuda para configurarlo.