A good user experience requires responsiveness. Speed. Web pages that don’t make you wait more than a couple of seconds while they load, or even worse, load in bits and pieces and reorganize themselves in front of the user; “that’s the way these things work” isn’t good enough an excuse. Your users don’t want to know how your site works (even if your site is about how the internet works – they want to read about the problems, not experience them), they just want to get things done and move on. As Eve says in Gaiman’s The Sandman Vol. 6: Fables and Reflections, “Some people have real problems with the stuff that goes on inside them … sometimes it can just kill the romance”.
What we need, then, is a small number of reasonably sized files: how do we get to that?
Bring ‘em together
Your users don’t need to have 3 style sheets. They need to see your page. While you’re working, you should definitely split things up to keep them manageable, but in production? Nope. You might decide to split because you don’t want your users to have to download content they don’t need, but that can be false economy in most cases – it robs you of your ability to use caches to your advantage. If you use a lot of different files, users will have to download something every time they hit a new page. By contrast, if you use less files, most subsequent requests to your page will be served from the cache – much faster.
An easy way of consolidating files before releasing them is to use a simple MS-DOS batch file like:
So now we have a couple of files, which are sort of huge. Ouch. What next?
Cut the flab
No, I’m not advocating unreadable code. You need neat, readable code if you want to maintain it. However, that neat, readable code is not what your users need – it slows them down unnecessarily. What you can do is, grab a code compressor like Julien Lecomte’s YUI Compressor and use it to crunch your scripts and styles. YUI Compressor requires a Java runtime, and can be run from the command line. I use the following batch files for it:
Both these batch files take a file name (without extension) as a parameter, and will create a file tagged –min. For example, if we call compress-js myscriptfile, the batch file would look for myscriptfile.js, and compress it into myscriptfile-min.js
To give a trivial example
This 221 byte file …
… gets compressed into an 85 byte file:
The reduction is even higher if you have local variables, since their names get munged, saving more space.
In Apache, we can do this through an .htaccess file:
I’ll get back on how to do this in IIS at a later stage, since I don’t have an installation I can mess with right now 😛
To gzip the file, we just have to use a blindingly simple command:
… And that should hopefully keep everything running smoothly.