Grauw’s blog

Preprocessing CSS with XSLT

March 3rd, 2006

For, 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