by 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.
