Lazy Loading: Qué es y Cómo Implementarlo en HTML, JavaScript, React, Angular y Vue

Lazy loading, o “carga diferida”, es una técnica de optimización utilizada en desarrollo web para retrasar la carga de recursos no críticos hasta que sean necesarios.

Esto mejora el rendimiento inicial de una aplicación o página web, reduciendo el tiempo de carga y ahorrando ancho de banda.

• ¿Qué es Lazy Loading?
• Lazy Loading HTML
• Lazy Loading JavaScript
• Lazy Loading React
• Lazy Loading Angular
• Lazy Loading Vue
• Conclusión

---

¿Qué es Lazy Loading?

Lazy loading es un enfoque que permite cargar solo los elementos esenciales de una página durante su renderizado inicial.

Los recursos no visibles o requeridos, como imágenes fuera de la vista o componentes secundarios, se cargan dinámicamente cuando el usuario los necesita, como al desplazarse o interactuar.

Beneficios principales de lazy loading:

1. Rendimiento mejorado: Reduce el tiempo de carga inicial al minimizar las solicitudes al servidor.
2. Ahorro de recursos: Optimiza el uso del ancho de banda, especialmente útil para usuarios con conexiones lentas.
3. Experiencia de usuario mejorada: Permite una navegación más fluida al cargar contenido progresivamente.

---

Lazy Loading HTML

En HTML, el lazy loading se utiliza principalmente para optimizar imágenes y iframes.

Implementación de Lazy Loading en Imágenes

HTML5 introduce el atributo loading en las etiquetas <img>.

<img src="imagen-ejemplo.jpg" alt="Descripción" loading="lazy">

Cómo funciona:

• Cuando loading="lazy" se agrega a una imagen, el navegador pospone su carga hasta que esté cerca del viewport.

Lazy Loading en iframes

Los iframes también soportan el atributo loading:

https://www.ejemplo.com

---

Lazy Loading JavaScript

Para navegadores que no soportan loading="lazy" o para un control más personalizado, se puede usar JavaScript con la API de Intersection Observer.

Ejemplo básico:

const images = document.querySelectorAll('img[data-src]');

const lazyLoad = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
};

const observer = new IntersectionObserver(lazyLoad);
images.forEach(img => observer.observe(img));

HTML asociado:

<img data-src="imagen-ejemplo.jpg" alt="Descripción">

---

Lazy Loading React

React soporta lazy loading de componentes mediante la función React.lazy y Suspense.

Ejemplo:

import React, { Suspense } from 'react';

const ComponentePesado = React.lazy(() => import('./ComponentePesado'));

function App() {
  return (
    <div>
      <h1>Aplicación React</h1>
      <Suspense fallback={<div>Cargando...</div>}>
        <ComponentePesado />
      </Suspense>
    </div>
  );
}

export default App;

Cómo funciona:

• React.lazy carga el componente solo cuando es necesario.
• Suspense muestra un contenido de reserva (fallback) mientras el componente se carga.

---

Lazy Loading Angular

En Angular, lazy loading se utiliza para cargar módulos bajo demanda. Esto se logra mediante el enrutador.

Ejemplo:

1. Definir un módulo separado:

@NgModule({
  declarations: [ComponentePesadoComponent],
  imports: [CommonModule],
})
export class ComponentePesadoModule {}

2. Configurar el enrutador:

const routes: Routes = [
  {
    path: 'componente-pesado',
    loadChildren: () => import('./componente-pesado/componente-pesado.module').then(m => m.ComponentePesadoModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Cómo funciona:

• El módulo solo se carga cuando el usuario navega a la ruta especificada.

---

Lazy Loading Vue

En Vue, la carga diferida se implementa mediante defineAsyncComponent o el sistema de enrutamiento.

Ejemplo con Componentes Asíncronos:

import { defineAsyncComponent } from 'vue';

const ComponentePesado = defineAsyncComponent(() =>
  import('./ComponentePesado.vue')
);

export default {
  components: {
    ComponentePesado
  }
};

Ejemplo con Vue Router:

const routes = [
  {
    path: '/componente-pesado',
    component: () => import('./ComponentePesado.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Cómo funciona:

• El componente se carga solo cuando el usuario navega a su ruta asociada.

---

Conclusión

Lazy loading es una herramienta clave para optimizar aplicaciones web modernas, mejorando el rendimiento y la experiencia del usuario.

Su implementación varía según el entorno (HTML, JavaScript, React, Angular o Vue), pero el principio es siempre el mismo: cargar los recursos cuando realmente se necesitan.