Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 12, 2021 09:33 am GMT

How to Reduce Javascript Libraries Loading Time: Best Practice

In this article Ill explain how to reduce the loading time of Javascript libraries using Auto-Loading, a public but almost unknown new feature of the Googles AJAX APIs. It may looks a bit tricky, but with some patience wont be so hard. Anyway, even Google in its official documentation says This advanced feature can be difficult to implement, depending on the exact situation. Therefore, we recommend that auto-loading only be considered in specific cases when a reduction in latency is crucial.

Well, crucial or not I think any kind of websites, from an home-made blog to a critical companys website, will enjoy shorter loading time.

Lets start

Lets say in our website we usejQueryandGoogle Map API. Normally our code looks like this:

<head><!-- jQuery 1.3.2 --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><!-- Google Map API V3 --><script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script></head>

We could also write the same like this:

<head><!-- Google's AJAX APIs --><script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load("maps", "3",{other_params:"sensor=false"});google.load("jquery", "1.3.2");</script></head>

Ok. These are both good ways, but our aim is to reduce loading time as best as possible. This means thateverythinghas to be loaded with a single call. Just one call for ALL our needed libraries.

Using the Auto-Loading feature

First of all we have to write a small configuration script to let Google know what libraries we need. Depending on your need it could be a bit tricky.FortunatelyGoogle gives a free configuration wizard, butunfortunatelyit currently supports only some main Google libraries, and no external one. For example theres no jQuery. Too bad. This means we have to write our configuration script by hand. At least it helps us to understand better how thing works.

Ok, as wrote above in this example we use jQuery and Google Map API, so here is what our configuration script looks like:

{modules : [{"name" : "jquery","version" : "1.3.2"},{"name" : "maps","version" : "3",other_params:"sensor=false"}]}

Quite self-explanatory. We are saying we need two modules, the first one is jQuery version 1.3.2, the second one is Google Map API version 3 (note: thesensorparameter is mandatory, so we must declare it, even if false).

Good, now we have to compress it:

{modules:[{"name":"jquery","version":"1.3.2"},{"name":"maps","version":"3",other_params:"sensor=false"}]}

Due to formatting you see the code splitted in two line,but please consider everything must be on one single line

Now we have to URL encode it: (you can use any free service, likethis one)

%7B%22modules%22%3A%5B%7B%22name%22%3A%22jquery%22%2C%22version%22%3A%221.3.2%22%7D%2C%7B%22name%22%3A%22maps%22%2C%22version%22%3A%223%22%2Cother_params%3A%22sensor%3Dfalse%22%7D%5D%7D

And finally we can add this very long string to our HTML:<script type=text/javascript src=http://www.google.com/jsapi?autoload=%7B%22modules
%22%3A%5B%7B%22name%22%3A%22jquery%22%2C%22version%22%3A%221.3.2%22%7D%2C%7B%22name
%22%3A%22maps%22%2C%22version%22%3A%223%22%2
Cother_params%3A%22sensor%3Dfalse%22%7D%5D%7D>

Done! If now we load our webpage everything will be there, jQuery and Google Map API, with only one call, as fast as possible. And obviously in the configuration scriptwe can add as many libraries as we need, at the end will always be a single call in our HTML. How cool is that?

Read more about reducing JS libraries load time

Any mistake?

To trap any mistake in the configuration script, we can take a look at the Googles response, it will tell usError: Invalid autoload. It can be tracked with the Firefoxs Error Console, or simply go to the url and see its content, if theres something likevar error = new Error("Invalid autoload.");it means you have done some mistake in the configuration script.

Going Forward

What if we go forward to the initial aim of the Auto-Loading feature? Can we use it for more then reduce our website loading time? Maybe yes

Think this scenario. A complex website where theres only one main global javascript loading script (cause we dont want to handle tens or hundreds loading scripts spread in every single HTML file!

We want / need one single entry point, easy to maintain, easy to update). Every page called need different libraries. One jQuery, another one the Feed API, another one jQuery + Google Map API + Language API to provide a translation service to our end users.

It could be a little hell.. (think this in a very complex web application). We could use the Auto-Loading feature to simply our life. We can add some custom metatags to each HTML file with informations about which Javascript library it needs to run, and build runtime a dynamic configuration script to load everything needed!


Original Link: https://dev.to/wpsyed/how-to-reduce-javascript-libraries-loading-time-best-practice-52f0

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To