El lazy loading (carga diferida) es una técnica por la que las imágenes y otros contenidos solo se cargan cuando entran en pantalla. Así se consiguen tiempos de carga más rápidos y se ahorra ancho de banda, sobre todo en páginas con muchas imágenes. Es un aspecto crucial del desarrollo web moderno, especialmente para las webs muy visuales y con mucho contenido multimedia.

¿Qué es el lazy loading?

En una web normal, todas las imágenes se cargan de inmediato cuando alguien abre la página, incluso las que están al final del todo. Esto puede provocar tiempos de carga más largos y una peor experiencia de usuario. Con el lazy loading solo se cargan las imágenes visibles. El resto llega cuando el visitante se desplaza hacia abajo. De este modo, el usuario accede antes al contenido que quiere ver, lo que mejora la experiencia en general.

Ventajas del lazy loading:

  • Carga inicial más rápida: la página está lista antes, lo que se traduce en una mejor experiencia de usuario y en tasas de rebote más bajas.
  • Menos ancho de banda: las imágenes que nadie llega a ver no se cargan, algo especialmente ventajoso para los usuarios con planes de datos limitados.
  • Mejores Core Web Vitals: efecto positivo en LCP (Largest Contentful Paint) y FID (First Input Delay), importantes para el SEO.
  • Menor carga del servidor: menos solicitudes simultáneas reducen la presión sobre el servidor, lo que mejora el rendimiento de la web.

Lazy loading nativo en los navegadores

Los navegadores modernos admiten el lazy loading de serie mediante el atributo loading. Funciona sin plugins ni JavaScript adicionales:

<img src="afbeelding.jpg" loading="lazy" alt="Beschrijving">

El valor "lazy" le indica al navegador que cargue la imagen solo cuando entre en el viewport. Lo admiten navegadores populares como Chrome, Firefox, Edge y Safari. Esto significa que no tienes que dar ningún paso adicional para implementar esta función, lo que la hace accesible para desarrolladores web de todos los niveles.

Lazy loading en WordPress

Desde WordPress 5.5, el lazy loading se añade automáticamente a todas las imágenes. No tienes que configurar nada. WordPress añade por sí solo loading="lazy" a las imágenes de tu contenido. Esto permite a los usuarios de WordPress optimizar sus webs fácilmente, sin conocimientos técnicos.

¿Quieres comprobar si funciona? Abre tu web de WordPress, haz clic con el botón derecho en una imagen y elige "Inspeccionar". Deberías ver loading="lazy" en la etiqueta img. Esto confirma que el lazy loading está bien configurado.

Desactivar el lazy loading en imágenes concretas

Algunas imágenes, como tu logotipo o tu imagen principal (hero image), quizá prefieras cargarlas de inmediato. Puedes hacerlo añadiendo loading="eager" o usando un plugin que lo gestione. Es importante porque estas imágenes suelen ser cruciales para la primera impresión que se lleva quien visita tu web.

Plugins de lazy loading para WordPress

Aunque WordPress admite el lazy loading de forma nativa, los plugins ofrecen funciones adicionales que pueden ampliar sus posibilidades:

Smush

El plugin Smush combina el lazy loading con la compresión de imágenes. Es ideal si quieres mejorar el tiempo de carga y, a la vez, reducir el tamaño de tus imágenes. Smush también ofrece una función de optimización masiva, con la que puedes optimizar varias imágenes de una sola vez.

LiteSpeed Cache

¿Usas el hosting de Theory7 con LiteSpeed? El plugin LiteSpeed Cache incluye lazy loading para imágenes e iframes. Esto puede mejorar notablemente la velocidad de tu web, sobre todo si tienes mucho contenido multimedia.

WP Rocket

El plugin WP Rocket ofrece opciones avanzadas de lazy loading, también para vídeos e iframes. Este plugin es fácil de usar y ofrece numerosas funciones para optimizar el rendimiento de tu web, como la gestión de la caché y la combinación de archivos.

Lazy loading para vídeos e iframes

Además de a las imágenes, también puedes aplicar el lazy loading a los vídeos y los iframes. Es especialmente útil para los vídeos de YouTube incrustados, que de otro modo cargan muchos recursos. Al aplicar el lazy loading a estos elementos, puedes mejorar aún más el tiempo de carga de tus páginas:

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

Así, el vídeo solo se carga cuando el usuario quiere verlo de verdad, lo que mejora la experiencia de usuario en general.

Probar el lazy loading

Para comprobar si el lazy loading funciona bien:

  1. Abre tu web en Chrome
  2. Abre las herramientas para desarrolladores (F12)
  3. Ve a la pestaña Red (Network)
  4. Filtra por "Img"
  5. Vuelve a cargar la página
  6. Desplázate despacio hacia abajo

Deberías ver que las imágenes solo se cargan cuando te desplazas hacia abajo. Si todas las imágenes se cargan de inmediato, el lazy loading no funciona bien. Puede ser señal de que hay un problema en tu configuración o de que existe un conflicto con otros plugins.

Problemas frecuentes

Las imágenes no aparecen

A veces las imágenes no se cargan bien con una configuración de lazy loading agresiva. Aumenta el valor "threshold" para que las imágenes se carguen antes, antes de que entren en pantalla. Esto puede ayudar a que los usuarios no se pierdan imágenes importantes.

Layout shift por el lazy loading

Si las imágenes no tienen una altura y una anchura fijas, la página puede "saltar" cuando se cargan. Esto puede perjudicar la experiencia de usuario. Añade siempre los atributos width y height a tus imágenes para evitar este problema.

Conflicto con otros plugins

Varios plugins con lazy loading pueden entrar en conflicto. Usa una sola solución de lazy loading y desactiva las funciones duplicadas. Esto ayuda a evitar incoherencias y problemas de rendimiento.

Preguntas frecuentes

¿Influye el lazy loading en el SEO?

No, Google entiende el lazy loading e indexa las imágenes con normalidad. Eso sí, usa textos alternativos (alt) por accesibilidad y por SEO. Es crucial para mejorar la visibilidad de tus imágenes en los buscadores.

¿Debo usar lazy loading en todas las imágenes?

No en las imágenes "above the fold" (visibles de inmediato, sin desplazarse). Estas conviene cargarlas directamente para ofrecer una buena experiencia de usuario. Lo importante es encontrar el equilibrio entre velocidad y experiencia de usuario.

¿Funciona el lazy loading en el móvil?

Sí, el lazy loading funciona en todos los navegadores móviles modernos. Incluso resulta más valioso en el móvil, por el ancho de banda y los datos limitados. Puede ayudar a mejorar los tiempos de carga en los dispositivos móviles, algo esencial para una buena experiencia de usuario.

¿Quieres saber más sobre la optimización de páginas web? Con el alojamiento web de Theory7 tienes acceso a servidores LiteSpeed que funcionan a la perfección con el lazy loading para lograr la máxima velocidad. Esto puede tener un impacto considerable en el rendimiento de tu web y en la satisfacción de tus visitantes.