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:
- Wasted CSS: 50%
- Load time with empty cache: 289ms
- Load time with warm cache : 133ms
- 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?