CSS optimisation / best-practice
Hi everyone,
I've been acquainting myself with the Google Search Console more recently, and I'm getting reports about pages being slow to load.
A big drain seems to be our CSS resource. We did some redesign work on the community in 2015, and we have a single large file of CSS being served where we've overridden some of the default behaviours and added customisations as time has gone on. This file is now >13k lines long and is the majority of community pages probably use less than 10-15% of the file in one go.
I'm just wondering if anybody else has had to deal with bloated CSS contributing to poor performance? I'm considering using smaller CSS files and calling them from specific components, that should allow me to maintain any overrides present and only call the CSS when it's needed. Is that something worthwhile? It's worth noting that a lot of the performance-related bits are JS specific, and that's not directly in my control so I'm trying to fix what I can first.
TL;DR - I need to optimise my 13k-line CSS file and I'm contemplating splitting into smaller 'per component' files