Faster page loads by combining/compressing Javascript & CSS
May 29, 2007 by Jason · 3 Comments
I just saw an interesting article and had to test it out on a new site I'm developing (sorry no link to that). The article "Make your pages load faster by combining and compressing javascript and css files" includes a PHP script and directions for easily and automatically combining and compressing your Javascript & CSS pages.
Now, I know what you're thinking... If you've got 4 JS files for a total of 50KB then combined they're still going to take 50KB. Yeah, that's 100% true. You're probably also thinking, "why should I compress my pages when httpd can do that on the fly?" Well, yeah, that's also true.
The benefit here is that not only are the combined & compressed versions cached so the compression only occurs once per change (avoiding the CPU & memory usage from that task) but in combining the individual files into one, you're avoiding the overhead of having to open multiple connections to a server in order to download all of the files.
As I mentioned above, I tried this on a new site I'm developing and it cut the page load time down from 1.6-1.7 seconds to 0.8-0.9 seconds (according to the timer in the "FasterFox" plugin for Firefox) which is pretty substantial.
A much better way to measure page element loading time is to use FireBug firefox plugin.
In the Net tab it has loading times for every page element and provides easy access to response and request headers and other stuff.
Thanks for the tip. I'll check that out.
Sweet tutorial, just what I have been looking for.
I have added you to Stumbleupon.