Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Lighthouse: Avoid serving legacy JavaScript to modern browsers

Overview

Avoid serving legacy JavaScript code (i.e., ES5 standard) to modern browsers so that you can prevent unnecessarily large JavaScript files from being downloaded by users.

ES6 (also known as ES2015+) is the latest JavaScript standard, which brings new and modern features to JavaScript programming and functionality.

Even though most modern browsers support ES6, many developers continue to incorporate practices that ignore modern browser capabilities and focus on legacy browser support.

How does your site score on this audit?

How does legacy JavaScript affect page performance?

Unnecessary legacy code is often being shipped to modern browsers even though they have native support for modern JavaScript features (i.e, ES6).

Ultimately, this increases the size of the JavaScript files being downloaded, parsed, and executed by the browser.

This happens because developers often translate ES6 code to the ES5 standard to account for the small portion of users who may still be using browsers with no support or partial support for ES6.

This is done through the use of what's known as polyfills and transforms i.e., code that will make the user's JavaScript environment support features it normally doesn't.

Adopting a modern script deployment strategy can reduce the amount of code shipped to the majority of your visitors, improving their page experience.

For example, using module/nomodule feature detection can prevent unnecessary code from being shipped to users with modern browsers.

This can help you serve ES6 code more often, which reduces, both, JavaScript payload delivery and browser execution time, thus speeding up your page load.

How does GTmetrix trigger this audit?

GTmetrix identifies the polyfills and transforms that should not be present if using the module/nomodule pattern.

Even if one such polyfill or transform exists, this audit triggers.

How to fix this audit?

One strategy to deal with this issue is to load polyfills, only when needed, which can provide feature-detection support at JavaScript runtime. However, it is often very difficult to implement in practice.

A more practical solution is to implement modern feature-detection using <script type="module"> and <script nomodule>.

Every browser that supports <script type="module"> also supports most of the ES6 features. This lets you load regular JavaScript files with ES6 features, knowing that the browser can handle it.

For browsers that don't support <script type="module">, you can use the translated ES5 code instead. In this manner, you are always serving modern code to modern browsers.

Learn more about implementing this technique here.

Note: This is an expert-level optimization

The optimizations outlined in this document require complete knowledge of your website codebase and extensive JavaScript feature knowledge. Only experienced developers are advised to attempt this.

Summary

 ****