Categories: Performance EngineeringWeb

Javascript Libraries to use for Faster Webpage Loading

The article explores the web page loading issues in relation with loading of static resources such as Javascript/CSS files and goes on to suggest Javascript libraries that could be used to enable conditional loading of JS resources thereby achieving faster webpage loading.

Following are some of the common use case scenarios that, if taken care, would enhance faster web page loading:

Conditional loading of Javascript files in various different pages: Many of the I-could-also-do-front-end-programming adopt the approach of putting all the resources such as Javascript & CSS files in one common file and include the file in different web pages. Some of these common JS files include jquery & other related framework files which are of large size. The problem that they soon start facing is the performance issue in some of the pages such as contact us, or about us where not all common CSS and JS files are needed but still gets downloaded as part of common included file. And, then, they wonder on how to conditionally include resources based on the page needs.
Conditional loading of Javascript files in the same page: Then, there are scenarios where certain part of page may need to be loaded conditionally based on the user click (or event), but the resources Javascript and CSS files, however, get loaded with the page load. This also delays the page loading time and, the ideal scenario would need the conditional loading of these resources based on user click (or event).

The above use case scenarios and related issues could be handled by the following set of Javascript libraries which, primarily, helps in conditional loading of static resources thereby enabling faster web page loading. However, this does go on to create issues in relation with additional loading time of below JS scripts. However, to me, it looks more like trade-offs that one need to explore and plan to use one of the below scripts appropriately.

RequireJS: A Javascript loader, RequireJS takes a modular approach of dealing with loading of JS and CSS files while managing the dependencies in a very neat but sophisticated manner. It , internally, uses optimization tools such as Ugilify to minify the scripts. Check the detailed page on RequireJS to understand different aspects such as that related with defining and loading modules.
LABJS: LABJs stands for Loading and Blocking Javascript. As mentioned on the website, LABJs is an on-demand JavaScript loader, capable of loading any JS resources, from any location, into any page, at any time. It reduces the resource blocking during page load, thereby enhancing the page load speed. There are scenarios such as behavioral Javascript styling in which one needs to take care while using LABJs. However, there are related instructions on the website on how to take care of those issues. The limitation with LABJs is that it only supports the loading of JS files and not CSS.
YepNopeJS: As defined on the website, YepNope is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need. It supports handling of both JS and CSS files. Interestingly, Yepnope is fairly small, weighing in at just over 1.7kb minified and gzipped.
HeadJS: As claimed on their website, HeadJS enables the loading of JS & CSS asyncronously and in parallel, and at the same time, executing them in order.

Then, there are custom home-grown Javascript loaders such as BootLoader that companies like Facebook is using. However, the baseline is that the websites with high volume traffic need to take care of conditional loading (maybe in form of lazy loading or so) of static resources such as javascript, CSS and images. Thus, if you are part of web team of a high volume traffic website, consider using one of the above JS framework.

My personal favorites are RequireJS and YepNopeJS for both, JS and CSS handling and, LABJs for just Javascript resource handling.

There are techniques such as including link elements within <head> tag with different “rel” type such as dns-prefetch, pre-fetch, subresource, prerender etc which could speed up web page loading to a great extent. However, these techniques need proper planning in terms of diligently identifying the resources on which the techniques such as pre-fetch or pre-render could be applied.

[adsenseyu1]

Author
Recent Posts

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning and BI. I would love to connect with you on Linkedin.
Check out my books titled as Designing Decisions, and First Principles Thinking.