One of the most common files that are loaded by default in WordPress (at least at the time of writing this, June 2, 2020) is /wp-includes/css/dist/block-library/style.min.css which has a size of ~54 KB (if it’s not GZIP compressed). In many cases, it is not needed site-wide or on certain pages depending on the situation, if your website pages ever load Gutenberg blocks.

Most of the developers are aware of that and usually unload it site-wide, but if you can’t reach your developer or just want to be sure if a particular page needs it, you can use Coverage from Chrome DevTools (within the browser) to check how much of the CSS located within the file is actually used. Often, it’s 100% unused in both desktop and mobile views and you can safely unload it, thus stripping extra “fat” from your website.

So, you can do the following:

1) Load any page you want to optimize in Google Chrome (e.g. the homepage) and then right-click on the page & click on “Inspect”.
2) Once the console shows up, click on the 3 dots from its right-side & then click on “Show console drawer” or just press the keyboard “Esc” key.

3) Then, select “Coverage” and click the reload button there to start instrumenting coverage.

4) After the page reloads, it will show the CSS files that are loading, like in the print screen below (click on the image to enlarge it). Note that in this example, /wp-includes/css/dist/block-library/style.min.css is unused. Consider doing the same on the mobile view (resize the browser window) to check if the unused CSS is also 100%.

5) Finally, mark it for unloading either on the page you were checking or site-wide if you’re confident it’s not needed on any other page.

Important things to remember when checking for unused CSS Google Coverage

While this is a great tool to detect unused CSS, there are things that you need to be aware of when using it to avoid unloading CSS that you might actually need and mess up the layout of your website.

  • Google Coverage reports the unused CSS for the screen width you used when you loaded the page. For instance, you might have a report of 100% for Desktop, but on mobile, it could be 90%. This means that if you unload the file, the page will show fine on the desktop view, but 10% of that CSS code is needed on the mobile view. So, make sure to test on both or it’s likely the mobile layout will be broken (it also works the other way around if the file is made to have only responsive code that triggers only on mobile view)!
  • Some CSS code is reported as not needed, when in fact it could be needed. For instance, the @font-face in Google Fonts is shown as unused, but you might have references to that font in other CSS files. Or, you might have code that is needed ONLY after specific AJAX calls are made and are changing the layout of the page. It’s impossible for Google Coverage or any other similar tool to “know” things like that in advance as each website is unique.

In time, while using this tool, you will understand how it works and you will be able to detect unused CSS easier. When a file is reported as 100% unused and is coming (based on its path) from a plugin that you know for sure you’re not using on that particular page, then it’s obvious you can safely unload the CSS file without worrying something would break.

Note that if you’re using a plugin (including Asset CleanUp) that is combining CSS files, it’s best to load the page without the combination taking place because you want to see each file loaded individually, not a large combined file which is difficult to read. So, you can append something like /?wpacu_clean_load or /?nocache to the URL (e.g. if you have query strings in the URL, plugins such as WP Rocket will not cache that page and you can view each file loading, not one combined file).

Was this post helpful?