Performance Improvement Using JavaScript Lazy Loaders

Introduction

In this article is a demonstration of how to improve performance using the "Rocket.JS" and "Head.JS" open-source library.

About Rocket.JS

Rocket is a simple JavaScript lazy loader that aims to reduce the loading times of pages caused by blocking JavaScript. It's usage is as simple as possible in order to ensure it's easy to fit into existing code.

Step 1

Configure Rocket.JS file

We will download the JS file from the following Git repository:

https://github.com/imagehst/Rocket

Once we have download the JS file, we add a reference to our existing project.



We need to add the "head.js" file reference and add some jQuery code to determine if the Jquery.js works correctly or not.

Step 2

First we will see the page performance without "Rocket.JS".



This is just a normal ASP.Net start-up page and note the timelines for each page's resources (like JS and CSS files) to complete the page load. Overall it requires a major consumption of resources to complete and the most of the time is consumed by our "Jquery.JS" file.

We just considered the first-time page load now and see the following image for JavaScript code.

Step 3

Now we will do some changes in the JavaScript code as described below.



We added the "Rocket.JS" file reference to our page and call the rocket.load method to implement the JavaScript lazy loader and added some jQuery to determine if the lazy loader is working correctly or not.

After the "Rocket.JS" implementation our JavaScript file (foobar.js) will load at the end.




But I am not still convinced, because the Jquery.js file still takes more time. We will try another alternate solution using "Head.JS".

Using "Head.JS" will result in further performance improvements:

About head.JS

Head JS loads JavaScript files like images without blocking the page. Your page will be faster even with a single combined file.

Download the JS file and reference file as described from the following URL:

Download URL: http://headjs.com/#download

Implement the Head.JS as mentioned below:



After implementation we will see the jQuery and foobar.js files are loaded as in the following image.



Summary

Using head.js we can control what are all the scripts we need to load in the page and the order of the scripts as well.

Note: The network time for chrome may vary depending on your browser and version; it is just for your reference.