Categories
SEO

How You Can Find and Remove Unused CSS Code From Your Site

CSS codes are vital to the look and feel of your website. And while important, they are render blocking, and even more so, if they are loaded externally through a link tag. On a general broad scale, it’s a standard practice to keep CSS stylesheets separate for efficient management of the site. However, those files can also contain dead rules. Or, your other CSS code that is not loaded through an external file, may include rules that are not required to load above the fold content.

In either scenario, it’s bad all around because:

  • You’re constantly asking the browsers to interpret render blocking code that’s not required. That leads to bad user experience, and negative points when it comes to First Contentful Paint (FCP).
  • Not only that, the dead rules are consuming your network bandwidth (no matter how small).

The default behavior of any CSS is that it becomes render blocking. So unfortunately, browsers will always (at least how things are right now), read and understand the entire CSS code first, before it can start loading your actual content. The reason for that is because IT NEEDS TO KNOW how your page is styled — in order to display content.

How to Find and Remove Unused CSS Code

One of the easiest ways to find and remove unused CSS code is to simply plug-in the URL into Google PageSpeed Insights.

For one to two visual references, I’ll be using my own site, and while I am passing these rules, you can still get an idea.

In any case, once you get the results from the PageSpeed Insights report, follow the steps below.

Step 1: Look for “Remove Unused CSS”

Once the results are provided, search for “remove unused CSS.” Your browser should take you to that section. And here’s the best part! It will point out the CSS file/stylesheet too, so you’d exactly know the location of unused CSS code.

Do note that there can be more than one file/location (depending on your site). Also, see the screenshot below for reference.

remove unused css code google page speed insights
Remember that technically, my site passes the audit. However, I still have room for improvement.

Step 2: From Your CSS File, Figure Out How Much of Your Code Is “Critical” Versus “Non-Critical”

Now that we know which CSS file(s) is causing an issue, the next step is to figure out the code that’s responsible for it. To do so, we will leverage the Chrome Browser, and adhere to the instructions as follows.

  1. On your chrome browser, go to the same URL you used in the PageSpeed insights report.
  2. Then, if on Windows OS (press CTRL + SHIFT + I), or similar depending on your device to open Chrome’s Inspect/Web Development Feature.
  3. Then, Press (CTRL + SHIFT + P) or equivalent, to open the coverage tab.
  4. Next, type “coverage,” and following that, click on “show coverage.” It’ll be something like the screen snapshot below.
coverage report google chrome inspect element
  1. If you’ve accurately followed thus far, you should get a new “coverage” window in your inspect element. In there, you should get a list of assets. When you see those, select the one that PageSpeed Insights told you was being problematic. The visualization below will help!
critical and non critical css

Step 3: Communicate Your Findings to the Developer(s)

Eventually, you’ll have to organize all of your findings in a presentable format (PDF), Google Sheet, or if nothing, then in an email, and communicate the same to your Developer(s).

Subsequently, they can investigate your findings and determine whether the unused and non-critical code is indeed required. The best and ideal option is to remove the code completely, or, they can defer non-critical CSS, so as to have a minimal effect on FCP.

You May Also Want to Check Out:

Why Do CSS Files Become Unused or Non-Critical?

With constant changes to coding standards, speed standards, mobile experience standards, and even your site design and functionality standards, code changes and revisions are a common occurrence. And while extreme caution is taken to get rid of the unwanted code, there is always a high probability of something like this happening.

What About Removing Unused JavaScript?

The methodology (one of them) to find and remove unused JavaScript is almost the same. Instead of investigating CSS, you’d investigate JavaScript. You can literally follow the same process while subbing out CSS with scripts.

Conclusion

To find and suggesting to remove unused CSS code this way may appear very knit-picky of you to some of the higher-ups; however, if you can make a case that this will help you guys in the long run, it’s worth the shot. And honestly, the situation may actually be quite awful for your organization, where your potential network bandwidth savings and FCP improvements can provide a considerable boost to your site speed and scores.

Now, and in the future, every second and micro-second will count and play a role in your search engine rankings. In fact, Google recently announced that their new “Core Web Vitals” will be becoming a ranking signal. This new signal will be a blend of UX signals and some of the speed metrics that are part of the Core Web Vitals.

Plus, as I have incessantly predicted, speed will continue to become a significant factor in how well your site does in the SERPs.

References and Expert Resources

  1. web.dev
  2. Google Developers
  3. Deferring non-critical CSS (web.dev)