Finding unused CSS and JavaScript with the Coverage tab in Google Developer Tools

Often over the course of time we add CSS and JavaScript to our pages without removing redundant styles and functions. This means…

Larger request sizes than required.

Slower first rendering of our pages if the unused code is referenced in external files rather than inline as these files will block the main thread from rendering.

Maintenance issues as its not clear what code is used and what isn’t.

so

it’s a good idea to remove unused CSS/JS as you go and finding it is easy with the Google Developer Tools Coverage tab.

The screen shot below (click on the image for a larger view) is taken from www.rte.ie and shows a lot of unused CSS and JavaScript as indicated by the red bars. The actual code that’s used in any particular CSS or JavaScript file is shown in the top half of the image.

RTE.ie unused CSS and JavaScript

Note this tool shows unused code for the specific page its run for, it can’t tell if code is used on some other page from the same site. Often sites have a shared layout file which includes all CSS/JS required for all pages. From a performance point of view ideally each page would only load the exact CSS/JS it needs however implementing this can be a challenge depending on what platform or CMS is being used.

Opening Google Developer Tools Coverage Tab

Open the command menu using Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows, start typing Coverage and then select Show Coverage:

Opening the coverage tab

or access it through the right hand side menu…

Opening the coverage tab

Note Microsoft Edge also has this functionality as its a chromium based browser.

Leave a Reply

Your email address will not be published. Required fields are marked *