Performance Patterns: Code Splitting y Lazy Loading

Los Performance Patterns son técnicas fundamentales para mejorar el rendimiento de las aplicaciones web modernas. En un mundo donde los usuarios esperan experiencias rápidas y fluidas, optimizar la carga inicial de tu aplicación puede marcar la diferencia entre el éxito y el fracaso.

En este post, exploraremos dos estrategias clave y cómo implementarlas en tus proyectos web.

¿Qué son los Performance Patterns?

Los Performance Patterns son técnicas y estrategias probadas que se utilizan para mejorar la eficiencia, velocidad y confiabilidad de las aplicaciones. Estos patrones ayudan a resolver cuellos de botella de rendimiento, reducir la latencia y mejorar la experiencia general del usuario.

Al igual que los patrones de diseño en JavaScript, los Performance Patterns son soluciones probadas a problemas comunes. Al aplicar estos patrones, los desarrolladores pueden:

• Mejorar la experiencia del usuario: Aplicaciones más rápidas generan mayor satisfacción.
• Reducir costos operativos: Eficiencia al s utilizar menos recursos, lo cual es crucial para escalar.
• Optimizar el uso de recursos: Algoritmos eficientes reducefn el uso de CPU, memoria y ancho de banda.
• Aumentar la escalabilidad: Los patrones aseguran que la aplicación pueda manejar cargas crecientes sin degradar el rendimiento.

¿Qué es el Bundle Splitting o Code Splitting?

Cuando construyes una aplicación web moderna, herramientas de empaquetado como Webpack, Rollup o Browserify toman el código fuente de tu aplicación y lo agrupan en uno o más archivos llamados «bundles». Cuando un usuario visita un sitio web, el bundle es solicitado y cargado para mostrar los datos en la pantalla.

Code Splitting es una técnica que consiste en dividir el código de una aplicación en fragmentos más pequeños, en lugar de cargar todo el código de una sola vez. Esto significa que solo se carga el código necesario para la página o funcionalidad que el usuario está utilizando en ese momento.

¿Por qué es importante el Code Splitting?

El problema con los bundles grandes es que aumentan el tiempo de carga, procesamiento y ejecución. Cuanto mayor sea el bundle, más tiempo tardará el motor del navegador en alcanzar la línea donde se ha realizado la primera llamada de renderizado. Hasta ese momento, el usuario debe mirar una pantalla en blanco, lo cual puede ser extremadamente frustrante.

Al dividir el bundle en múltiples bundles más pequeños, podemos:

• Reducir el tiempo de carga inicial
• Mejorar el First Contentful Paint (FCP)
• Optimizar el Largest Contentful Paint (LCP)
• Acelerar el Time To Interactive (TTI)

Implementación de Code Splitting

La mejor manera de introducir esta estrategia en tu aplicación es a través de la sintaxis de import() dinámico.

Ejemplo en JavaScript Vanilla

Antes:

import { add } from './math';

console.log(add(16, 26));

import { add } from './math';

console.log(add(16, 26));

Después:

import("./math").then(math => {
  console.log(math.add(16, 26));
});

import("./math").then(math => {
  console.log(math.add(16, 26));
});

Cuando Webpack encuentra esta sintaxis, automáticamente comienza a dividir tu aplicación en múltiples bundles.

Code Splitting en React

React proporciona dos herramientas clave que nos puede ayudar para implementar Code Splitting: React.lazy y Suspense.

Antes:

import OtherComponent from './OtherComponent';

import OtherComponent from './OtherComponent';

Después:

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Cargando...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Cargando...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

El componente React.lazy te permite cargar dinámicamente un componente cuando sea necesario, mientras que Suspense muestra contenido de respaldo mientras el componente se carga.

Code Splitting en Angular

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

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

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

Code Splitting en Vue

En Vue, puedes usar defineAsyncComponent o el sistema de enrutamiento:

import { defineAsyncComponent } from 'vue';

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

import { defineAsyncComponent } from 'vue';

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

