M

MLOG

Español

Una guía completa sobre la carga diferida de imágenes y componentes para mejorar el rendimiento del sitio web y la experiencia del usuario para una audiencia global.

Carga diferida (Lazy Loading): optimización del rendimiento web con imágenes y componentes

En el panorama digital actual, el rendimiento de los sitios web es primordial. Los usuarios esperan experiencias rápidas y receptivas, y los motores de búsqueda priorizan los sitios web que cumplen con estas expectativas. Una técnica crucial para mejorar el rendimiento es la carga diferida (lazy loading). Este artículo ofrece una guía completa sobre la carga diferida de imágenes y componentes, ayudándole a optimizar su sitio web para una audiencia global.

¿Qué es la carga diferida (Lazy Loading)?

La carga diferida es una técnica que aplaza la carga de recursos (imágenes, iframes, componentes, etc.) hasta que realmente se necesitan, por lo general, cuando están a punto de entrar en el viewport (la parte visible de la página). Esto significa que, en lugar de cargar todos los activos de antemano, el navegador solo carga los recursos que son visibles para el usuario en la carga inicial de la página. A medida que el usuario se desplaza hacia abajo, se cargan más recursos a medida que se vuelven visibles.

Piénselo de esta manera: imagine que está haciendo la maleta para un viaje. En lugar de llevar todo su armario desde el principio, solo empaca la ropa que sabe que necesitará de inmediato. A medida que avanza en su viaje, desempaca artículos adicionales según los necesita. Así es, en esencia, como funciona la carga diferida en los sitios web.

¿Por qué usar la carga diferida?

La carga diferida ofrece varios beneficios significativos:

Carga diferida de imágenes

Las imágenes suelen ser los activos más grandes de un sitio web, lo que las convierte en candidatas ideales para la carga diferida. A continuación, se explica cómo implementar la carga diferida para imágenes:

Carga diferida nativa

Los navegadores modernos (Chrome, Firefox, Safari y Edge) ahora admiten la carga diferida nativa utilizando el atributo loading. Esta es la forma más sencilla y eficiente de aplicar la carga diferida a las imágenes.

Para habilitar la carga diferida nativa, simplemente añada el atributo loading="lazy" a su etiqueta <img>:

<img src="image.jpg" alt="Mi Imagen" loading="lazy">

El atributo loading puede tener tres valores:

Ejemplo:

<img src="london_bridge.jpg" alt="Puente de Londres" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Horizonte de Tokio" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Río de Janeiro" loading="lazy" width="600" height="400">

En este ejemplo, las imágenes del Puente de Londres, el horizonte de Tokio y Río de Janeiro solo se cargarán cuando el usuario se desplace hasta ellas. Esto es extremadamente útil, especialmente si un usuario no se desplaza hasta el final de la página.

Carga diferida con JavaScript

Para navegadores más antiguos que no admiten la carga diferida nativa, puede usar bibliotecas de JavaScript o escribir su propio script personalizado. Aquí hay un ejemplo básico usando la API Intersection Observer:

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

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

images.forEach(img => {
  observer.observe(img);
});

Explicación:

  1. Seleccionamos todos los elementos <img> que tienen un atributo data-src.
  2. Creamos una nueva instancia de IntersectionObserver. La función de callback se ejecuta cuando un elemento observado entra o sale del viewport.
  3. Dentro de la función de callback, iteramos sobre las entries (los elementos que han cruzado el viewport).
  4. Si un elemento está cruzando (entry.isIntersecting es verdadero), establecemos el atributo src de la imagen con el valor del atributo data-src.
  5. Luego eliminamos el atributo data-src y dejamos de observar la imagen, ya que no es necesario seguir haciéndolo.
  6. Finalmente, observamos cada imagen usando observer.observe(img).

Estructura HTML:

<img data-src="image.jpg" alt="Mi Imagen">

Observe que la URL real de la imagen se coloca en el atributo data-src en lugar del atributo src. Esto evita que el navegador cargue la imagen inmediatamente.

Uso de bibliotecas de carga diferida

Varias bibliotecas de JavaScript pueden simplificar el proceso de carga diferida de imágenes. Algunas opciones populares incluyen:

Estas bibliotecas suelen proporcionar una API sencilla para inicializar la carga diferida y ofrecen características adicionales como imágenes de marcador de posición (placeholders) y efectos de transición.

Carga diferida de componentes

La carga diferida no es solo para imágenes; también se puede aplicar a componentes, especialmente en frameworks modernos de JavaScript como React, Angular y Vue. Esto es particularmente útil para grandes aplicaciones de página única (SPA) con muchos componentes.

Carga diferida en React

React proporciona una función integrada, React.lazy(), para la carga diferida de componentes. Esta función le permite importar componentes de forma dinámica, que luego se cargan solo cuando se renderizan.

import React, { Suspense } from 'react';

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

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

export default App;

Explicación:

  1. Usamos React.lazy() para importar dinámicamente MyComponent. La función import() devuelve una promesa que se resuelve con el módulo del componente.
  2. Envolvemos MyComponent en un componente <Suspense>. El componente Suspense le permite mostrar una interfaz de respaldo (en este caso, "Cargando...") mientras se carga el componente.

Carga diferida en Angular

Angular admite la carga diferida de módulos utilizando la propiedad loadChildren en la configuración de enrutamiento.

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

Explicación:

  1. Definimos una ruta para la ruta my-module.
  2. Usamos la propiedad loadChildren para especificar que MyModuleModule debe cargarse de forma diferida. La función import() importa dinámicamente el módulo.
  3. El método then() se utiliza para acceder al módulo y devolver la clase MyModuleModule.

Carga diferida en Vue.js

Vue.js admite la carga diferida de componentes mediante importaciones dinámicas y la etiqueta component.

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>

Explicación:

  1. Usamos la etiqueta <component> con el atributo :is para renderizar un componente de forma dinámica.
  2. En el hook del ciclo de vida mounted, usamos la función import() para importar dinámicamente MyComponent.vue.
  3. Luego, establecemos la propiedad de datos dynamicComponent con la exportación predeterminada del módulo.

Mejores prácticas para la carga diferida

Para garantizar que la carga diferida se implemente de manera efectiva, considere estas mejores prácticas:

Consideraciones sobre internacionalización

Al implementar la carga diferida para una audiencia global, considere estos factores de internacionalización:

Conclusión

La carga diferida es una técnica poderosa para optimizar el rendimiento del sitio web y mejorar la experiencia del usuario. Al aplazar la carga de recursos fuera de la pantalla, puede reducir el tiempo de carga inicial de la página, disminuir el consumo de ancho de banda y reducir la carga del servidor. Ya sea que esté creando un pequeño sitio web personal o una gran aplicación empresarial, la carga diferida debe ser una parte clave de su estrategia de optimización del rendimiento. Siguiendo las mejores prácticas descritas en este artículo y considerando los factores de internacionalización, puede asegurarse de que su implementación de carga diferida sea efectiva y proporcione una experiencia de usuario positiva para una audiencia global.

Adopte la carga diferida y desbloquee una experiencia web más rápida, eficiente y amigable para todos.