Detect unused CSS and JavaScript

To make sure your webpage loads and appears fast for your users, load only the CSS and JS code that your page requires to appear correctly. If some of your CSS or JS code is only needed later, when the user starts interacting with the webpage, then consider deferring this code until it's really needed.

In Chromium-based browsers

Chrome and Edge have a useful Coverage tool that can help identify which parts of code are unused. To detect unused code on page load:

1. Open the Coverage tool by using the Command Menu: type <kbd style="box-sizing: border-box; padding: 2px; border-radius: 3px; background: var(--keyboard-background-color); color: var(--keyboard-text-color); box-shadow: rgb(187, 187, 187) 1px 1px 0px 0px;">Ctrl+Shift+P</kbd> (or <kbd style="box-sizing: border-box; padding: 2px; border-radius: 3px; background: var(--keyboard-background-color); color: var(--keyboard-text-color); box-shadow: rgb(187, 187, 187) 1px 1px 0px 0px;">cmd+Shift+P</kbd> on mac), then type Coverage and press <kbd style="box-sizing: border-box; padding: 2px; border-radius: 3px; background: var(--keyboard-background-color); color: var(--keyboard-text-color); box-shadow: rgb(187, 187, 187) 1px 1px 0px 0px;">Enter</kbd>.

2. In Coverage, click the Start instrumenting coverage and refresh the page button (i.e., the refresh button).

3. Wait for the webpage to reload and for the coverage report to appear.

   The report shows a list of CSS and JS files with a percentage of unused bytes.

4. Click on any of the files to open it in the Sources tool.

   The file appears in the tool, and the line number gutter on the left indicates which lines were used, in blue, and which were unused, in red.

You can now decide whether some parts of your code can be loaded later, when needed only.