OnDemand Javascript Loading

Do you know what contributes to slow page loading?  First of all it is the total size of all your scripts, css, and wireframe (html).  After that the number or connections that you make to the server to load the data.  There is 1 connection for each script, 1 for each css file, 1 for each image in your html, and 1 for each ajax request you make.  Most browsers allow about 8 simultaneous connections.  If you use more than 8 the extra connections have to wait for one of the eight to finish and then they start.

The key is to balance the number of connections and the size of the downloads to achieve an optimum user experience.  If you can get your head section total content to about 8k you can create pages that will load like lighting on any connection.

Ha! Ha! You say.  There is nothing useful that can be loaded in 8k!  What if I told you that most if not all of your Rich Internet Application (RIA) pages could be shrunk so that the initial download was around the 8k size?

The key is to put the bare minimum javascript + css in the head section of the document and load the remaining javascript and css on demand.  Google has a javascript loader that will load some of the most popular javascript frameworks in use today.

Your page should include html for a progress indicator, css for the progress indicator, and the minimal javascript to load all the other required javascript and css files.  If you do this, you can easily get the initial page load to 8k, if you use images in your progress indicator your size could easily double but it is still a fraction of the original size of your page.

Enough hype, on with the good stuff.

The first thing we need is a function to add add a script tag to the head section of the document.

function addScriptTag( id, src ) {
    var head = document.getElementsByTagName('head')[];
    var script = document.createElement('script');
    script.id = id;
    script.type = 'text/javascript';
    script.src = src;
    head.appendChild(script);
}

function myPageLoad() {
    var scripts = [
        'http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js',
        '/some/other/file/for/use/in/your/page.js'
    ];
    for (var i=0,size=scripts.length; i < size; ++i) {
        addScriptTag( 'script_'+i, scripts[i] );
    }
}

As you can imagine the possibilities are limitless, you just need to remember to balance the number of simultaneous downloads and the size of the downloads.  Of course if your end user is looking at a progress indicator on the screen that appears almost instantly, there is a good chance they won’t get too annoyed about you downloading 100K+ in javascript libraries in order to give them the best user experience possible.

Can you apply the same technique to load your css on demand?  YES!  All you need is a function to create the link tag in the head section of the document like we did for the scripts

function addCssLink( url ) {
    var head = document.getElementsByTagName('head')[];
     var link = document.createElement("link");
                link.setAttribute("type", "text/css");
                link.setAttribute("rel", "stylesheet");
                link.setAttribute("href", url);
                link.setAttribute("media", "screen");
                head.appendChild(link);
}