How to Avoid Serving Legacy JavaScript to Modern Browsers

After running a website speed test, you may find that one of the Lighthouse report comments will recommend to “Avoid serving legacy JavaScript to modern browsers.” When this message appears, it is because you are using older JavaScript code (ES5 or older) within a modern browser.

What ends up happening is that developers will end up converting, or transpiling, current JavaScript (ES6) down to ES5 to support the users that are using older browser versions. When this happens, it typically increases the size of the JavaScript files that must be downloaded, parsed, executed, etc., by the browser, which in turn causes delays and web page performance issues. The technical term for this process is polyfills or transforms.

So, how can you avoid serving legacy JavaScript to modern browsers? Well, the easiest way to do so is to begin implementing modern JavaScript techniques and strategies. A large majority of users are using the latest, up-to-date browsers anyways, so the code you are working with should be up to date as well. This ensures that your JavaScript files remain optimized, so your page load times remain fast. Using polyfills as needed can become hard to manage and implement.

Another method that is to use < script type = ” module > and < script nomodule >, which is supported by most modern and popular browsers. What ends up happening is that developers will create separate JavaScript “bundles” for different browsers, depending on what JavaScript standard it supports. This is what is known as differential serving. By doing this, you ensure that JavaScript is supported for all browsers, regardless of what the user’s preference is. However, for most browsers today, they all support the current standard and using differential serving is a rare occurrence these days. This method takes more time and consideration to implement, so take the time to test how this would impact page load times across your site in different browsers.