Loading your javascript files asynchronously

So it’s widely understood now, that performance has a direct effect on the traffic of our site.   This puts performance at a much higher priority than before.. especially if your site traffic is what pays the bills.  Steve Souders began working on website performance, initially thinking that backend performance was the key, but he quickly found out that most of the performance could be gained on the front end, with far less work than optimizing sql queries and refactoring backend code.  Since he started publishing his work, we have seen a progression of understaning what helps our websites perform better.  Here is a list of things that we can look to accomplish quickly and see vast performance improvements.

  • minification of files
  • zipping css / js files
  • pulling all css files into one
  • pulling all js files into one
  • creating image sprites that combined many images into one big sprite
  • avoid using IE specific css expressions
  • using a cdn to serve files
  • loading js at bottom of page
  • serving files from a different domain
  • serving files asynchronously after page has loaded

Want to know more about the above performance enhancements?  Go to the Yahoo Developer article explaining them in detail.   Also keep in mind that your mileage may vary.  We found this out at my current job, since we took are most popular pages, and removed all the less important parts of the page, and added them via ajax, after the page loaded.   This made the pages load screaming fast!  However, our server peaked out very quickly because it was doing about 5 times the amount of requests.  Each ajax request, even when cached, requires resources from your server.  Needless to say, we don’t have the money to drop into several more servers, so lazy loading via ajax will have to wait. Keep things like that in mind when adding performance techniques to your site.

Okay Okay, get on with it!

So you have an idea of whats going on with website performance, and the last part of the list was about serving files asynchronously after page load.   Here is a little script that simply loads files after the page has loaded

And to load these files, you only need to call the function with the script as the argument

Really, that’s about it. Fairly simple script as you can see, yet very powerful, this was basically borrowed from Google Analytics implementation of their asynchronous loading analytics.
One thing to note: I am loading the files in the opposite order than usual. The jquery.js file should be loaded first in the dom.. but since we are using insertBefore.. the first must be last and the last must be first.

4 comments

  • Tehkseven

    I was searching for info on using Ajax to load elements and hadnt considered the performance issues you outlined. That’s definitely a consideration I need to keep in mind.

    I guess the amount of content you can load via Ajax and still keep the servers stable, is unique to each setup. I guess I can only test to find out.

    Thanks again for the info

    • Dave Gregory

      you bet. Yeah. it was surprising for us as well. Thankfully being on cloud based servers now, we can just open up a new slice and we’d be fine but that wasn’t the case when we tried at first.

  • Tehkseven

    Dave you’re a star. Thanks a lot. I’ll see if we can implement that. We use a CMS as our core but I’m sure we can implement it.

    I really should get the files on to a CDN. Wanted to for years and never got around to it. They are at least on a static file server. Nginx.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>