Since I’m going through the old website and resurrecting pages which seem to be still sought after by visitors to my website (I can tell this based on search engines terms they use and what they search for then on my website), I’ve come across this old one, talking about optimizing the loading speed of a web page. I think it’s worth dusting this one off, as I am still seeing this sort of “mistakes” applied to tons of sites out there. This touches also a bit on the bandwidth optimization I wrote about ages ago, so even though it’s an old post I thought worthwhile re-posting this again.

If you have ever used any of the online optimization tools (www.websiteoptimization.com springs to mind) then you must have noticed that the recommended size for a CSS file is 4080 bytes! That’s not too much you would argue, and indeed, on some big sites you might need more than that. The reason for that is so it fits into fewer “higher speed” (basically 3 x 1k TCP/IP packets) which means the browser will finish loading the CSS before it finishes loading the page itself, thus by the time the whole contents of the page becomes available (or even parts of it), the browser will know how to render it already. If the CSS takes longer to load, you will notice that the page might be rendered first with the “default” (read “browser built-in” stylesheet) and then once the CSS is loaded the styles would be applied to the page thus triggering an annoying flickering and possibly a few screen refreshes — not the most pleasant experience for your visitors!

So assuming you have set all the CSS classes, IDs and tags that you want to format in your CSS and there is no other way you can chop off anything from it, yet the file is still say 10K in size. That is not that bad for the average Internet user nowadays who has (at least) 512K on his/her broadband connection. You can argue that 10K will take 10 x 1kb TCP/IP packets to reach the user. But still, there might still be things that can be done to optimize the size of the file. And if nothing else, that might mean that your hosting bill might get lower (if you do pay per Mb transferred)!

The first and most obvious thing to do is obviously cut down on the spacing (see the previous article about optimizing HTML by reducing whitespaces in the document), however that’s trivial and I’m not going to bore you with it. It might cut down possibly 1 of 2 Kb of your file. That still leaves an extra 4-5Kb which you might not be able to get rid of entirely but you might be able to reduce it to possibly 2Kb or so.

So let’s have a look at some really simple optimization techniques you can apply to your CSS. For instance, consider the following CSS lines:

font-family: Verdana,Tahoma,Arial,sans-serif;
font-size: 10px;
font-weight: bold;
font-style: italic;

Few comments come to mind straight away:

• First of all, you have set up your styles such that they look best with the first font you are specifying here (Verdana) which means the other fonts “will do” but they won’t look that great. Since the fonts you have specified are quite common and chances are any Windows user would actually have the installed, why go to great length of specifying 2 other alternatives? After all W3C recommends that you should always specify a generic font family as a backup solution — so the sans-serif is justified, but the others are not…necessarily! 🙂 So it’s probably safe to get rid of Tahoma and Arial and only stick with font-family: Tahoma,sans-serif; !
• Secondly, surprisingly for some, all of those statements above can be combined into one single CSS line! Simply look up the font CSS declaration, and you will find that the above 4 lines can be reduced into one single one:

font: italic normal bold 10px Verdana,sans-serif;

And if you do the maths you’ll find out you just saved yourself about 50 bytes! How many of this construct have you got back in your CSS, now? 🙂

And as you might guess, the same can be applied to the margin property. Why bother with

margin-left: 1em;
margin-top: 10em;
margin-bottom: 10em;
margin-right: 1em;

when you can simply say:

margin: 10em 1em 10em 1em;

(starting from the top, clockwise: top, right, bottom, left).

And the same goes for padding, of course. And border!

So now, going back through your CSS you might find that about 1Kb is gone which gets you even closer to the “desired” target of 4080 bytes!