Unused CSS or JavaScript code will slow your website and can worsen Core Web Vitals metrics. How do you find how much unused code there is on your website?
One way to find unused CSS or JavaScript code is in Chrome DevTools. Start by navigating to the Coverage report. You may need to click the three vertical dots in the upper corner of DevTools, select More Tools and then click Coverage to see this.
Once you’ve opened up the Coverage report, click the record button. Then, refresh the page. You will see the site’s CSS and JS files appear on the Coverage report.
Along with listing Total Bytes, the Coverage report also lists the Unused Bytes. Keep in mind, though, that Unused Bytes might be “not used yet” bytes. This happens because the way you have loaded the page hasn’t used all the CSS or JavaScript (yet).
To see what code may actually be needed, start interacting with the page while you have the Coverage report open and recording. Resize the browser, click tabs or buttons to show/hide content, scroll down the page, play videos, use interactive features on the page and more. As you interact, you can see how (or if) the unused bytes change.
To figure out what specific code is unused, you can click on a file listed in the Coverage report and see that file’s code. Lines with a red bar represent code that could likely be removed from the website. These are the lines of code to carefully review and determine if they can be removed from the site.
