How to delete the unused css and js using coverage tab in google chrome?

Share It

In this blog, we will discuss the way to delete unused css and js using coverage tab in google chrome to improve website speed.

There are several methods to speed up a website, some of which are

  1. Optimize images: Large images can significantly slow down a website. Optimizing images by compressing them , reducing their dimensions and using appropriate file format (e.g webp) can help reduce their size and improve page load times.
  2. Use a content delivery network (CDN): A CDN is a network of seververs distributed across different geographic locations that cache website content and deliver it ot users from the server nearest to them. This can improve website speed by reducing the distance between the user and the server.
  3. Minimize HTTP requests: Each element on a webpage (e.g. images, scripts. stylesheets) requires a separate http request, which can slow down page load times. Minimizing the number of HTTP requests by reducing the number elements on a page can improve website speed.
  4. Use browser caching: Browser catching allows the website to store frequently used files, such as images and scripts , on the user’s computer, which reduces the number of HTTP requests and improves website speed.
  5. Reduce server response time: Server response time refers to the amount of time it takes for the server to respond to a user’s request. Reducing server response time by optimizing server software, reducing server load, and using a faster web hosting service can improve website speed.
  6. Optimize code: Optimizing code by reducing the number of scripts, minifying CSS and JavaScript files, and using efficient code can improve website speed.
  7. Use a faster web hosting service: Choosing a web hosting service with faster servers and better uptime can improve website speed.

We can use the Chrome Coverage tool to identify and delete unused CSS and JS files. Here are the steps to do it:

1. Open your website in Google Chrome.

2. Press F12 or (ctrl + shit + i) or click inspect after right-clicking to open the Developer Tools.

3. Click on the “Coverage” tab.

4. Click on the “Reload” button to reload the page.

5. Wait for the Coverage tool to analyze the page. The Coverage tool will display a list of all the CSS and JS files used on the page, along with the percentage of code used. The blue part represents used code and red part indicates unused code. We can easily deleted unused code and make changes in real file in server.

Note: Be careful when deleting CSS and JS files as it can affect the layout and functionality of your website. It is recommended to make a backup of your website before making any changes.

Share It