Reducing unused CSS is sort of like throwing out that old unused teddy that’s been sitting in the corner of a room for too long.
Sometimes pesky little pieces of unused CSS and JS code can be sitting on your site and have no use whatsoever. Billy Connolly would probably call them wee beasties!
wp-includes/css/dist/block-library/style.min.css - unused css example
If you’re using WordPress, then since WordPress 5.0 this pesky piece of CSS has been plugged into every page of your site : wp-includes/css/dist/block-library/style.min.css.
What is wp-includes/css/dist/block-library/style.min.css used for ?
This small piece of CSS code is for the WordPress Gutenberg block editor.
If you don’t use this block editor then you do not need the code. It can be removed.
I use Elementor on this site so I never use the Gutenberg block editor.
Reduce unused CSS audit on PageSpeed Insights and GTmetrix.
Both GTmetrix and Google may flag this piece of code as being unused.
Flagged in Google PageSpeed Insights in the Reduce unused CSS part of the report style.min.css 12.3kb
You can see if the style.min.css code is on your site by running a GTmetrix report.
Click on the Waterfall tab, then type block-library into the search box to filter the list of requests. This is the folder where the style.min.css file resides.
You can of course type style.min.css into the filter box, but there could be more than one file on your WordPress site with this file name, hence my recommendation to use block-library instead.
GTmetrix may also flag this piece of code as unused CSS.
Run a GTmetrix report and then go to the Structure tab.
You can filter the audits to LCP, seeing this issue usually causes Largest Contentful Paint – LCP – speed issues.
As you can see in the report below style.min.css is flagged by GTmetrix in the Reduce unused CSS audit.
Should you bother about tiny bits of unused CSS like /block-library/style.min.css ?
When I first started doing page speed optimization work about five years ago I never bothered cleaning up small pieces of code.
Usually it was too time consuming, and clients did not want to pay for that level of page speed result.
In the past I would have said it’s not worth the time and effort, but with Google moving to a Mobile First focus, that moved the needle on the page speed game.
It’s not difficult to remove unused CSS code like style.min.css if you don’t use the Gutenberg block editor.
You can use the wp_dequeue_style() WordPress PHP function to remove unused CSS code by creating a new function inside functions.php on your child theme.
The challenge is finding out exactly what to remove and the parameter values to provide to the wp_dequeue_style() function.
I don’t want to go into too much detail here, but this is a great Kinsta article about this process. They offer great super fast hosting [recommended].
And if I want to dequeue CSS how do I do that?
To dequeue wp-includes/css/dist/block-library/style.min.css use this code and add it to your functions.php file on your child theme.
<?php
// First fully disable Gutenberg editor
add_filter('use_block_editor_for_post_type', '__return_false', 10);
// Don't load Gutenberg-related stylesheets.
add_action( 'wp_enqueue_scripts', 'remove_wp_block_css', 100 );
function remove_wp_block_css() {
wp_dequeue_style( 'wp-block-library' ); // Remove from Wordpress core
wp_dequeue_style( 'wp-block-library-theme' ); // WRemove from Wordpress core
wp_dequeue_style( 'wc-block-style' ); // Remove from WooCommerce
wp_dequeue_style( 'storefront-gutenberg-blocks' ); // Remove from Storefront theme
}
OK and what is the easy way to remove unused CSS (and JS) ?
Perfmatters is a simple to use plugin where you can click and go – removing any excess code on your site with a simple click.
The plugin is a premium plugin – it’s currently priced at just $24.95 and is worth every dollar.
I use Perfmatters on this site to clean up all the hard-to-fix issues in a matter in minutes rather than hours.
Quick link to purchase (affiliate link that supports this site): getus.at/perfmatters
As you can see above, you can with a simple mouse click, remove code from specific areas of your site using Perfmatters.
The example above removes the block-library/style.min.css from ‘Everywhere’ on the site.
And as you can see above there are a lot of exception options allowing you to fine-tune your code removal.
There are also a lot of options to select the location to remove the code from if you do not want to choose ‘Everywhere’.
Why my speed optimization clients purchase Perfmatters ...
My page speed optimization clients purchase Perfmatters because I recommend it!
Of course there is huge trust in place when they hire me to speed optimize their site.
But I am very careful about what I recommend to my clients, and the same goes for what I recommend to you as a visitor on my site.
I recommend Perfmatters because of these key reasons:
- It works! I get significant page speed results EVERY time
- It’s fast and easy to use – simple click click click!
- It is great value for money with lots of ‘bang for the buck’
- It’s created by a former CMO from Kinsta and his brother – and you may have noticed I link to their articles a lot because Kinsta is a super focused company with great hosting (recommended)
- The changes Perfmatters makes to WordPress are clearly visible and not hidden in some piece of code buried on your site – this is very important for site maintenance
- The user interface is easy for clients to understand without explanation
What else can I use instead of Perfmatters ?
An alternative to Perfmatters is Asset CleanUp.
You can download a free version in the WordPress plugin repository and they also have a paid premium version.
Before Perfmatters came on the market I used this plugin for more complex sites such as WooCommerce sites.
However, I avoided using it for simpler sites because it was too complicated for clients to understand – the payoff of page speed vs complexity was out of balance.
It’s highly likely Perfmatters was modelled on this plugin seeing Asset CleanUp has been around for a long time.
Perfmatters wins the game for me because it’s easy to use and has high visibility making it easy to see the code changes in place.
Why my clients hire me for page speed optimization work ?
I firmly believe in the old adage : to know and not to do, is not yet to know!
I don’t think it’s possible to know about page speed optimization unless I am constantly doing it.
I wished someone had told me when I started in IT (many years ago!) that I would be studying for the rest of my career!
Page speed optimization is no different – I have to constantly apply myself to solve real page speed problems – learning every day.
Only that way can I offer my highest value to my clients.
And yet, most of my clients hire me because of my communication skills. I suppose they take it as a norm that I have the page speed tech skills! And rightly so.
Check out all my service offerings here on my shop page including my page speed optimization services.
