How to Remove Dead Rules from Stylesheets to Improve Page Speed
Considering many of us are using third party CSS libraries like Bootstrap and Font Awesome, one of the biggest bottlenecks in reducing page speed is to use them efficiently.
It is no secret that improving page speed improves user experience and gives your site rankings a boost. Once you have picked up low hanging fruits like reducing and lazy loading images, compressing all the content etc, its possible to hit a wall. This article is about shrinking some of your compulsory or legacy CSS files using PurgeCSS and improving your page speed score.
I was trying to improving my React based homepage and was ran a Lighthouse audit. One of the recommendations was to "Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity." with potential savings of 38K.
These were the three files we are using in our React app compiled by webpack into the bundled CSS file referred to above.
So two of the three files are dependency and as you can see they are quite large and form the majority of the above bundle.
PurgeCSS
Here in I ran into this excellent project. Among the ways it could be used, I could not find a way where I could use it such that it picked up all the HTML from my React components (JSX code). So with a small hack I used it using its commandline interface.
- Just use your chrome devtools to inspect your page's final state and copy the HTML as shown below.
2. And copy it
3. Now dump it in an HTML file. If your entire app is part of a single bundle, this HTML should suffice to capture all rules. If you are using lazy loading of React modules, you may have to repeat this exercise with every distinct page. The good thing is you can append this entire HTML into a single file.
4. Install PurgeCSS
npm i -g purgecss
5. Now use purgecss to generate just the relevant CSS like this
purgecss --css /path to css/bootstrap.css --content /path to html/Browsee.html
6. This returns JSON output with field css as the compressed CSS. Replacing this CSS with original bootstrap.css, we reduced our bootstrap.css by 164K.
Repeating the same exercise with fontawesome.css.
purgecss --css /path to css/fontawesome.css --content /path to html/Browsee.html
You should also confirm that all your pages are looking as expected. If there is some distortion, chances are you missed adding its HTML to your HTML file.
As you can see I reduced this recommendation to now just 11kb. I digged deeper and it doesn't seem like I could further reduce thsi CSS. Although I could consider making part of it inline.
But this is great, I consider it an absolute win. In Google's Lighthouse recommendation I also came across another tool critical to achieve similar results. I haven't tried it but do consider using it. Hope you find this useful!
If you would like to see how many of your users are facing slowness and suboptimal experience, you should consider using Browsee. It not only automatically detects such sessions but shows you an entire session replay so nothing is left to guesswork. Looking forward to hear from you.
How much is a great User Experience worth to you?
Browsee helps you understand your user's behaviour on your site. It's the next best thing to talking to them.
