Add Lazy Loading in Your Website for Better Website Performance

Lazy loading is a web development technique that loads images on a page to a later point when the images are actually needed, instead of loading them up front. This techniques helps in improving website performance, reducing loading time and utilization of costs.

There are many benefits for adding Lazy loading in the websites.

1. Lazy loading loads page faster than normal loading, and only loads content when user needed.

2. It helps in reducing resource waste. For example, if an entire photo gallery is loaded on webpage but the user only wants to view first image, then the rest images are wasted in momory.

3. In Lazy loading, content only loads when user scrolls down to the page, so it will provide smooth scroll and better user experience.

Installation and use of Lazy loading

There are many open source library available to implement Lazy loading. blazy.js is easy and light-weight Lazy loading library. There is also jQuery Lazy plugin available. We will discuss that plugin in other article. For now, we will implement blazy.js plugin.

blazy is written in pure JavaScript, so you don't have to include 3rd-party libraries such as jQuery. bLazy works on all modern browsers.

You can use blazy in just 3 simple step.

1. Download the blazy from GitHub and add to your website.

<script src="blazy.js"></script>

Or alternativaly use CDN file.

<script src="https://cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>

2. Add 'b-lazy' class to img tag. Add real image source to data-src.

<img class="b-lazy" data-src="/path/to/image.jpg" />

3. Write below Javascript to load images Lazy way.

<script type="text/javascript">
    // Initialize
    var bLazy = new Blazy({
        // Options
    });
</script>

You can also add few options with bLazy.

Selector

You can change the selector if you don’t want to add the ‘b-lazy’ class or if you need to have multiple.

// example
var bLazy = new Blazy({ 
    selector: 'img' // all images
});

Offset

The offset controls how early you want the elements to be loaded before they’re visible. Default is 100, so 100px before an element is visible it’ll start loading.

// Example
var bLazy = new Blazy({ 
    offset: 100 // Loads images 100px before they're visible
});

Images inside a container

You can also lazy load images inside a scrolling container, just define the selector of the container:

var bLazy = new Blazy({ 
    container: '#scrolling-container' // Default is window
});

Callback

If you need to do anything when an image has loaded or fails you can pass a callback function:
var bLazy = new Blazy({ 
    success: function(res) {
        // image has loaded
    },
    error: function(ele, msg){
        if(msg === 'missing') {
            // data-src is missing
        }
        else if(msg === 'invalid') {
            // data-src is invalid
        }
    }
});

You can also use more options here.

Conclusion

Loading content is important part in view of user’s browsing experience. Dynamically loading content gives user smooth experience. Lazy loading will provide smooth and easy touch to load website faster and ultimately gives better user experience.