Perfmatters added a new feature in its January 19 version 1.8.5 to remove unused CSS. I will never tire of recommending this plugin which has become a must-have add-on if you want to improve the performance of your blog.
For the 25 dollars a year it offers a powerful tool to which they keep adding improvements.
I have already tested it on WordPress 5.8 and 5.9-RC and nothing has broken so far. Although I already had the unused CSS very much under control through the Script Manager of this same plugin, just by activating this option you can save at least a couple of requests and some Kb.
why remove unused CSS?
The usual warnings in PageSpeed of "Remove unused CSS" or"Reduce unused CSS content" usually appear when CSS loaded by a plugin or template is not needed or not used on a particular page
Developers normally only queue a stylesheet if it is being used. However, many times additional styles are also added that may not be needed. This results in a lot of unused CSS, which slows down loading
Occasionally, it can also result in"Remove resources that block rendering" warnings.
Beyond the placebo of getting a better PageSpeed score, removing unused CSS has a major impact on decreasing the time it takes from when the page starts loading until any part of the page content is rendered on the screen(FCP), the time it takes for the main content of a web page to download and be fully ready for the user(LCP) and the time from when the page starts loading until it is fully interactive(TTI). In short, you know, an important part of the history of the Core Web Vitals.
how to find unused CSS?
The easiest way to find unused CSS is to test the URL with PageSpeed. If there is unused CSS, you will see the warning, which will only be triggered if it is above the threshold of what Google considers important enough to warn, so if the perceived loading speed (the actual speed you experience) is good don't get too hung up on it.
The other way to find unused CSS is to use Chrome DevTools. Open the inspector in Chrome (Ctrl+Shift-I), press Shitft+Control+P, type "Coverage" and there you will find the unused bytes for both CSS and JS. In red the unused and in blue/green the used.
From here, and understanding that you recognise each CSS, what it does and whether you can remove or disable it from the page where you are measuring, there are several options, such as replacing certain plugins with other lighter ones, reviewing or considering changing the template, using the Script Manager to selectively disable JS and CSS, etc.
The easiest way to eliminate PageSpeed warnings is to activate the"Remove unused CSS" function in Perfmatters, which does it all automatically. They claim to have tested it on hundreds of URLs (with different templates and configurations) and report these results:
Average FCP decrease of 15.20%.
Average LCP decrease of 19.66%.
Average TTI decrease of 14.95%.
However, remember that it is still in Beta phase and the results may not be the desired ones or may even break something, so it is advisable to test it in a staging, even when it comes out of the Beta phase.
Before activating
Perfmatters history recommends that, before enabling this option, you remove any existing CSS preloading that has been configured in Perfmatters (excluding the local stylesheets of the google Fonts) and NOT merge the CSS.
CSS merge is a deprecated optimisation technique since HTTP/2. In some cases, CSS merge can even be detrimental to performance. Again, remember that every page will behave differently depending on its configuration and that it is best to test and observe until you find the best error-free result for your case.
You should also be aware of possible configurations of other performance or caching plugins you are using that may conflict or be overridden by having the same functions activated.
Once activated you will find two options:
Una vez activado encontrarás dos opciones con dos configuraciones:
1- CSS method used (default): the CSS used appears aligned above the fold in the site's source code. This option is the best for PageSpeed scores.
1.2 -File: the CSS used is placed in a separate CSS stylesheet (file). This option is best for the user and perceived performance, as the file can be cached on repeated visits and reduces the size of the HTML document.
2- Style sheet behavior
2.1- Delay (the default and recommended).
Your CSS used to be inline and all CSS stylesheets (CSS not used) are delayed and loaded with user interaction.
2.2- Async
Your used CSS is converted to inline, and all CSS stylesheets (unused CSS) are loaded asynchronously. This method can help avoid pop-in, since the stylesheets are executed asynchronously while the page loads. This method will result in a slightly higher LCP/FCP than the previous delay behavior.
2.3- Remove
Your used CSS becomes inline, and all original CSS stylesheets (unused CSS) are removed. This is the most aggressive method, but it is also likely to require adding exceptions. Only recommended for advanced users.
All used CSS generated by Perfmatters will be stored locally in this path:
/wp-content/cache/perfmatters/yourdomain.com/css/
This is what the CSS generated by Perfmatters looks like, for pages, posts, categories, tags, searches, the homepage or 404s.
In the"Excluded Stylesheets" box you can exclude specific stylesheets from the "Remove unused CSS" function by adding the full source URL(whatever.css), or by adding a single part of the source URL. Format: one per line.
In the following"Excluded Selectors" box you can exclude specific CSS (selectors) from the "Remove unused CSS" function by adding the element id, class name, etc. (#id, .class). Formatting: one per line.
It is likely that at some point you will need to delete used CSS. For example, after redesigning a page or after adding a new element. To delete the generated CSS and have it recreated after subsequent visits, simply click on the option at the bottom of "Clear Used CSS".
You can exclude an individual post, a page or a custom post type from using the Clear Unused CSS function. In the editor, on the right hand side, uncheck"Unused CSS"
This will exclude the entire page and can be useful for, for example, a cart, checkout or contact page that might have more problems than the rest of the site.
You can also use the perfmatters_remove_unused_css filter to change where unused CSS is removed on your site. This example would disable unused CSS on pages only.
add_filter('perfmatters_remove_unused_css', function($boolean) {if
(is_page()) {return
false;
}return
$boolean;
});
