In this article I’ll explain how to reduce the loading time of Javascript libraries using Auto-Loading, a public but almost unknown new feature of the Google’s AJAX APIs. It may looks a bit tricky, but with some patience won’t 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 company’s website, will enjoy shorter loading time.

Let’s start

Let’s say in our website we use jQuery and Google 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 that everything has 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. Fortunately Google gives a free configuration wizard, but unfortunately it currently supports only some main Google libraries, and no external one. For example there’s 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: the sensor parameter 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, like this 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%2
Cother_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 script we can add as many libraries as we need, at the end will always be a single call in our HTML. How cool is that?

Any mistake?

To trap any mistake in the configuration script, we can take a look at the Google's response, it will tell us "Error: Invalid autoload". It can be tracked with the Firefox's Error Console, or simply go to the url and see its content, if there's something like var 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 there's only one main global javascript loading script ('cause we don't 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!

Helpful Resources