Image Lazy Loading

INTRO 🔊

Hello World! 🌎
From now onwards, I want to start a new series named React optimization. We will discuss different react optimization techniques which help to enhance React Application performance.🚀

Today's topic is IMAGE LAZY LOADING🔥

We all know that assets (images) will take time to load once the application is rendered. Having more assets leads to more time to load the app. It affects the app's performance. To avoid this performance issue we can load images only when it is needed (need to display). Suppose we have one image at the top and another image bottom of the page. Initially, we need to render the image which is present at the top. Later we need to render the bottom image when we reach (scroll) that particular part only. It helps to reduce the app's initial rendering time and consume data when only needed.

ADVANTAGES 🔊

🔴 Faster Initial Load Time: By deferring the loading of images that are not immediately visible, the initial page load time is reduced. This leads to a faster and more responsive user experience.

🟠 Reduced Bandwidth Usage: Only the images that are actually needed are loaded, which reduces the overall bandwidth consumption. This is especially beneficial for users on mobile devices or with limited data plans.

🟡 Smoother Scrolling: Lazy loading images ensures that images load as the user scrolls, preventing janky or laggy scrolling experiences caused by heavy image loads.

🟢 Content Prioritization: Critical content and functionality can be loaded first, improving perceived performance and user engagement.

🔵 Improved Search Engine Ranking: Search engines favor faster-loading websites, which can positively impact your site's search engine rankings.

🟣 Reduced Bounce Rate: Faster loading times can lead to lower bounce rates, as users are more likely to stay on a site that loads quickly.
⚫️ Reduced Server Load: By loading only the necessary images, server load and resource usage are reduced, potentially lowering hosting costs.

⚪️ Large Image Galleries: For applications with extensive image galleries or content-heavy pages, lazy loading helps ensure that performance remains optimal.

🟤 Progressive Enhancement: Users with slower internet connections or less capable devices still receive a functional and responsive experience as images load progressively.

APPROACH 🔊

import React from "react";

function ImageLoading() {
  return (
    <div>
      <div style={{ height: "120vh" }}></div>
      <img src="https://picsum.photos/700" loading='lazy'/>
      <br />
      <img src="https://picsum.photos/800"  loading='lazy'/>
      <br />
      <img src="https://picsum.photos/900"  loading='lazy'/>
      <br />
      <img src="https://picsum.photos/1000"  loading='lazy'/>
      <br />
    </div>
  );
}

export default ImageLoading;

If we observe the browser network by scrolling smoothly, we can observe assets calling according to scrolling. But not render all the images at a time.

📌 NOTE: The above method will not work for all browsers. So we need to install an external npm package to achieve this.

Install npm package react-lazy-load-image-component

Now we can implement our image lazy loading by using above package.

import React from "react";
import { LazyLoadImage } from "react-lazy-load-image-component";
import 'react-lazy-load-image-component/src/effects/blur.css';

function ImageLoading() {
  return (
    <div>
      <div style={{ height: "120vh" }}></div>
      <LazyLoadImage src="https://picsum.photos/700" />
      <br />
      <LazyLoadImage src="https://picsum.photos/800" />
      <br />
      <LazyLoadImage src="https://picsum.photos/900" />
      <br />
      <LazyLoadImage src="https://picsum.photos/1000" />
      <br />
    </div>
  );
}

export default ImageLoading;

react-lazy-load-image-component is one of the fine libraries that helps to achieve image lazy loading. This package has some other features but we are not discussing them now. You can check those on the npm site.

📌NOTE: Even though image lazy loading is the best concept to enhance app performance, it has some limitations like better to avoid while implementing carousels and above the fold. It affects the user experience.

CONCLUSION 🔊

I hope you guys like this concept. We will discuss the next concept in our next post.👍🏻

Peace 🙂