Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Lighthouse: Remove unused JavaScript

Overview

Removing unused JavaScript can reduce render-blocking behaviour to speed up your page load and improve your visitors' page experience.

By default, JavaScript files are render-blocking because they block the browser from dealing with other page load tasks, thus delaying your page's First Paint.

Loading unused JavaScript can therefore have a heavy impact on your page performance, both, measured and perceived.

How does your site score on this audit?

Types of unused JavaScript

When talking about unused JavaScript, it generally falls into two categories. Both of these categories affect your page performance, albeit in different ways. They are:

1) Non-critical JavaScript

JavaScript that isn't required for above-the-fold content but may still be used elsewhere on the page or other pages.

2) Dead JavaScript

Dead JavaScript refers to code that isn't used at all anymore.

It may contain remnants from previous versions of your site, and/or imported from other modules that aren't referenced anymore, and/or used to be a part of testing (i.e., they were used temporarily).

How does unused JavaScript affect page performance?

Every time a page loads, the browser must download, parse, and execute JavaScript files before it can render anything on the page (unless the JavaScript files are explicitly deferred or asynchronously loaded).

This is because the browser cannot know how the JavaScript file is going to affect the page content, so it waits for it to be fully executed.

Unused JavaScript unnecessarily increases browser execution time, slowing down your page load.

Naturally, the more unused JavaScript there is on your page, the longer it takes the browser to download, parse, and execute them.

How unused JavaScript effects performance
Loading unused JavaScript unnecessarily increases bandwidth consumption and delays your page's first paint, slowing down your overall page performance.

These unnecessarily large JavaScript files could lead to issues, including potentially delaying your page's First Paint as the browser is blocked from processing other critical tasks. As a result, this increases the amount of time your visitors spend waiting for the page to display something.

Additionally, non-critical JavaScript code, even if deferred or asynchronously loaded, may affect page performance, even though it isn't render-blocking. This is because it still needs to be downloaded and it competes with other page resources for bandwidth.

Moreover, unused JavaScript code, in general, needlessly increases cellular data consumption on mobile devices.

Overall, removal of unused JavaScript can reduce browser execution time and bandwidth consumed, resulting in a faster loading page.

How does GTmetrix trigger this audit?

GTmetrix checks your JavaScript files for code that isn't executed during the loading of your page.

JavaScript files that have more than 20 KB of unused code are then flagged.

Expanded view of Remove unused JavaScript audit
GTmetrix evaluates the potential file size savings that arise from removing unused JavaScript code.

GTmetrix also estimates the potential file size savings possible through the removal of unused JavaScript.

How to remove unused JavaScript?

You can address unused JavaScript with the following strategies:

1) Code-splitting

Separate your bundled JavaScript into critical and non-critical JavaScript through code-splitting.

By doing so, render-blocking behaviour can be reduced as only the critical JavaScript is loaded first. The non-critical JavaScript that isn't required on your page can then be removed.

Read this documentation to learn more about code-splitting.

2) Dead code elimination

Dead code elimination is the process of removing JavaScript code that isn't used by your current page. This code may contain remnants from previous site versions or may have been used during testing.

You can utilize a process known as tree shaking to eliminate dead JavaScript code. Read this documentation to learn more about tree shaking.

3) Dead imported code elimination

In many cases, dead code is imported from popular libraries or other JavaScript bundles, and it's difficult to selectively import code for your specific application.

However, there are plugins that can help you automatically remove unused code from popular libraries after you've imported them. Click here to learn more about these plugins.

Note: This is an expert-level optimization

Optimizing this audit requires complete knowledge of your website code base. Only experienced developers are advised to attempt this as incorrectly modifying your JavaScript is likely to break site functionality.

Summary

 *****