Introduction to CSS optimization
Web pages have got bigger and more complex over time and while internet speeds have improved, the extra size and complexity impacts negatively on performance.
Poor performance impacts on your user experience, and now smart search engines like google actually use the performance and responsiveness of your site as a factor when determining your ranking in their search index. If two websites have similar content optimisation you can expect the one with better user experience to rank higher in google.
As most marketers know, if your not on the first page of google for your target keywords, your nowhere.. because most of the clicks land on the first few links in the search result. So if you want a great user experience and a better chance of hitting that top spot in searches then you’d better bring your a-game to optimisation!
How CSS effects your website performance
CSS can be render blocking – that is as soon as your browser finds a <link> tag it stops other downloads and processing while it retrieves and processes the CSS file. Crazy! - even if the file is cached the render-blocking still happens while the CSS file is parsed.
Contrast that with javascript which has the ability to download scripts in parallel depending on your use of async or defer. It would be great if they add that to CSS one day.
If you have multiple CSS files you really want to merge them into one .. in the correct order of application tool, as each separate stylesheet will cause separate trips via the network.
File Sizes
If you have a large stylesheet then it will not only take longer to download though the network, it will take longer to parse and process into the internal object model. The smaller you can make your CSS file the better. If you can make it small enough to fit in a network packet size then even better still :)
CSS Bloat
As a site is maintained over time developers tend to add new styles to support new features, but because it is difficult to know if a particular style is used or not, they also tend to leave the existing CSS in place.
While this is a sensible or at least safe development approach, over time the stylesheet can end up with hundreds of selectors that are simply not used.
Render Tree Construction
There are a few good detailed articles out there on how the browser constructs it’s render tree, but you don't need the detail (essentially it captures both the content from the DOM (document object model) and styles into one tree).
As you can imagine there is a fair bit of work to construct the render tree as the browser has to check every single node and determine which CSS rules could be attached - the more complex your CSS and HTML the longer this will take.
Stylesheet Templates and Template Websites
When you buy a website template it typically comes complete with numerous pages, features and styles that you will never use. And it can be very difficult to know which exact CSS selectors are used, how they are combined and which pages might be using them. It also can take hours to identify that unused styles and remove them - a painstaking process, consequently developers often just leave the pre-made stylesheets alone instead of optimizing them.
For example, the last stylesheet template I used I only used 10% of the styles, and 90% of the CSS file was completely redundant and it was a waste of time to force the browser to download these styles and check every single entry for matches in the HTML.
How to optimize CSS manually
First determine if you need to optimize or not. I like the Google Page Speed tool. They constantly improve this tool (2 updates so far this year 2022). Page Speed will give you a performance score from googles perspective and you definitely want to be scoring over 90% to maximise your chances.
The tool will also give you a bunch of additional things you can do like optimizing image types and minifying javascript etc.. personally I like squoosh for optimizing images and is good for javascript.. and you should do those things, but I'm going to focus on the CSS aspects.
Use the network panel in devtools in your browser to identify how much data is being downloaded, what types, and how many requests overall. I use Google Chrome below but Edge and Safari have some useful tools too.
Inside Chrome press F12 or from the “more tools” menu choose “Developer Tools” to open the devtools. Then switch to the network tab and make sure you have disabled the cache so you get the true picture of what performance is like for a new, first time user browsing your website.
I cannot tell you how many websites I’ve seen which have megabytes of download where the developers or administrators didn’t appreciate that it loads “fast” for them because they have megabytes of JS, images and CSS cached on their computer..
View the waterfall chart to check the order of downloads and how fast they are coming though the network and what is being downloaded in parallel.
From the More Tools option, you should check the DevTools Coverage panel to see which CSS is actually used. The first time you open it you will need to refresh your webpage to get it to scan the CSS. Now is the painful bit you have to be careful of - just because Chrome says a bit of CSS is unused on your page it doesn't mean it's unused on your website. You can take notes of which CSS selectors are not used but unless you have a one page website, now you need to check all the other pages (and popups) on your website to ensure they are not used there either. Assuming they are not, you can safely remove the CSS.
How to optimize CSS automatically
Ok, so I am going to cheat a little on this and just show a video of how to optimize your CSS easily. Hopefully you can understand my kiwi accent. Goodluck with that :)