Implementar Lazy Loading en imágenes y vídeos

Contents

Implementar Lazy Loading en Imágenes y Vídeos

El lazy loading (o carga diferida) es una técnica fundamental para optimizar el rendimiento web. Consiste en retrasar la carga de recursos no críticos (imágenes o vídeos). Solo se cargan cuando entran en el viewport o cerca de él, reduciendo el tiempo de carga inicial y el consumo de ancho de banda.

1. ¿Por qué usar Lazy Loading

Mejor experiencia de usuario: la página es interactiva antes.
Reducción de datos: solo se descarga lo que el usuario ve.
Optimización SEO: Google valora sitios rápidos.
Ahorro de recursos: menos peticiones y memoria usada.

2. Métodos de Implementación

Método	Compatibilidad	Ventajas	Desventajas
Atributo `loading=lazy`	Chrome, Edge, Firefox	Nativo, simple	No soportado en Safari (hasta v15)
Intersection Observer API	Todos los navegadores modernos	Flexible, configurable	Requiere JavaScript extra
Eventos de desplazamiento	Universal	Muy compatible	Menos eficiente, más código

3. Lazy Loading Nativo ltimggt y ltiframegt

Desde 2020, los navegadores modernos soportan el atributo loading en ltimggt y ltiframegt:

ltimg src=imagen-grande.jpg alt=Descripción loading=lazy width=600 height=400gt
ltiframe src=video.html loading=lazy width=560 height=315gtlt/iframegt

Con este simple cambio, el navegador decide cuándo descargar el recurso.

4. Usando Intersection Observer API

HTML marcado:

ltimg data-src=img.jpg alt=... class=lazy width=600 height=400gt

JavaScript:

const imgs = document.querySelectorAll(img.lazy)
const observer = new IntersectionObserver((entries) =gt {
  entries.forEach(entry =gt {
    if (entry.isIntersecting) {
      const img = entry.target
      img.src = img.getAttribute(data-src)
      img.classList.remove(lazy)
      observer.unobserve(img)
    }
  })
}, { rootMargin: 200px })

imgs.forEach(img =gt observer.observe(img))

5. Lazy Loading de Vídeos

Para vídeos, la estrategia es similar. Se usa un placeholder y se inyecta la etiqueta ltvideogt o ltiframegt al entrar en viewport:

ltdiv class=video-placeholder lazy-video data-src=video.mp4 style=width:100%height:0padding-bottom:56.25%position:relativegtlt/divgt

ltscriptgt
document.querySelectorAll(.lazy-video).forEach(div =gt {
  observer.observe(div)
})

const observer = new IntersectionObserver(entries =gt {
  entries.forEach(entry =gt {
    if (entry.isIntersecting) {
      const div = entry.target
      const video = document.createElement(video)
      video.src = div.dataset.src
      video.controls = true
      video.style = width:100%height:100%position:absolutetop:0left:0
      div.appendChild(video)
      observer.unobserve(div)
    }
  })
}, { rootMargin: 300px })
lt/scriptgt

6. Mejores Prácticas

Especificar dimensiones: usar width y height para evitar layout shift.
Root margin: anticipar la carga usando rootMargin en Intersection Observer.
Polyfill: para navegadores sin soporte nativo (WICG/loading-attribute).
Accesibilidad: mantener siempre alt en imágenes y títulos en vídeos.
Test en dispositivos móviles: medir mejoras con Lighthouse.

7. Impacto en Rendimiento

Implementar lazy loading puede reducir:

Tiempo hasta interacción: hasta un 50 % menos.
Bytes descargados: se evitan cientos de KB/MB extra.
Peticiones HTTP: menos recursos solicitados al inicio.

En Lighthouse suele reflejarse en las métricas de Largest Contentful Paint (LCP) y Total Blocking Time (TBT).

8. Errores Comunes y Soluciones

Olvidar atributos de tamaño: produce saltos de contenido.

Solución: añadir width y height o usar aspect-ratio.
No observar todos los elementos: crear un solo IntersectionObserver reutilizable.
Roll your own demasiado complejo: preferir nativo cuando exista.

9. Recursos y Lecturas Recomendadas

Este artículo proporciona una guía completa para dominar la implementación de lazy loading en imágenes y vídeos. Siguiendo estas recomendaciones podrás mejorar significativamente el rendimiento y la experiencia de tus usuarios.

Acepto donaciones de BAT's mediante el navegador Brave 🙂

Implementar Lazy Loading en imágenes y vídeos