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 ๐
Top comments (16)
Do you have any live demo that we can see?
Hi, Zeeshan I'm trying to upload a video. But dev.to has no option to upload video files except images. ๐
A recording is not live, live is something real time like watching a football game when it happens. A live demo is something that happens when one executes it (in real time) and can be inspected, modified (where is applicable i.e. source code is available).
For lazy loading the live demo should demonstrate on network tab that images below the fold are not loaded until scrolled into view.
Like this:
enviragallery.com/demo/lazy-loadin...
May I suggest to get more experience before publishing articles that are supposed to teach others. Also, add some value on top of documentation and other articles otherwise your article is just a copy (and you didn't even mentioned your sources which is not nice).
How about gif
Add a GIF instead! Licecap is a simple lightweight GIF creator.
You can upload gif
use stackblitz.com/ and embed it in here
Hi Sun... Thanks for the explanation. I am a trainee and I don't know if this question is intelligent.
Could you post the video on youtube and send us the link?
I see the demo link in this npm
ๅผบ่ฟซ็ๆๅบฆ่้๐โโ๏ธ
@lixingjuan I usually add emojis๐ in my posts๐. These will make posts so colourful๐ and fresh โ๏ธ
Interesting topic! Everything is explained articulately and clearly. For your project, consider checking out this free npm package: select-paginated.
how exactly does it differ from the native image lazy loading?
Great, it would help more if you could also explain how this package works under the hood.
Those looking for a demo the library links to one in their readme:
albertjuhe.com/react-lazy-load-ima...
Helpful๐
Some comments may only be visible to logged-in visitors. Sign in to view all comments.