You are reading this guide, which means maybe you come across a warning like “remove unused CSS” in Lighthouse. This warning indicates having too many CSS rules on your page that are not using. Due to all these unused CSS rules, your page takes a long time to load.
As a result, it can affect the user experience and turn your potential customer off. Therefore, today, we will discuss the impacts of having unused CSS on your page performance. Also, we will share how to “remove unused CSS” from your WordPress site to improve the UX. So, keep reading to explore the effective processes.
What is Unused CSS?
Before knowing the unused CSS, let’s explore what is CSS. Actually, CSS is the language that is required to design a WordPress website’s theme. Developers often write the themes while creating them for a website. So that, most sites can support the themes.
These things are usually saved in a file known as style.css. All these elements are not needed for your page, but CSS serves all of them to your users. And, unused CSS is those CSS declarations of your web page which are not used anywhere. There are two different categories for unused CSS. These are-
- Non-Critical CSS
- Dead CSS
Both these unused CSS cause slow load time of your web page.
Why Unused CSS is Bad for Your Page Speed?
While loading a page, browsers first fetch the HTML of that page and convert it into DOM nodes. And then browsers start fetching all stylesheets which are found in these CSS files. The styles that are found in these CSS files are also converted to another format called CSSOM.
The DOM and CSSOM are then combined into a render tree. Once this render tree is built, browsers start painting the first content. Because of this whole mechanism, CSS files always block the rendering of your webpage. And, when your page’s CSS file becomes larger than it should be, it starts taking a long time to load the file. That is why unused CSS takes longer to build under the render tree.
How to “Remove Unused CSS” from Your WordPress Site?
Removing every single unused CSS from WordPress is kind of impossible. But you can optimize CSS delivery to minimize and resolve this issue. So, let’s see how to “remove unused CSS” from your WordPress site.
1. Analyze Unused CSS Files
To analyze the CSS files, DevTools can help you. So, do the following to find out what CSS a page of your site actually uses.
- Press Ctrl+Shift+j or Command+Shift+j (Mac) to open the DevTools.
- Then, press Ctrl+Shift+p or Command+Shift+p to open the command menu.
- Now, type coverage and select “start instrumenting coverage and reload page”.
- To see the file size and how much code is actually being used, click on the CSS files from the Type section.
- Now it will show another section with green and red colors. Green-colored CSS is used on your page and the green ones are unused CSS.
2. Split the CSS Into Several Files
To reduce the number of CSS rules, you can apply a simple way that is splitting the CSS into several files. Your page is also visited through mobile phones. So there is no need for downloading the style of desktop and print for mobile devices. It will save your time and also shortens the critical request chain of the Lighthouse.
You can use the media attribute to make sure that your stylesheet is only used when the media attribute has matched the media you are using right now.
<link href="all.css" rel="stylesheet" media="all"> <link href="print.css" rel="stylesheet" media="print"> <link href="desktop.css" rel="stylesheet" media="screen and (min-device-width: 1024px)">
3. Remove the Unused CSS
Removing the unused CSS manually is the best and most logical way. The steps are also very straightforward. Simply use a plugin called Asset CleanUp. You can scan your page to see the unused CSS and remove them.
4. Generate Critical CSS
Critical CSS is required to render the above fold content of a page. To improve the first meaningful paint and the first contentful paint, it is highly recommended. There are several tools and plugins that can easily help you find and extract critical CSS. The most common are NodeJS script Critical, WP Rocket, Critical Path CSS Generator, and Critical Path CSS Generator.
5. Minify the CSS Files
Large unused CSS files are also more likely to slow the page load time. By minifying the CSS file size, you can get rid of such issues. CSS minifier helps to shrink CSS files by rewriting variables, CSS codes, removing the spaces, formatting, and comments.
Using the command line with css-minify filename, you can minify all your large CSS files. Another easiest way is using minify tools. The most well-known CSS minify tools are CSS-minify and cssminifier.com.
6. Use CDN to Deliver CSS Files
Because of the widely distributed network, CDN can dramatically reduce the network latency and loading time. It doesn’t matter what KBs your unused CSS files are, a CDN can deliver it in <50ms. A CDN won’t remove unused CSS automatically, but it can deliver the complete CSS in less time. You can use CDN like BunnyCDN,StackPath, Sucuri, Cloudflare, etc.
User Experience is one of the most significant contributors to improve conversion rate. If your visitor can quickly access your site and navigate fast they will be more satisfied. In contrast, slow page loading can make them leave the page which can increase the bounce rate.
In that case, you should focus on optimizing the factors related to page speed. This guide covers one of those factors that can help you to improve your page performance. Now that you learned how to “remove unused CSS” from your WordPress site, apply them correctly and ensure better UX of your site.