You're in luck! We're going to walk you through the process of checking and sorting what CSS code is critical and what is not by using a freely available tool called Coverage in the Chrome DevTools. We're also going to mention what is the root cause of this issue for WordPress websites and how to tackle it.
Wondering what you can do about a “Reduce unused CSS” warning you’re getting on PageSpeed Insights?
In this post, we’re going to explain how unused CSS might affect your website’s performance, how to detect it, and how to address this issue.
First of all, PageSpeed Insights uses the Lighthouse tool, which gives a comprehensive report on your website’s performance. One of the opportunities for performance enhancement is about unused CSS, and it will give a warning message, listing stylesheets with potential savings of 10KiB or more.
Furthermore, CSS rules are a common source of bloat on websites as it is also a very common issue web developers deal with, when working on loading speed and performance improvements.
For WordPress websites, the primary source of unused CSS are plugins, page builders, themes, and font icons. While they provide user friendly costumization capabilities, they also come with CSS bloat for elements you might not use at all.
How unused CSS affects performance
Whenever a user comes on a site, their browser will download, parse and process all external stylesheets that it encounters before it can render any content. Furthermore, each external stylesheet must be downloaded from the network and these extra in-between trips it takes to fetch them, can significantly impact the loading speed of a website.
Unused CSS also slows down a browser’s construction of the render tree, which is like a DOM tree, except it also includes the styles of each node. In order to construct the render tree, a browser needs to walk through the entire DOM tree and check which CSS rules apply to each node.
Therefore, the more unused CSS a website loads initially, the longer it might take the browser to calculate the styles for each node. In other words, CSS files are render-blocking resources and web pages that contain unnecessarily large CSS files will take longer to render.
How to detect unused CSS
While PageSpeed Insights gives a truly comprehensive report on various different aspects of a web page’s performance, we can still utilize other tools to find out more about any issue we’re dealing with.
In the case with unused CSS, we’re going to get a list of files we should turn our focus on, but to find out what styles are actually not being used, we’ll need to use a tool such as Coverage tool in Chrome DevTools.
Basically, what we’re going to get with Coverage here is what CSS is critical for initial render and what is not.
The following steps will guide you through the process of opening and using Coverage effectively:
- Open Chrome DevTools and open the Command menu by pressing Control + Shift + P (for Mac users Command + Shift + P)
- Type Coverage in the search box and select Coverage under suggestions
- In the Coverage tab, click Reload button
- Click on a file you wish to optimize and navigate to Sources tab to view its contents
CSS styles will be flagged either by a green or red color. If it’s green, it means that that style is critical, and on the other hand if it’s red, it’s non-critical (unused) for initial rendering.
How to optimize
Once we’ve classified which styles are critical and which aren’t, we can then separate them and load them individually.
In order to deal with critical styles, we recommend you load them inline inside the <style> block in the head of the document.
And when it comes to non-critical CSS, we can defer it and load it after initial rendering of the page. We can do so with preloading, and the following example demonstrates how to import it in this way.
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>We’re using rel and as attributes with preload and style values respectively, which will tell the browser to load the CSS files asynchronously. In combination with these attributes, we’re also nulling the onload handler, which helps some browsers to avoid re-calling the handler upon switching the rel attribute.
We’re also setting a link tag inside the <noscript> block to import the styles normally in case the browser doesn’t support JavaScript. Furthermore, code inside <noscript> block will only be executed as a fallback.
To handle perloading in WordPress you’ll need to use an additional filter called style_loader_tag along with the wp_enqueue_style function.
wp_enqueue_style('preload-style', 'styles/main-style.css', false, null);
add_filter( 'style_loader_tag', 'preload_filter', 10, 2 ); function preload_filter( $html, $handle ){ if (strcmp($handle, 'preload-style') == 0) { $html = str_replace("rel='stylesheet'", "rel='preload' as='style' ", $html); } return $html; }Since this filter fires every time we enqueue a stylesheet, we basically add an if statement to it to check if we’re enqueueing the stylesheet we want to preload and if the condition passes, then it applies changes to the output HTML markup.
Conclusion
To conclude, we delve into what kind of impact unused CSS can have on the performance of a web page, how to detect it, and how to optimize the loading there of. While the solution may be fairly simple, it can be a painstaking process to root it out. However, the improvement it may have on the performance of your website will be worth it.
