El atributo loading="lazy" le dice al navegador que difiera la carga de una imagen o iframe hasta que esté a punto de entrar en la ventana gráfica — ahorrando ancho de banda y acelerando la carga inicial, sin JavaScript.
html
El atributo loading="lazy" le dice al navegador que difiera la carga de una imagen o iframe hasta que esté a punto de entrar en la ventana gráfica — ahorrando ancho de banda y acelerando la carga inicial, sin JavaScript.
lazy — carga solo cuando el desplazamiento la acerca a la ventana gráfica.eager (predeterminado) — carga inmediatamente, sin importar la posición.El navegador utiliza un margen (carga ligeramente antes de que el elemento entre en la vista) para que la imagen generalmente esté lista cuando el usuario la vea.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Sin dimensiones (o un aspect-ratio), la imagen cargada perezosamente no tiene espacio reservado, por lo que cuando se carga la página salta — afectando el Cumulative Layout Shift (CLS). Siempre reserva espacio.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Hacer carga perezosa de la imagen Largest Contentful Paint en realidad daña el rendimiento — retrasa el píxel más importante. Carga perezosamente solo medios fuera de pantalla.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
La carga nativa loading="lazy" eliminó la necesidad de esto en la mayoría de los casos (aunque IntersectionObserver sigue siendo útil para lógica personalizada).
La carga perezosa nativa reduce los bytes iniciales y solicitudes para páginas largas con muchas imágenes — una gran ventaja para móviles — de forma gratuita.
Los matices importan: reserva dimensiones para proteger CLS, y mantén las imágenes above-the-fold/LCP como eager (incluso fetchpriority="high") para que el contenido importante siga cargándose rápido.