How to Avoid Serving Legacy JavaScript to Modern Browsers

Lighthouse Audit: 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.

How to Serve JavaScript to Modern Browsers

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.

Additional Tips: Avoid Serving Legacy JavaScript to Modern Browsers

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.

lighthouse

Lighthouse

Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.

pagespeed

PageSpeed Terms

PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.

yslow

YSlow

YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.