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.
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:
or access it through the right hand side menu…
Note Microsoft Edge also has this functionality as its a chromium based browser.