Lazy Loading en imágenes con React JS 😴

Lazy Loading es muy importante hoy en día para un mejoramiento en el rendimiento de tu sitio web. Realizar la optimización las imágenes ayuda a que tu sitio web sea mas rápido, que tenga un mejor SEO y ayuda a mejorar la experiencia de usuario
Esta vez aprenderás como realizar lazy load de las imágenes en una aplicación con React JS.

Cualquier tipo de Feedback es bienvenido, gracias y espero disfrutes el articulo.🤗

Tabla de contenido

📌 ¿Qué es Lazy Loading?

📌 Beneficios de implementar Lazy Loading.

📌 Tecnologías a utilizar.

📌 Creando el proyecto.

📌 Implementando Lazy Loading.

📌 Primeros pasos.

📌 Mostrando imágenes sin implementar lazy loading.

📌 Mostrando imágenes implementando lazy loading.

📌 Conclusión.

💤 ¿Qué es Lazy Loading?

Por lo general, cuando un usuario visita una web todo el contenido de la página se descarga y se visualiza de inmediato, aun cuando no es garantía de que el usuario vaya a consumirlo. Como efecto, se produce una pérdida de memoria y ancho de banda.

Y aquí es donde aparece lazy loading el cual, es una estrategia que retrasa la carga de algunos archivos, como por ejemplo las imágenes, solamente hasta que el usuario las necesite dependiendo de su actividad y forma de navegación en tu aplicación. Normalmente estos archivos solo se cargan cuando están a la vista del usuario.

💤 Beneficios de implementar Lazy Loading.

• Conseguir un balance ideal entre el contenido posicionado en el sitio y la experiencia final, para lograr una entrega de valor relevante.

• Conexiones más rápidas y optimizadas, ya que solo se carga lo que se muestra.

• Mayor retención de usuarios al ofrecer una carga eficiente y sin retrasos.

• Ahorro de recursos, al usar solo lo que necesita ser mostrado.

• Ofrece una experiencia diferenciada, sobre todo a usuarios con conexiones lentas.

• Optimiza el uso de recursos del usuario, como batería, datos móviles, tiempo, entre otros.

💤 Tecnologías a utilizar.

• ▶️ React JS (version 18)
• ▶️ Vite JS
• ▶️ TypeScript
• ▶️ CSS vanilla (Los estilos los encuentras en el repositorio al final de este post)

💤 Creando el proyecto.

Al proyecto le colocaremos el nombre de: lazy-img (opcional, tu le puedes poner el nombre que gustes).

npm init vite@latest

Creamos el proyecto con Vite JS y seleccionamos React con TypeScript.

Luego ejecutamos el siguiente comando para navegar al directorio que se acaba de crear.

cd lazy-img

Luego instalamos las dependencias.

npm install

Después abrimos el proyecto en un editor de código (en mi caso VS code).

code .

💤 Implementando Lazy Loading.

Hoy en dia, podemos implementar lazy loading de la manera mas sencilla, solo colando el atributo loading con el valor de lazy a nuestra etiqueta img o frame en HTML:

<img src="image.jpg" alt="Image Alt" loading="lazy" />

<iframe src="iframe" loading="lazy"></iframe>

Pero esto no funciona en todos los navegadores. Asi que en estos casos, necesitaremos un paquete externo.

💤 Primeros pasos.

Vamos a instalar: react-lazy-load-image-component.

Esta popular librería proporciona capacidades de renderizado de imágenes y efectos que puedes implementar rápida y fácilmente en tus propias aplicaciones React.

Instalamos el paquete:

npm i react-lazy-load-image-component

Nota: Si lo usaras con TypeScript, tienes que instalar su archivo de definiciones de tipos:

npm i -D @types/react-lazy-load-image-component

Ahora en nuestro archivo src/App.tsx borramos todo y agregamos solo un nuevo componente que renderize un titulo.

