Reduce Unused JavaScript

JavaScript: A Major Factor to Web Page Performance

Like CSS, JavaScript is a render-blocking resource that needs to be optimized appropriately so that it does not delay other elements. If you have any JavaScript that is no longer being used, but is still in your code, the browser still must waste resources having to download, render, and execute this code. And that is all before being able to move on to the next piece of work. And even if any non-critical or unused JavaScript is lazy loaded and not needed for any above-the-fold content, it will still take browser bandwidth from other tasks to process. Lighthouse will flag any JavaScript file that is discovered to have more than 20KiB of unused JavaScript code.

Benefits of Reducing Unused JavaScript

Naturally, the more JavaScript code you have on your page, the longer it is going to take the browser to download, render, and execute. And that goes for JavaScript that is not even being used. If it is on the page, the browser is going to have to spend time and resources processing it. This makes it even more important to regularly review and optimize your code where possible.

Like we have mentioned before, optimizing code benefits your mobile users as well. You can reduce the reliance on the browser to process JavaScript and help reduce bandwidth that is required. You want to be able to separate your critical JavaScript from non-critical JavaScript so that it does not delay the page load process any more than it must. There are several ways to remove unused JavaScript. Frameworks like Angular provide tools to identify unused JavaScript. CMS tools like WordPress also provide plugins, which are great for building interactive elements within your page but can also add a lot of JavaScript. Review your plugins to ensure they do not contain any unused JavaScript that could be slowing down page load times.

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.