Reduce Unused JavaScript

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.

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.