Show full Blog

  • Improving your Web Site's Front End Performance

    Last week Steve Souders of Google via Yahoo! gave a talk at Myspace regarding improving web site front end performance. See http://stevesouders.com, especially the section about his book, cuzillion and ySlow. This talk was about dramatically improving you site’s performance without writing a lot of code. He has a list of 14 rules that you can use to achieve this. The list has some very simple rules like make fewer HTTP requests or put stylesheets at the top. But the part that intrigued me the most was his discussion about how much of a bottleneck loading javascript is for most all sites and some tricks you can do to eleminate this problem. It turns out that when you load javascript via a script tag in the head section of your html, the browser will load each in order, and forego any parallel optimization it would otherwise be doing. He lists around six different methods, but there are 2 that stood out as being most effective for most situations. Those are XHR injection and Script DOM element. The first is best for same domain and the latter for cross domain scripting.

    Script DOM element (best for cross domain) is a fairly simple way of loading javascript AFTER the page has loaded AND rendered. So you only want to do this for script that doesn’t need to run before onLoad. But most all javascript is intended to run after onLoad anyway. Basically you just create a script tag dynamically and add it to the head section of your HTML page:

        <script type"text/javascript">
            var se = document.createElement('script');
            se.src = 'http://anydomain.com/yourScript.js';
            document.getElementsByTagName('head')[0].appendChild(se);
        </script>
    </body>
    

    This replaces the usual script tag put inside the head section:

    <head>
        <script type"text/javascript" src="http://anydomain.com/yourScript.js" />
    </head>
    

    Notice the placement of the end body tag </body> directly after the script to dynamically load the javascript. So instead of loading the javascript before even reading the body, it will load everything first, then load the javascript while it renders the html. Makes your users much happier about the load time.

    In jQuery you can include the minified jQuery in a script tag in the head section. Then add the following to the bottom of the body to acheive the same result:

        <script type"text/javascript">
            $.ajax({
                type: "GET",
                dataType: "script",
                url: "http://anydomain.com/yourScript.js"
            });
        </script>
    </body>
    

    The second method, XHR injection, has the same great performance as the script DOM element with the added advantage of not triggering any browser busy indicators. XHR stands for XMLHTTPRequest. Here’s how you inject your script with this method:

        <script type"text/javascript">
            var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
            xhr.onreadstatechange = function() {
                if (xhr.readyState != 4) return;
                var se = document.createElement('script');
                se.text = xhr.responseText;
                document.getElementsByTagName('head')[0].appendChild(se);
            };
            xhr.open('GET', 'http://anydomain.com/yourScript.js', true);
            xhr.send('');
        </script>
    </body>
    

    For this one in jQuery you can again include the minified jQuery in a script tag in the head section. And add the following to the bottom of the body:

        <script type"text/javascript">
            $.ajax({
                type: "GET",
                url: "http://anydomain.com/yourScript.js"
                success: function(responseText){
                    var se = document.createElement('script');
                    se.text = xhr.responseText;
                    $('head:first').append();
                }
            });
        </script>
    </body>
    

    Lacking a ‘script’ dataType, this one will perform an XHR injection upon a successful get. That’s it. Now you have dynamically loaded javascript in your application!

    leave a comment