¿Qué es Lazy Loading?

Lazy loading (carga diferida) es una estrategia de optimización que pospone la carga de recursos — imágenes, componentes, scripts — hasta el momento en que se van a usar. En lugar de cargar todo al inicio, la página carga solo lo imprescindible y el resto se carga bajo demanda.

¿Para qué se utiliza?

El lazy loading se aplica para:

• Reducir el tiempo de carga inicial (Time to Interactive) de páginas web.
• Ahorrar datos en conexiones lentas o dispositivos móviles.
• Cargar imágenes solo cuando el usuario hace scroll hasta ellas.
• Dividir bundles de JavaScript en fragmentos que se cargan según la ruta.
• Mejorar métricas de rendimiento como LCP y FID en Core Web Vitals.

¿Cómo funciona?

Imagina una biblioteca enorme con miles de libros. En lugar de acarrear todos los libros a tu mesa nada más entrar, solo traes los que necesitas ahora. Si luego quieres otro, vas a buscarlo. Lazy loading aplica exactamente esa lógica: carga lo que necesitas ahora y pide el resto cuando haga falta.

Ejemplo: Lazy loading de imágenes con HTML nativo

<!-- Sin lazy loading: todas las imágenes cargan al abrir la página -->
<img src="/img/hero.jpg" alt="Hero" />
<img src="/img/seccion-2.jpg" alt="Sección 2" />
<img src="/img/footer.jpg" alt="Footer" />

<!-- Con lazy loading: solo carga la imagen cuando entra en el viewport -->
<img src="/img/hero.jpg" alt="Hero" />
<!-- loading="eager" para la imagen principal (above the fold) -->

<img src="/img/seccion-2.jpg" alt="Sección 2" loading="lazy" />
<img src="/img/footer.jpg" alt="Footer" loading="lazy" />

Ejemplo: Lazy loading de componentes en React

import { lazy, Suspense } from 'react';

// Sin lazy loading: el bundle incluye este componente siempre
// import GraficoComplejo from './GraficoComplejo';

// Con lazy loading: se descarga solo si el usuario llega hasta aquí
const GraficoComplejo = lazy(() => import('./GraficoComplejo'));

function Dashboard() {
  return (
    <div>
      <h1>Panel principal</h1>
      <Suspense fallback={<p>Cargando gráfico...</p>}>
        <GraficoComplejo /> {/* Se descarga solo cuando se renderiza */}
      </Suspense>
    </div>
  );
}

---

Lazy loading es especialmente útil en páginas largas con muchas imágenes o aplicaciones con muchas rutas. Combinado con code splitting, puede reducir drásticamente el peso inicial de una web.

---

---