Glosario · Performance

Lazy loading: carga diferida de imágenes y recursos

Técnica que retrasa la carga de recursos (imágenes, iframes, vídeos) hasta que están a punto de entrar en el viewport del usuario.

El lazy loading reduce el peso de la página inicial y acelera el LCP. En HTML moderno es tan sencillo como añadir el atributo:

<img src="foto.jpg" loading="lazy" alt="...">

El navegador decide cuándo cargarla — típicamente cuando faltan entre 300 y 2000 píxeles para que entre en pantalla, según implementación.

Aplica a <img> e <iframe> de forma nativa. Para vídeo y componentes interactivos se usan patrones similares con IntersectionObserver.

Excepción importante: nunca apliques loading="lazy" al elemento que es candidato a LCP (normalmente la foto del hero). Si retrasas el más importante, empeoras el LCP en vez de mejorarlo.

Por qué importa

Con 20-30 imágenes en una página larga, el lazy loading puede reducir el peso inicial de 3 MB a 400 KB. Mejora LCP, consumo de datos móvil y sensación de velocidad. Desde 2020 es soporte nativo en todos los navegadores modernos — no requiere JavaScript.

Siguiente paso

¿Tienes un proyecto exigente entre manos?

Cuéntanos qué necesita tu empresa. En la primera llamada evaluamos viabilidad técnica, alcance y presupuesto cerrado. Sin compromiso.

Iniciar proyecto +34 659 998 350
Antes de cerrar

Un email cada dos semanas con lo que aprendemos.

Casos reales, decisiones técnicas con números, lecturas curadas. Sin "tips de LinkedIn", sin spam, sin emails en fin de semana.

Suscribirme a la newsletter