DEV Community

Cover image for Lazy Loading en imágenes con React JS 😴
Franklin Martinez
Franklin Martinez

Posted on

Lazy Loading en imágenes con React JS 😴

#react #javascript #spanish #tutorial

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Luego instalamos las dependencias.

npm install
Enter fullscreen mode Exit fullscreen mode

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

code .
Enter fullscreen mode Exit fullscreen mode

💤 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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

npm i -D @types/react-lazy-load-image-component
Enter fullscreen mode Exit fullscreen mode

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

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

title

💤 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())];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Notemos algo al inspeccionar la red de nuestra pagina.
images

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Y esta listo nuestro sitio web.

final

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

💤 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

Top comments (4)

Collapse
 
mteheran profile image
Miguel Teheran •

Creo que es importante resaltar en el titulo que vas a usar una librería y no lo vas hacer full nativo. Pero igual excelente articulo.

Collapse
 
franklin030601 profile image
Franklin Martinez •

Muchas gracias, lo tomare en cuenta en mis próximas publicaciones! 🙏

Collapse
 
flash010603 profile image
Usuario163 •

Realmente muy util, gracias por explicarlo!:)

Collapse
 
licjavierbarrios profile image
licjavierbarrios •

Excelente!

Read next

ng_news profile image

Episode 24/15: Wiz behind the curtain, Copilot in VSCode

ng-news -

paterson1720 profile image

Magic Link Authentication in 5 minutes with Next.js + Next-Auth + Full-Stack-Kit

CodeShipper -

dbillion profile image

Understanding Java Exceptions: A Guide with Practical Examples

Oludayo Adeoye -

ramunarasinga profile image

Lessons from open-source: How obsessed are you with following Single Responsibility Principle?

Ramu Narasinga -