Una página que carga 30 imágenes de golpe, aunque el usuario solo vaya a ver las tres primeras antes de hacer scroll, está desperdiciando ancho de banda y tiempo de carga sin necesidad. El lazy loading resuelve justo eso: retrasa la carga de un elemento hasta que realmente hace falta.
En la práctica, se aplica sobre todo a imágenes, vídeos y otros recursos multimedia pesados. En lugar de cargar toda la página de golpe, el navegador solo pide los elementos que están dentro del área visible del usuario, y va cargando el resto a medida que hace scroll.
Beneficios del lazy loading
- Carga inicial más rápida: al no descargar de golpe recursos que aún no son visibles, el contenido principal aparece antes, algo especialmente notable en sitios con muchas imágenes.
- Menos consumo de ancho de banda: el navegador solo descarga lo que el usuario necesita en cada momento, lo que beneficia tanto al visitante como al servidor.
- Mejor posicionamiento: Google prioriza páginas rápidas, así que un sitio más ágil no solo mejora la experiencia, también ayuda al SEO.
- Mejor experiencia en móvil: con conexiones más limitadas, cargar solo lo esencial marca una diferencia real en la fluidez de la navegación.
Si quieres ver el resto de factores que afectan a la velocidad de una web, el análisis sobre optimización de Core Web Vitals en WordPress complementa bien esta técnica.
Cómo implementarlo
No hace falta ser un desarrollador experto para aplicar lazy loading. Depende de las tecnologías que uses, hay varios caminos posibles.
Con el atributo loading
La forma más directa es usar el atributo loading en las etiquetas de imagen e iframe. Admite dos valores: lazy para activar la carga diferida y eager para cargar de inmediato, que es el comportamiento por defecto.
<img src="imagen.jpg" alt="Descripción de la imagen" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe>
Este método funciona en la mayoría de navegadores modernos sin necesidad de bibliotecas adicionales, así que es la opción más rápida de poner en marcha.
Con JavaScript
Para navegadores antiguos o casos más personalizados, puedes recurrir a JavaScript. La técnica más habitual usa la API Intersection Observer, que detecta cuándo un elemento entra en el área visible.
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll("img[data-src]");
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));
});
Aquí las imágenes llevan un atributo data-src con la URL real, mientras el src apunta a un marcador de posición hasta que el observer detecta que toca cargar la imagen de verdad.
Con bibliotecas externas
Si prefieres no montar tu propia solución, bibliotecas como lazysizes hacen el trabajo por ti. Solo incluyes el script y añades la clase lazyload a los elementos que quieres retrasar.
<img src="placeholder.jpg" data-src="imagen-real.jpg" class="lazyload" alt="Descripción de la imagen">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js" async></script>
El lazy loading resuelve la parte de carga diferida, pero el peso original de las imágenes también importa. Si quieres reducir ese peso antes incluso de subirlas a la web, merece la pena revisar cómo comprimir imágenes en local sin perder calidad visual. Y si tu público está repartido geográficamente, combinar lazy loading con una CDN multiplica la mejora en tiempos de carga.
Preguntas frecuentes
¿El lazy loading afecta al posicionamiento en Google Imágenes?
No si se implementa bien. Googlebot ejecuta JavaScript y respeta el atributo loading="lazy" nativo, así que las imágenes se siguen indexando con normalidad.
¿Debo aplicar lazy loading a la imagen destacada?
No. La imagen que se ve nada más cargar la página (por encima de la línea de scroll) debe cargarse de inmediato, con loading="eager" o sin el atributo, porque retrasarla empeora el LCP.
¿WordPress ya trae lazy loading integrado?
Sí, desde la versión 5.5 WordPress añade loading="lazy" automáticamente a las imágenes del contenido, aunque algunos temas o plugins de página builder pueden necesitar configuración adicional.
¿Sirve también para vídeos incrustados de YouTube?
Sí, aplicando loading="lazy" al iframe o usando una miniatura clicable que carga el reproductor real solo al pulsar, lo que además evita cargar scripts pesados de YouTube antes de tiempo.
