Lazy Loading - Cost/performance optimization on the frontend for your website
Nowadays with heavy usage of javascripts and other heavy assets like images, We must use some kind of optimization technique to fast up websites as well as be cost effective in terms of CDN charges. So Lazy Loading is an optimization technique where we load heavy assets like images as we need to show to the visitors.
Lazy loading is a strategy that delays the loading of some assets like images until they are needed by the user based on the user's activity and navigation pattern. Typically, these assets are only loaded when they are scrolled into view.
The easiest way to use Lazy Loading is to use of iframe like following example:
<img src="image.jpg" alt="Image Alt" loading="lazy" />
<iframe src="iframe" loading="lazy"></iframe>
Here we don’t need to do anything but just put the following code and it should work. But the problem with this easy technique is that not all modern browsers support this technique.
Another technique is as following:
<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%">
<img src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">
<!-- off-screen images -->
<img src="/w3images/paris.jpg" alt="Paris" style="width:100%" loading="lazy">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%" loading="lazy">
It’s also a simple technique but again some browsers like Safari do not support this.
So to achieve this we need to write some well tested quality javascript/css code. But fortunately there are many open source node js packages which we can use to achieve this. One of such react package is react-lazy-load-image-component
Here is how to use this:
First install the package as running following command:
npm i --save react-lazy-load-image-component
Then write following code to use this:
import React from "react";
import Image from "image.jpg";
import { LazyLoadImage } from "react-lazy-load-image-component";
export default function App() {
return (
<div>
<LazyLoadImage src={Image}
width={600} height={400}
alt="Image Alt"
/>
</div>
);
}
So here image.jpg won’t load until the user scrolls down or calls the image slider to make that image come to the user viewport.
There are many other ways to render the images like keeping a placeholder image or a blur small size image until and unless the user goes to that image viewport.
You can get to know more about the library from their official documentation as follows:
https://www.npmjs.com/package/react-lazy-load-image-component
If you are not using React or using some other framework like Angular, Then you can also get many open source packages supporting other frameworks or framework less implementation. You just need to search for Lazy Load on Google and get many free packages.
One of the free JQuery plugin is Jquery.Lazy() and you can get the official documentation from : https://jquery.eisbehr.de/lazy/