```tsx


const App = () => {
  return (
    <div>
      <h1><span>Lazy Loading Images</span> 🖼️</h1>
    </div>
  )
}
export default App

💤 Mostrando imágenes sin implementar lazy loading.

Primero generamos una función que nos retorne cierta cantidad de elementos para poder hacer map de esos elementos y mostrar las imágenes en base a la cantidad de elementos.

const generateArray = (items: number) => [...Array.from(Array(items).keys())];

Ahora llamamos a la función generateArray para generar en este caso 15 elementos y lo recorremos con el método map y renderizamos una imagen normal. Las imágenes las obtengo de esta pagina https://picsum.photos/

const generateArray = (items: number) => [...Array.from(Array(items).keys())];

const App = () => {
  return (
    <div>
      <h1><span>Lazy Loading Images</span> 🖼️</h1>

      <div className="container-images">
        {
          generateArray(15).map(i => (
            <img
              key={i}
              src={`https://picsum.photos/id/${i}/500`}
              alt={`Image Alt-${i}`}
              className="img-lazy"
              width={700} height={500}
            />
          ))
        }
      </div>
    </div>
  )
}
export default App

Con esto ya aparecerían las 15 imágenes hacia abajo. Y por le momento solo vemos una en nuestra pantalla

Notemos algo al inspeccionar la red de nuestra pagina.

Las imágenes se cargaron correctamente todas, a pesar de que solo estamos apreciando una sola imagen, y ese es el problema, aumenta nuestra velocidad de carga inicial, por ende la pagina carga mas lento y el usuario se aburre y se va de nuestro sitio web!

💤 Mostrando imágenes implementando lazy loading.

La solución esta en implementar lazy loading.

Para ello importamos el componente del paquete que instalamos previamente y solo cambiamos la etiqueta img por LazyLoadImage.

import { LazyLoadImage } from "react-lazy-load-image-component";

const generateArray = (items: number) => [...Array.from(Array(items).keys())];

const App = () => {
  return (
    <div>
      <h1><span>Lazy Loading Images</span> 🖼️</h1>

      <div className="container-images">
        {
          generateArray(15).map(i => (
            <LazyLoadImage
              key={i}
              src={`https://picsum.photos/id/${i}/500`}
              alt={`Image Alt-${i}`}
              className="img-lazy"
              width={700} height={500}
            />
          ))
        }
      </div>
    </div>
  )
}
export default App

Este componente, también nos permite mostrar un placeholder mientras la imagen esta cargando. Solamente agrega la propiedad placeholderSrc

Ademas, también tiene una propiedad para agregar cierta animación inicialmente antes de que se cargue y la elimina cuando la imagen se cargue completamente, para ello agrega la propiedad effect. Pero para usarlo se necesita importar el css de dicho efecto.

import { LazyLoadImage } from "react-lazy-load-image-component";

import 'react-lazy-load-image-component/src/effects/blur.css';

const generateArray = (items: number) => [...Array.from(Array(items).keys())];

const App = () => {
  return (
    <div>
      <h1><span>Lazy Loading Images</span> 🖼️</h1>

      <div className="container-images">
        {
          generateArray(15).map(i => (
            <LazyLoadImage
              key={i}
              src={`https://picsum.photos/id/${i}/500`}
              alt={`Image Alt-${i}`}
              className="img-lazy"
              width={700} height={500}
              placeholderSrc={placeholder}
              effect='blur' // opacity | black-and-white
            />
          ))
        }
      </div>
    </div>
  )
}
export default App

Y esta listo nuestro sitio web.

Y si ahora vemos las herramientas de desarrollo en la pestaña de red, observaremos que se redujo el tiempo de carga de la aplicación casi a la mitad, esto debido a que solo se cargan las imágenes que esta a la vista y conforme el usuario se desplaza por el sitio web, se irán cargando las demás imágenes.

💤 Conclusión.

Optimizar las imágenes es una buena practica que tiene que se implementada obligatoriamente en tus sitios web, para asi crear una mejor experiencia para el usuario y también pensando en los que dispositivos móviles.

Espero que te haya gustado esta publicación y que te haya ayudada a entender y poner en practica esta técnica de Lazy Loading, con el cual notas cambios increíbles en el rendimiento de tu app. 🤗

Si conoces alguna otra forma distinta o mejor de realizar lazy loading, con gusto puedes dejarla en los comentarios 🙌.

Te invito a que revises mi portafolio en caso de que estés interesado en contactarme para algún proyecto! Franklin Martinez Lucas

🔵 No olvides seguirme también en twitter: @Frankomtz361