Carga diferida de imágenes: loading=lazy

<img loading="lazy" src="..."> indica al navegador que posponga la descarga de la imagen hasta que esté a punto de entrar en la ventana gráfica. La compatibilidad nativa con todos los navegadores modernos convierte esto en la mejora de rendimiento más sencilla para páginas con muchas imágenes.

Los navegadores utilizan un pequeño margen heurístico (normalmente unos miles de píxeles por debajo del pliegue). La imagen comienza a cargarse con suficiente antelación para que esté completamente renderizada cuando el usuario se desplace hasta ella; la carga diferida resulta imperceptible si se desplaza con cuidado.

No establezca nunca loading="lazy" en imágenes situadas en la parte visible inicialmente ni en la candidata de su LCP (largest contentful paint). La carga diferida retrasa el elemento visual más importante, lo que perjudica tanto la velocidad percibida como Core Web Vitals.

Para que la carga diferida sea eficaz, proporcione a <img> valores explícitos de width y height (o CSS aspect-ratio). Sin dimensiones, el navegador no puede reservar espacio, el desplazamiento provoca reorganizaciones del diseño y la heurística de carga diferida falla.

El mismo atributo funciona en <iframe>. <iframe loading="lazy"> pospone la carga de mapas, vídeos e inserciones sociales situados debajo del pliegue; de lo contrario, cada uno cargaría megabytes de JavaScript de terceros en cada visita a la página.

El valor predeterminado es loading="eager" (cargar inmediatamente) y rara vez se escribe explícitamente. Establecer eager en imágenes situadas en la parte visible inicialmente puede ser útil como documentación, ya que indica a quienes revisan el código que la elección de eager fue deliberada.

La carga diferida se combina perfectamente con las imágenes adaptables. El navegador sigue eligiendo el candidato adecuado de srcset; simplemente pospone la descarga. No se requiere coordinación adicional entre loading="lazy" y srcset.

Combine la carga diferida con decoding="async" para permitir que el navegador decodifique la imagen fuera del hilo principal. Esto evita bloquear la entrada del usuario durante el desplazamiento cuando muchas imágenes llegan simultáneamente después de una larga ráfaga de desplazamiento.

CSS background-image no se puede cargar de forma diferida de manera nativa. Para los fondos principales situados en la parte visible inicialmente, esto no supone ningún problema; para los fondos situados debajo del pliegue, use IntersectionObserver para incorporar la URL cuando el elemento se acerque a la ventana gráfica.

Al imprimir la página, el navegador carga todas las imágenes de forma inmediata, independientemente de loading="lazy", para que la copia impresa esté completa. No es necesario aplicar un caso especial a las imágenes con carga diferida en las hojas de estilo de impresión.

La auditoría «Defer offscreen images» de Lighthouse muestra todas las imágenes que deberían tener loading="lazy". Filtrar el panel de red por «Img» y usar la vista «Waterfall» muestra las cargas escalonadas que produce la carga diferida; las solicitudes iniciales disminuyen drásticamente en las galerías de imágenes.

¿Por qué es perjudicial establecer loading="lazy" en una imagen principal situada en la parte superior de la página?

Usar loading="lazy" en elementos <img> y <iframe> que están fuera de la pantalla proporciona una mejora de rendimiento con un solo atributo. Combínelo con valores explícitos de width/height (para reservar espacio), srcset (para adaptabilidad) y decoding="async" (para mantener la fluidez del desplazamiento). No lo aplique nunca a la imagen de LCP ni a ningún elemento visible en la ventana gráfica inicial.