What's the best way to load Javascript into a page to optimize performance?

Question

Is there a way to load my JavaScript into a page that will make it load faster?

Solution 1

There are a few things you can do:

1. Load the HTML and CSS before the javascript. This gives the browser everything it needs to lay out the page and render it. This gives the user the impression that the page is snappy. Place script tags or blocks as close to the closing body tag as possible.

2. Consider using a CDN. If you are using any of the popular libraries like JQuery many companies (e.g. google, yahoo) operate free CDNs that you can use to load the libraries.

3. Load code fron an external file instead of an embedded script. This gives the browser the opportunity to cache the JS content and not have to load it at all. Successive page loads will be faster.

4. Turn on zip compression on the web server.

Yahoo has a great page of suggestions that can help reduce page load times.

Solution 2

Besides Minifing, gziping and CDNing (new word?). You should consider defer loading. Basically what this does is add the scripts dynamically and prevent blocking, allowing parallel downloads.

There are many ways of doing it, this is the one I prefer

<script type="text/javascript">
    function AttachScript(src) {
        window._sf_endpt=(new Date()).getTime();
        var script = document.createElement("script");
        document.getElementsByTagName("body")[0].appendChild(script);
        script.src = src;
    }
    AttachScript("/js/scripts.js");
    AttachScript("http://www.google-analytics.com/ga.js");
</script>

Place this just before the closing body tag and use AttachScript to load every js file.
Some more info here http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

Solution 3

You might want to look at the way Google loads Analytics as well:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

As it is considered a "best practice" sort of script:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

Solution 4

A couple of Google folks announced an new open source project at Velocity 2010 called Diffable. Diffable performs some magic to incrementally publish only the portions of JS, HTML, and CSS which have changed since the version which is stored in the user's cache, rather than sending an entire new file when a new version is released.

This technique is insanely cool, and is currently most effective (and worth the effort) on websites where you are using a large JavaScript code base with small frequent code changes. This applies especially well to applications like Google Maps, which undergoes at least one release every Tuesday, and averages about 100 new releases a year. It also makes a lot of sense in general once HTML5 local storage becomes more widespread.

BTW, if you haven't seen Google's Michael Jones talk about change (in a geospatial context) it's worth watching his entire keynote at GeoWeb 2009.

Solution 5

To give an update to this question. I think that in modern, the way of non-blocking loading is not needed anymore, the browser will do it for you.

I have added a question to StackOverflow, I will add the content here aswel.

The only difference is that the load event will be fired a little earlier, but the loading of the files themselves remain the same. I also want to add that even if the onload even fires earlier with the non-blocking script, this does not mean the JS files are fired earlier. In my case the normal setup came out best

Now first the scripts, they look like this:

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles is here just an object that holds all the urls for all the files.

I have run 3 test, here are the results:

Normal setup

This is just the normal setup, we have 4 css files in the head, and 3 css files at the bottom of the page.

Now I do not see anything blocking. What I see it that everything is loading at the same time.

Non-blocking JS

Now to take this a little further, I have made ONLY the js files non-blocking. This with the script above. I suddenly see that my css files are blocking up the load. This is strange, because it is not blocking anything in the first example. Why is css suddenly blocking the load ?

Everything non-blocking

Finally I did a test where all the external files are loaded in a non-blocking way. Now I do not see any difference with our first method. They just both look the same.

Conclusion

My conclusion is that the files are already loaded in a non-blocking way, I do not see a need to add special script.

Or am I missing something here?

More:

• Article: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
• Question: https://stackoverflow.com/questions/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body
• Question: https://stackoverflow.com/questions/5765113/do-modern-browsers-still-limit-parallel-downloads
• Code: http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
• Code: http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/

View more solutions

Comments

[mxmissile]

Yahoo also distributes the YSlow plugin for Firefox which analyzes your page against the best practices noted above and gives you a report card. See developer.yahoo.com/yslow

[JasonBirch]

There are also techniques like asynchronous loading which can be used if you have site elements which don't require the script to be loaded when the page initially renders. Both this and placing the script close to the bottom of the page have limitations; in some cases you need to load the JS in the document head.

[JasonBirch]

Hey, you stole CDNing; it's supposed to mean doing something Canadian! ;)

[pinkeerach]

jajajaja good one

[Tim Fountain]

The difference is the location of the blue line, which I'm guessing is when the page starts to be rendered. From the end user's point of view, this is when the page is "loaded", as this is when they start seeing stuff. In the first example, render starts after the last JS file is loaded, at the 900ms mark. In the second, it's after the stylesheets are loaded (~700ms). In the third, it's after the HTML has been downloaded (~500ms). I would still go with the second approach, as you don't really want CSS loading after the page render.