Lazy loading — Lazy loading — carga diferida de imágenes e iframes

¿Qué es lazy loading?

Lazy loading (“carga perezosa” o “carga diferida”) es una técnica que retrasa la descarga de recursos hasta el momento en que el usuario los necesita realmente, en lugar de descargarlos todos durante la carga inicial de la página. El criterio típico es “cuando el elemento entra en el viewport” o “cuando está cerca de entrar”.

Antes de 2019 había que implementarla manualmente con JavaScript (Intersection Observer, librerías como lazysizes). Desde 2019 está estandarizada en HTML nativo mediante el atributo loading="lazy" en <img> y <iframe>.

Sintaxis nativa

<img src="foto.jpg" alt="..." loading="lazy" width="800" height="600">
<iframe src="https://www.youtube.com/embed/..." loading="lazy"></iframe>

Valores aceptados:

• loading="eager" (default): cargar inmediatamente.
• loading="lazy": diferir hasta proximidad al viewport.
• loading="auto": dejar que el navegador decida (no estandarizado universalmente).

Soporte en navegadores

• Chrome y derivados: desde versión 76 (julio 2019).
• Firefox: desde versión 75 (abril 2020).
• Safari: desde versión 15.4 (marzo 2022) en macOS y iOS.
• Cobertura global: > 95 % según Can I Use en 2026.

Cuándo aplicar y cuándo NO aplicar

SÍ aplicar:

• Imágenes debajo del fold (que requieren scroll para verse).
• Galerías largas, listados de productos, blogs con muchas imágenes.
• iframes de YouTube, Google Maps, Twitter, Calendly embebidos.

NO aplicar JAMÁS:

• El recurso LCP (la imagen más grande visible en la primera pantalla). loading="lazy" retrasa el LCP varios segundos y hunde Core Web Vitals.
• Imágenes above-the-fold en general: si están en el viewport inicial, deben cargarse rápido.
• Logos críticos del header.

Es el error de implementación más común: aplicar loading="lazy" a TODAS las imágenes “por buena práctica” hunde el LCP en 1-3 segundos.

Decisión heurística

La heurística simple para <img>:

• Hero / above-the-fold: fetchpriority="high" + sin loading="lazy".
• Resto de la página: loading="lazy" (el navegador decidirá cuándo).

Astro <Image>, Next.js <Image> y otros frameworks aplican esta heurística automáticamente si se les indica la prioridad correcta (priority={true} en Next.js).

Lazy loading de JavaScript y CSS

El atributo HTML loading="lazy" solo funciona en <img> y <iframe>. Para JS y CSS se usan otras técnicas:

• JS: <script defer>, <script async>, dynamic import(), code splitting.
• CSS: <link rel="preload" as="style" onload="this.rel='stylesheet'"> o cargar estilos no críticos vía JS.

Lazy loading vs. fetchpriority

fetchpriority (estandarizado en 2023) permite afinar la prioridad de descarga:

<img src="hero.jpg" fetchpriority="high" alt="...">      <!-- LCP -->
<img src="aside.jpg" fetchpriority="low" loading="lazy">  <!-- secundario -->

fetchpriority="high" + sin lazy es el patrón ideal para imágenes LCP críticas.

Cómo lo aplicamos

smedialab.es aplica loading="lazy" en todas las imágenes debajo del primer pliegue (logos del footer, cards de proyecto, badges) y reserva el preload + fetchpriority="high" para el hero AVIF responsive del Layout. Para clientes de diseño web auditamos el patrón en cada plantilla para evitar el antipatrón “lazy a todo” que destruye LCP.