¿Qué es el Lazy Loading?

El Lazy Loading o «carga diferida» es una técnica de optimización que retrasa la carga de recursos no críticos hasta que sean realmente necesarios. En lugar de cargar todos los elementos cuando se abre una página, el navegador solo carga lo que está visible en la pantalla (viewport).

Por ejemplo, si un sitio web tiene una imagen que el usuario tiene que hacer scroll para verla, con Lazy Loading puedes introducir un marcador de posición (placeholder) para cargarla solo cuando la persona llegue a su ubicación.

Beneficios del Lazy Loading

• Mejora del rendimiento: La carga inicial de la aplicación es más rápida.
• Reducción del tráfico: Solo se carga el código necesario, ahorrando ancho de banda.
• Menor uso de recursos: Ahorra batería, datos móviles y tiempo del usuario.
• Mejor tiempo de carga: Las páginas se cargan más rápido, reduciendo la probabilidad de abandono.
• Mayor retención de usuarios: Una carga eficiente estimula la permanencia en el sitio.

Implementación de Lazy Loading

Lazy Loading Nativo en HTML

HTML5 introduce el atributo loading para imágenes e iframes:

<img src="imagen.jpg" loading="lazy" alt="Descripción de la imagen">

<iframe src="<https://www.ejemplo.com>" loading="lazy"></iframe>

<img src="imagen.jpg" loading="lazy" alt="Descripción de la imagen">

<iframe src="<https://www.ejemplo.com>" loading="lazy"></iframe>

Los valores disponibles son:

• lazy: Carga diferida cuando el elemento está cerca del viewport.
• eager: Carga inmediata cuando se abre la página.
• auto: El navegador decide.

Lazy Loading con JavaScript (Intersection Observer API)

Para un control más personalizado, puedes usar la API de Intersection Observer:

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));

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-real.jpg" alt="Descripción">

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

Lazy Loading en React

Ya vimos cómo usar React.lazy para componentes. También puedes aplicarlo a rutas con React Router:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Cargando...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Cargando...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

Optimización de Terceros (Third-Party Scripts)

Los scripts de terceros como analytics, anuncios y chat widgets pueden ralentizar significativamente tu sitio. Aquí hay algunas estrategias de performance patterns para optimizarlos:

Usar async o defer

Estos atributos evitan que los scripts bloqueen el renderizado:

<script src="analytics.js" defer></script>
<script src="widget.js" async></script>

<script src="analytics.js" defer></script>
<script src="widget.js" async></script>

• defer: El script se ejecuta después de que el HTML se haya parseado completamente.
• async: El script se ejecuta tan pronto como esté disponible.

Establecer conexiones tempranas con Resource Hints

<link rel="dns-prefetch" href="<https://analytics.example.com>">
<link rel="preconnect" href="<https://cdn.example.com>">

<link rel="dns-prefetch" href="<https://analytics.example.com>">
<link rel="preconnect" href="<https://cdn.example.com>">

Auto-hospedar scripts de terceros

Alojar una copia de los scripts en tu mismo dominio te da más control sobre la carga y el caché, eliminando las solicitudes a dominios externos.

Lazy Loading en WordPress

Si usas WordPress, existen varios plugins para implementar Lazy Loading fácilmente:

Plugins Recomendados

• BJ Lazy Load: Instalación sencilla con opciones configuradas por defecto.
• A3 Lazy Load: Permite personalizar el color del placeholder y optimiza la carga en medio segundo en promedio.
• Lazy Load por WP Rocket: Muestra imágenes y frames solo cuando el usuario llega a ese punto.
• Lazy Load XT: Optimiza imágenes, videos, JavaScript y CSS.

Impacto en el SEO

El Lazy Loading y el Code Splitting pueden tener un impacto significativo en tu SEO si se implementan correctamente:

Beneficios para el SEO

