Grauw’s blog

For backbase.com, we made an XSLT which preprocesses CSS by removing all comments and excessive spaces, and concatenates multiple CSS files into one. The improvements in file size were as follows:

	Uncompressed size	ZIP compression (normal)
Unprocessed	23,2 kB	6,58 kB
Processed w/ XSLT	17,0 kB	4,69 kB

These numbers comprise 4 CSS files, but we don’t include the skin’s CSS yet, which is another 15,7 kB.

More importantly than the size reduction, we only need to load 1 CSS file now, reducing the latency significantly. This latency is ~300ms per file worst-case (Asia, from NL server). Given that the browser only uses 2 threads at once, reducing 6 CSS files to 1 CSS file means gaining up to a second in loading time.

The XSLT can do the following things:

• Remove all comments and excessive spaces.
• Concatenate multiple CSS files into one.
• Let you filter imported stylesheets based on browser (flavours of IE5).

Usage instructions can be found inside the XSLT file.

» Download the CSS preprocessing XSLT