Dynamically load CSS

Question

I'm using LESS for creating CSS and I'm considering using something like grunt-render on the server side in order to only load the CSS / JS that is needed for that page.

My goal is to reduce overhead for page load.

My CSS is fairly big, but I wonder; Will it matter if my CSS is minimized anyway? Will a few bytes less make any difference?

Answer 1

Yes and no. Yes: smaller files of course == faster download. But no: Unless your CSS is just completely out of control, it is likely smaller than the average image on your site. Plus, it will be cached after the first page load.

If you're looking for a speed uptick, there are better ways to spend your time optimizing your site.

In no particular order (other than images being a biggy):

• optimizing images (there are grunt tasks for this too)
• switching icons to a font (fewer server requests) and using CSS sprites for the rest (grunt! https://github.com/filamentgroup/grunticon and https://github.com/Ensighten/grunt-spritesmith)
• minifying and concatenating css/js files
• move js calls to the footer
• optimizing your JS - manipulate and query the DOM as little as possible. This wont help load but can have a serious impact on performance.
• optimizing your CSS (I've noticed that LESS' nesting conveniences cause me to write far less efficient CSS selectors but in the end, this is probably trivial)
• use CDNs for libraries as visitors may already have them cached and you can get more concurrent asset loading in the browser (actually not sure if the concurrency thing is actually still true in 2014!)
• setting up your server with gzip and proper expire headers...
• jeez, a lot of things

https://developers.google.com/speed/articles/

Answer 2

As one who has/had a rather large CSS file, I know that any style sheet can be reduced significantly. I am in the middle of reducing my style down to a minimum. But then again, my site is not too complicated really. It is often argued that CSS, even for an advanced site, does not have to be big.

I assume the same can be done with JavaScript. (But please do not scream at me if you disagree.)

There is a value to reducing CSS and JavaScript. But because these are text based, the download speed differences can be rather small. However, it is a good idea anyway. I am not sure I would complicate things by having dynamic CSS/JavaScript. It may be a lot of work for small gain. It may be a better exercise to just find clever ways to reduce the use of these technologies down to the smallest footprint possible then not worry about it.

BTW- I find that reducing images provides the best performance improvement overall. Something I still have yet to do.