How to Identify Unused CSS and JS Lines?

Website speed is one of the most important metrics in SEO efforts. Nowadays, almost every search engine emphasizes fast-loading web pages, low DOM size, and minimal resource consumption. Therefore, search engines tend to avoid ranking pages that load slowly, contain unnecessary lines of code, or use excessively large DOM elements, as these are considered to provide a poor user experience.

Through free speed analysis tools such as Pagespeed or GTMetrix, the most common issues we encounter are the warnings "Reduce Unused CSS" and "Reduce Unused JavaScript".

Before taking any action on these warnings, it is essential to analyze the causes properly and understand which CSS and JavaScript files/libraries exist in the underlying structure of our website.

Why Does the “Reduce Unused CSS and JavaScript” Warning Occur?

In general, e-commerce platforms contain ready-made CSS and JavaScript libraries. Since these libraries are designed to be useful for any type of website, they include many CSS classes and JavaScript functions that we do not use.

We can identify the CSS lines and JavaScript functions in these files that are not used on our website, clean them from the files, and make our pages load with higher performance. You can apply the method we share below on your own website to detect these lines!

How to Detect Unused CSS and JavaScript Lines?

First, after entering your website, right-click on the page you want to analyze and select "Inspect".

Then, in the opened DevTools panel, click the three-dot icon on the right and activate More Tools > Coverage.

At the bottom, in the Coverage panel, click the reload button to refresh the page and allow DevTools to load the CSS and JavaScript files on the page.

Click on any of the loaded CSS/JavaScript files to open it in the DevTools tab.

In the opened CSS/JavaScript file, sections highlighted in blue indicate that the corresponding CSS line/JavaScript function is actively used on the page, while sections highlighted in red indicate that it is unused.

This way, we can easily determine which lines and functions in all CSS and JavaScript files hosted in our website's structure are used and which are not.

What to Consider Before Cleaning Unused CSS and JS?

Although it may seem that many of the codes in the CSS and JavaScript libraries loaded on our pages are unused, there are important points to consider before performing any cleanup. Before cleaning unused CSS and JS, make sure to pay attention to the following:

• Ensure that the relevant CSS/JS code is not used on every browser, device, or page.


• Some JavaScript functions only run on specific events. For example, functions triggered by user-side events like scroll or click should be carefully analyzed for active/inactive status before cleanup.


• Before cleaning CSS and JS, identify the files that increase your browser’s DOM size. Do not waste time on small CSS and JS files.


• Always back up your website before performing optimizations!

By using this method, you can detect and clean unused CSS and JavaScript lines on your website, allowing your pages to load faster and provide a better experience for visitors!