Remove unused JavaScript

Unused JavaScript can slow down your page load speed:

• If the JavaScript is render-blocking, the browser must download, parse, compile, and evaluate the script before it can proceed with all of the other work that's needed for rendering the page.
• Even if the JavaScript is asynchronous (i.e. not render-blocking), the code competes for bandwidth with other resources while it's downloading, which has significant performance implications. Sending unused code over the network is also wasteful for mobile users who don't have unlimited data plans.

How the unused JavaScript audit fails #

Lighthouse flags every JavaScript file with more than 20 kibibytes of unused code:

How to remove unused JavaScript #

Detect unused JavaScript #

The Coverage tab in Chrome DevTools can give you a line-by-line breakdown of unused code.

The Coverage class in Puppeteer can help you automate the process of detecting unused code and extracting used code.

Build tool for support for removing unused code #

Check out the following Tooling.Report tests to find out if your bundler supports features that make it easier to avoid or remove unused code:

• Code Splitting
• Unused Code Elimination
• Unused Imported Code

Resources #

• Source code for the Remove unused code audit
• Remove unused code
• Adding interactivity with JavaScript
• Code Splitting
• Dead Code Elimination
• Dead Imported Code
• Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools
• class: Coverage