Lazy Loading en imágenes con React JS 😴
Tags: react, javascript, spanish, tutorial
Published: 2022-10-21 10:00:00

**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.🤗

&nbsp;

## Tabla de contenido
> 📌 [¿Qué es Lazy Loading?](#1)  
>> 📌 [Beneficios de implementar Lazy Loading.](#2)  
>
> 📌 [Tecnologías a utilizar.](#3)  
> 📌 [Creando el proyecto.](#4)  
> 📌 [Implementando Lazy Loading.](#5)  
>> 📌 [Primeros pasos.](#6)  
>> 📌 [Mostrando imágenes sin implementar lazy loading.](#7)  
>> 📌 [Mostrando imágenes implementando lazy loading.](#8)  
>
> 📌 [Conclusión.](#9)  


&nbsp;

## 💤 ¿Qué es Lazy Loading? <a id="1"></a>
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. <a id="2"></a>
- 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. <a id="3"></a>

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


## 💤 Creando el proyecto. <a id="4"></a>

Al proyecto le colocaremos el nombre de: **`lazy-img`** (opcional, tu le puedes poner el nombre que gustes).
```bash
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.

```bash
cd lazy-img
```
Luego instalamos las dependencias.
```bash
npm install
```
Después abrimos el proyecto en un editor de código (en mi caso VS code).
```bash
code .
```

## 💤 Implementando Lazy Loading. <a id="5"></a>
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:

```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. <a id="6"></a>
Vamos a instalar: [react-lazy-load-image-component](https://www.npmjs.com/package/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: 
```bash
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
```

![title](https://res.cloudinary.com/dnxchppfm/image/upload/v1663683917/lazy-img/01_pawxhj.png)


### 💤 Mostrando imágenes sin implementar lazy loading. <a id="6"></a>

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.

```ts
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/](https://picsum.photos)

```tsx
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**
![images](https://res.cloudinary.com/dnxchppfm/image/upload/v1663685387/lazy-img/04_hebxbx.png)

Notemos algo al inspeccionar la red de nuestra pagina.
![images](https://res.cloudinary.com/dnxchppfm/image/upload/v1663683918/lazy-img/02_bwvcgr.png)

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. <a id="7"></a>
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**.

```tsx
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.

```tsx
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.

![final](https://res.cloudinary.com/dnxchppfm/image/upload/v1663687449/lazy-img/lazy-image_ww4uyt.gif)      

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.

![net](https://res.cloudinary.com/dnxchppfm/image/upload/v1663683918/lazy-img/03_pvvpgb.png)


## 💤 Conclusión. <a id="9"></a>

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](https://franklin-dev.netlify.app/)**

> 🔵 No olvides seguirme también en twitter: [**@Frankomtz361**](https://twitter.com/Frankomtz361)

{%embed https://twitter.com/Frankomtz361/status/1575329958674796547?s=20&t=AVAVQ1am_AkFb2TyMo9S-A %}