One of the most effective ways to boost the application's frontend rendering is to minify the assets (CSS and JS) into single files and set a long cache-time so that they are not requested each time the page loads.

So, most of the times, the page loads one big CSS and one big JS containing the style and the js needed by all the pages.

The problem

I noticed how many times the loaded asset is not efficiently used since most of it affects elements not present in the current page.

To get an idea just install Page Speed and check the “Remove unused CSS” in the report.

The “wasted” CSS is often around 50%.

Modular assets minification

I started wondering if  a different, modular, approach would fit better in some circumstances.

By “modular” meaning that each page only loads its own minified assets which are loaded at every request.

The playground

I have quickly set up a simple “ test suite” to see if the modular approach pays.

To measurements have been done using the above mentioned Page Speed and Firebug on Firefox 7 on a quite fast Linux powered machine.

Also note that results depend on many factors so they always differ and are not meant to have any scientific value.

Anyway this is what I got:

All CSS minified

  • Wasted CSS: 50%
  • Load time with empty cache: 289ms
  • Load time with warm cache : 133ms

Page specific CSS minified

  • Wasted CSS: 26,3%
  • Load time with empty cache: 267ms
  • Load time with warm cache : not applicable since the css will always be requested

Conclusions

Even the test has some limitations it clearly displays that to balance the additional time needed by the browser to render the big CSS file, the waste percentage has to be very high.

I have a bad feeling knowing that a great part of the CSS is not used, being thus inefficient but the “cold numbers” say I don't have to worry about this.

What do you think?