How to Fix Remove Unused CSS Warning

Updates in search engine algorithms have made many metrics and technical infrastructure important to provide a more successful user experience. In the period from 2015 to 2022, users' mobile and tablet usage increased significantly, while desktop and laptop usage decreased. This situation has caused poor user experiences, especially on sites with large page sources.

For example, users visiting a website from mobile devices experience excessive resource consumption and wasted time while loading websites with high-volume images and unused CSS and JS files. This is because the loading times and site speeds of such websites provide an inadequate experience for users, and since the user accesses the site from a search engine, it also causes search engines to lose image.

Aware of this, search engines have started to pay significant attention to website speed and resource consumption with the latest updates in their algorithms. To optimize this situation, website owners have strengthened their optimizations in this regard by analyzing the speed and resource consumption of their websites with measurement tools such as Pagespeed and GTMetrix.

Pagespeed Page Speed Analysis

Among the most important performance tools used when optimizing a website, Pagespeed and GTMetrix tools undoubtedly come first. Pagespeed, in particular, developed by Google, shares with us the speed metrics that prevent a successful user experience on websites.

One of the metrics that website owners frequently encounter and often fail to solve in Pagespeed analyses is the removal of unused CSS files.

Unfortunately, Pagespeed and GTMetrix tools do not share with us which lines in the unused CSS files are actively used, but only provide us with estimated savings and files. This warning alone is not enough to solve this problem.

What Are Unused CSS Files?

In today's modern web programming technologies, many developers prefer ready-made libraries instead of coding HTML & CSS from scratch. Libraries like Boostrap and Tailwind are examples of these structures. The difference of ready-made CSS libraries is that they collect many button, navbar, grid structure, visual and design commands under certain classes in a single library. In this way, web site developers can easily use all style and CSS arrangements by giving a class to the relevant HTML element, instead of writing separate CSS commands for each structure and module. For example, while many lines of CSS code need to be written to give a button various color and radius styles and hover effects, the desired style arrangements can be obtained by giving a single class since the relevant commands and lines are included in the ready-made library.

Although ready-made CSS libraries are very practical for developers, they can cause some problems in SEO-related arrangements as they increase the query and resource consumption on the website. For example, when you include the bootstrap library on your website, you can actively use only 1 or 2 of the 16 different button styles in it. The remaining 14 button styles continue to be included in the CSS file and increase the page's resource consumption even though they are not actively used.

In these cases, performance tools that measure speed, such as PageSpeed, inform us that there are actively unused CSS files on the website and ask us to make optimizations related to this.

How to Detect Unused CSS Files?

There are several ways to detect unused CSS lines on a website. You can use modules like purgeCSS or manually view these lines from the page inspection.

To detect unused CSS files, the first thing you need to do is right-click on the page and click on the "Inspect" option.

Then click on the three dots on the right side of the window that opens and click on the More Tools > Coverage option.

You will see a record button in the section that opens at the bottom. Click this button and refresh the page with CTRL + F5 or Command + F5. After the page is refreshed, you will see that many CSS and JS files have appeared below.

The rates on the right side in this section show the unused rate in the relevant CSS file at the moment the page is loaded.

When you click on any CSS file, the relevant file opens in the window, and you can again view the unused CSS lines in red and the actively used ones in blue.

The important detail here is to determine which code is used on different pages and which lines are active on mobile and tablet devices.

How to Remove Unused CSS Files?

We learned where to see the unused CSS lines on the website. However, the important part here is to be able to analyze well which CSS line is really used and which is not. Because some CSS lines may be included in a single file for different pages, as well as being included in mobile and tablet devices.

For this reason, you should first copy the unused lines from the ready-made library codes in the CSS lines, then navigate to the service, category, product, contact, etc. pages of the site and perform the coverage process we shared above on each page.

In addition to this process, you should switch to the mobile and tablet views of your website from the device selection area in the inspect section and, in the same way, visit all pages and copy the unused CSS lines to one side.

In the final stage, you can clean the common and actively unused CSS lines among all the CSS lines you have copied.

Note: It is recommended that you perform all these operations on the test version of your website and, after performing the cleaning, carry it to the main version if no problems are observed.