YUI Loader and Java

Introduction…
JavaScript is notorious for breaking a web page when a web browser doesn’t load all the script files quick enough. This has become an increasing problem as more and more scripts are loaded on the web page. As the price for internet has dropped while bandwidth has increased over the years, an increase in webpage load times has become less of a problem for those with access to cheap high speed internet. But this trend is not found currently in the mobile network market so bandwidth for these is still limited and expensive. In these instances, optimizing the webpage can improve the mobile device’s web browsing experience while limiting the amount of data usage. The indirect result of these optimizations translates to less network activity and better user experience. Now lets look at the various methods of loading JavaScript quickly in regards to advantages and disadvantages.

Assumptions…

Before I get started, I would like to make a few assumptions. Let us assume that the server is configured correctly to enable JavaScript caching as incorrectly configured servers may add to increased loading time of JavaScript files. Here are the properties of a correctly configured server:

  1. JavaScript files returns a mimetype header of text/javascript.
  2. Files are  gzipped.

In regards to webpage loading, a web page is only finished when every resource on the webpage has been downloaded.

The Basics…
By defining JavaScript functions inside the HTML script tag, the web page load is reduced due the fewer HTTP requests necessary to experience the web page. This method ensures that JavaScript loads quickly since the scripts execute when the web page is loading. Although the scripts may load quickly, it comes at a cost of losing the ability to cache and reuse the scripts. For modern web browsers, these web pages will load slower in the long run compared to loading cache-able JavaScript resources.

Although JavaScript files increase the web page loading time due to extra HTTP requests needed to load a web page, this increase in load times only happens on the first load as second request should load the cached file. The problem with this method of loading JavaScript files is the amount of HTTP requests directly correlates to the amount of script files defined on the web page. Even cached files need to be requested to figure out whether the file hasn’t been modified.

Can we do better?
With today’s trend of writing modular/plug-ins JavaScript files as seen in frameworks such as jQuery or Yahoo YUI, it would seem as if we are moving towards more files, but there are techniques to solve this. I believe the priority of optimizing scripts is:

  1. Combine JavaScript files
  2. Minify the script

The ideal way…
Both Yahoo and Google say that combining scripts will help solve JavaScript loading problem. Yahoo offers us the YUI loader to help solve the problem. The YUI loader dynamically combines all JavaScript files together so that module can easily be loaded on the page as necessary. But this comes at a cost. Google indicates that at the proxy level the scripts loaded this way will not be cached. Although this method is counter intuitive to caching, the benefits for most users is significant enough to outweigh the cost. Basically, developers can maintain rapid development without needing to combine all the scripts into one file while enabling caching for most users.
Of course this method of loading scripts depends on your audience user base. Obviously if your users have to access the web page from behind a proxy then it may be beneficial to manually combine all the scripts before deploying the website. Although I haven’t run any hard numbers, I have observed a 2 second improvement in loading time using Firebug.

Advertisements