Remove Unused CSS (PageSpeed)
The Pagespeed report will scan all your website’s stylesheets, and if it finds any CSS file with more than 2kb of unused code it will display this recommendation.
This optimization requires custom development to fully satisfy. WP Rocket cannot fix this for you.
Having unused CSS code will:
- Increase unnecessary data transfer,
- Slow down the rendering of the page, as the browser will have to read all the CSS before applying it.
You can read more about this recommendation here: https://web.dev/unused-css-rules/
Why does this happen?
When you're using pre-built WordPress themes and plugins, they will typically contain much more CSS code than is necessary for each page because the theme author cannot predict how the user will build their site. These themes have many different blocks, styles, skins.
In many cases, themes using visual builders contain libraries of visual elements like grids, accordions, sliders, etc, and all that CSS might end up being loaded, despite if it’s being used or not.
So, for example, the homepage might have a block showing the latest posts, but inner pages might not have this. Nevertheless, the homepage and the inner pages often have the same stylesheet.
This means that the CSS for a different page will have to be loaded on the homepage and vice versa, adding unnecessary code.
How to fix this?
It's almost impossible to automate this accurately, and difficult to do even by hand.
This article explains all the reasons why:
By activating the Optimize CSS Delivery option, WP Rocket will inline the critical styles required for the first paint of the page and will defer the loading of the CSS files.
This will partly comply with Google’s recommendation. However, we cannot remove unused parts.
So, for now, to truly satisfy this recommendation, you would have to custom-code the CSS of your site.
If there are entire files loaded on some pages which are not needed at all, you can remove those by using the Asset CleanUp plugin.