• Page Speed mejorado: Google premia los sitios rápidos en los rankings.
• Mejor experiencia del usuario: Menor tasa de rebote y mayor tiempo de permanencia.
• Optimización de Core Web Vitals: Mejora métricas como LCP, FID y CLS.
• Ahorro de recursos del servidor: Menor uso de ancho de banda.

Consideraciones importantes

Sin embargo, debes tener cuidado con algunos aspectos:

• Asegúrate de que Google pueda rastrear el contenido: Usa Google Search Console con la opción «Explorar como Google» para verificar que tu contenido sea visible.
• Evita problemas con píxeles de seguimiento: Excluye los píxeles de seguimiento del lazy loading usando loading="eager".
• Previene layout shifts: Especifica el tamaño de las imágenes y elementos lazy-loaded para evitar cambios inesperados en el diseño.

Para entender mejor cómo evitar cambios de diseño inesperados, te recomiendo leer sobre el flujo del documento y BFC en CSS.

Recomendaciones de Google

Google proporciona documentación específica sobre cómo implementar Lazy Loading de manera amigable para SEO. Las recomendaciones clave incluyen:

• Usar el atributo loading="lazy" nativo cuando sea posible
• Implementar Intersection Observer para navegadores antiguos
• Asegurarse de que el contenido sea rastreable por los crawlers
• Evitar lazy loading en contenido above-the-fold (visible sin scroll)

¿Cuándo necesitas estas técnicas?

Considera implementar los Performance Patterns Code Splitting y Lazy Loading si:

• Tu sitio tiene tiempos de carga superiores a 3 segundos
• Herramientas como PageSpeed Insights o GTmetrix muestran problemas de rendimiento
• Tu aplicación tiene múltiples rutas o secciones que los usuarios no visitan siempre
• Tienes muchas imágenes, videos o recursos pesados
• Observas alta tasa de rebote debido a carga lenta
• Tu sitio tiene muchas dependencias de terceros

Mejores Prácticas

• Prioriza el contenido crítico: Carga primero lo que está above-the-fold.
• Usa placeholders visuales: Muestra esqueletos o imágenes de baja resolución mientras carga el contenido real.
• Mide el impacto: Usa herramientas como Lighthouse, WebPageTest o GTmetrix para validar mejoras.
• Combina técnicas: Code Splitting + Lazy Loading + Caché = Rendimiento óptimo.
• Prueba en diferentes dispositivos: Especialmente en conexiones lentas y dispositivos móviles.
• Monitorea constantemente: El rendimiento web es un proceso continuo, no un objetivo único.

Además de implementar estas técnicas de optimización, asegúrate de mantener tu código limpio y mantenible siguiendo las mejores prácticas de Clean Code.

Conclusión

El Code Splitting y el Lazy Loading son dos Performance Patterns fundamentales para construir aplicaciones web modernas que sean rápidas, eficientes y escalables. No solo mejorarás la experiencia de tus usuarios, sino que también optimizarás tu posicionamiento en buscadores y reducirás costos operativos.

Una vez que hayas optimizado tu aplicación web con estas técnicas, considera implementar Docker y contenedores para garantizar que tu aplicación funcione de manera consistente en todos los entornos.

Recuerda que la optimización es un proceso continuo. Mide, implementa, prueba y ajusta constantemente para asegurar que tu aplicación web ofrezca el mejor rendimiento posible.

¿Estás listo para optimizar tu aplicación web con estos patrones de rendimiento? Comienza implementando Lazy Loading en tus imágenes y experimenta con Code Splitting en las rutas menos visitadas de tu aplicación. Los resultados te sorprenderán.

Si tienes dudas o quieres compartir tu experiencia implementando estas técnicas, ¡déjame un comentario! Me encantaría conocer tu opinión y ayudarte en tu camino hacia una web más rápida y eficiente.

---

🧠 Aprendizaje continuo | 💻 Frontend + backend curioso | 🎶 Música y baile | 🎮 Videojuegos | ⚡ Productividad en cada paso

Sigueme en mis redes sociales para más contenido

• Facebook
• Twitter
• Instagram
• LinkedIn
• GitHub

---