This entry is the second part in a series of articles about website performance tuning. If you haven't yet, read the first article before you proceed with this one.

So I went and optimized this very website for a bit as well. I changed my css.php which I mentioned earlier in 'Compress your CSS' to perform gzip compression, resulting in only 3kb of CSS. On this site I didn't need the functionality my WP-CSS-Streamliner plugin offers because I only have one CSS file on here anyway. Here's the code for the new css.php which serves compressed CSS on a per-file basis:

1. <?php
2. ob_start("ob_gzhandler");
3. header('Content-type: text/css');
4. if (!preg_match("/^([a-zA-Z0-9_-]+.css$)/", $_GET['file'])) {
5. die('not a css file.');
6. }
7. if(file_exists($_GET['file'])) {
8. $sText = file_get_contents($_GET['file']) or die('Could not open file.');
9. $sText = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $sText);
10. $sHash = md5($sText);
11. header("Last-Modified: ".date("D, d M Y H:i:s T", filemtime($_GET['file'])));
12. header("ETag: "{$sHash}"");
13. echo str_replace(array("rn", "r", "n", "t", ' ', ' ', ' ', ' '), '', $sText);
14. }
15. else {
16. echo 'The file named "'.$_GET['file'].'" was not found on the server!';
17. }
18. ob_flush();
19. ?>

Note: css.php must be placed in the same directory where your CSS file lives and called like css.php?file=whatever.css.

Now let's have a look at the Javascript situation.

Javascript

Unlike Eurobands this site uses Prototype.js and Scriptaculous for all DOM manipulations and visual effects. Would I have built this site today I'd probably have used JQuery because it's a lot less bulky and I like programming with it better. However I can't be arsed to change everything which is why I decided to just keep it for now and optimize it. Luckily I found Alister Cameron's post 'Prototype.js + Scriptaculous in one file under 50Kb!' which made a hell of a difference. If your site uses Prototype and Scriptaculous just like mine I highly recommend using Cameron's optimized script. So I went with Cameron's script and pasted my own JS code at the bottom of it. I'm serving it to you using the same technique used in the script earlier in this post. Almost 200kb of Javascript is now reduced to only 29kb in one file. Nice shot if you ask me!

Frameworkmania

The above brings up an issue I forgot to mention in my previous article. A lot of people go way overboard in their desire to use each and every slick looking Javascript effect on the planet to spice up their website. In order to accomplish this, a plethora of plugins are installed which often results into all Javascript libraries/frameworks known to man to be loaded on just one webpage. This results in hundreds of kilobytes of bulky Javascript that needs to be loaded, parsed and executed. Needless to say this results in a completely crappy client side experience, even if the script(s) happen to load fast.

Therefore, if your site's performance matters to you (and it should because who would want to give their visitors a crappy time?) I have the following advice:

Use only ONE Javascript framework for all your fancy DOM manipulations and effects.

"OMG! But I need all these plugins!", I hear some people exclaim. There's several things to consider. First of all you may want to spend some time in looking for a set of plugins that do everything you want based on just one JS framework. You may need to make some compromises or sacrifices in the process. If it really won't work out you may want to ask yourself: "Do I REALLY need all this stuff on my site?". The answer is usually: "No.".

For Eurobands I've chosen to use JQuery. This resulted me in having to spend some time looking for a set of plugins that were all JQuery based and having to do some hacking of my own to get a JQuery live commenting plugin to do what I wanted it to do. I made a small sacrifice as well when it comes to showing images and videos on the site. Even though I like WP-Lightbox a bit better I choose to use ThickBox. Why? Because it uses JQuery like all my other stuff on there does. I deliberately choose to not load the entire Prototype/Scriptaculous kit just because my image viewing would look a little bit nicer. And I think you might want to make similar choices when choosing what to use on your site.

So here we are. This site is strictly Prototype/Scriptaculous based and Eurobands is strictly JQuery based. I won't make any judgements on which is better because I feel you should just use what you feel most comfortable with. For me that happens to be JQuery. When I rebuild this site I might choose YUI because it looks pretty damn great to me and I'll be using it a lot at work.

Whatever you choose, for the love of God: pick only one!

A potential next step on the road towards ultimate website performance is to create a solution that merges all included Javascript files into one, compresses them and serves them into one file near the bottom of the page. I'm not completely sure about it however because I expect lots and lots of scripts to break and to receive lots of "OMG! It broke my site!"-style reactions if they haven't been written as proper progressive enhancements. For now I believe the strategy I used as described in this article will do.

Happy optimizing!