Tweaking Your Site’s Performance To The Max
Ok, so you have a fantastic site design with all sorts of ajax features, an amazingly structured CSS file, you are ready for anything. You have a decent host, and you are ready to scale, so what next? Even though most users are now on high speed connections doesn’t mean that shaving KBs off page loads isn’t going to make a difference. Let’s walk through some examples of what you can do to speed up your website’s performance.
No matter what your site, you are still going to find that the majority of your traffic enters your webpage on an empty cache, so those heavy JS and CSS (and image) files are going to be retrieved directly from your server. Every HTTP request is done in parallel up to a certain number (2-4 depending on browser) at a time, so if you have 30 images, it will do 4 images at a time, in order until they are all done. This can mean even if users have a fast connection, it can take a longer amount of time to load a page if you have more than one combined JS/CSS file.
An Example (apologies to Everton)
Not to pick on Everton, as his site loads quite quickly for me, even overseas, but let’s just show what kind of improvements could be made. A quick look at his main page shows 26 CSS images, 28k of CSS in 5 files, and 22 JS files for a total of 170k. Amazing how it all adds up so quickly, isn’t it? How can we improve this?
Combine JS/CSS files
Pageload for first time visitors could be improved by combining what JS files are hosted on his local server together, so there would only be one HTTP get request instead of 22. The same goes for CSS. 27 requests could be shrunk down to 2. Additionally there would be less load on his servers. You might say, well that makes it harder to maintain code, but the idea being that you make a script that would combine the files, and you keep your nice, clean files on your dev environment (home pc).
Minify JS/CSS files
Minification is the act of removing whitespace, comments, and other unnecessary parts of files to make them smaller. For JS minification, I highly recommend Yahoo’s YUI Compressor, as it is easy to use and quite safe. For CSS compression, I would recommend ArtOfScaling’s CSS Minifier. On Everton’s CSS files, it compressed it an additional 40%. Add gzipping to the minified css files link will be an improvement over just Gzipping alone. Also, make sure you have gzip turned on for text-based files 
Minification has the added bonus of pseduo-obfuscating your sites valuable CSS/JS files to hinder site cloners and design thieves from easily modifying your sites source (as it is much harder to read after minification). Always keep a copy of your original CSS/JS with your comments for your own maintenance.
Combining images
Have a sick desire to speed up performance even more? Well, there are still many more steps you can go through to really slick down your website and make it SuperHighPerformance. One of the more interesting ways is the use of CSS Sprites. CSS sprites allows you to combine many images into a single image and use them in your css by using offsets. You can read about them in depth here. An important thing to note is that you cannot use this method on images that are tiled (repeated) as it will not work properly. However, it works perfectly for rounded corners, almost as if it were designed for it.
Well, this was just an introductory article to point some of you in the right direction on how to get started on making your webpages not suck down all your bandwidth every month, how to better be prepared for being dugg, and really (most importantly) how to give your new users the best first impression possible. With faster internet, even a 10 second page load can feel like an eternity, and, let’s face it, every little bit on the front end is not only more helpful, but also much easier than hacking through backend code to get minimal gains.
If you have any questions, or comments, or which topic you’d like me to cover next, feel free to let me know.
Bookmark & Share
Loading ...
Comment by Everton on 15 January 2008:
Fancy taking this site on as a case study, once the theme is finished? should be in a week or two ….
Comment by Kline on 15 January 2008:
Sure, why not, just let me know when its all up and ready.
If anyone wants to throw up their URL here I can give some quick pointers as well.
Comment by The Critic on 16 January 2008:
Now that’s a great reminder of what already know but which I keep forgetting.
Thanks mate!