Reduce JavaScript Execution Time

We have already talked about how JavaScript is a render-blocking resource and how optimizing your JavaScript code, through compression and minification, and reducing the time it takes to download, parse, and execute JavaScript files. Additionally, this is all happening on the main-thread work that we talked about earlier in this guide as well. During this time the browser must stop all other tasks and focus on JavaScript, and depending on how scripts are ordered within HTML, it could be delaying and affecting how and when other elements are rendered. For those elements to be processed, the JavaScript execution time must be reduced.

The Lighthouse will report on the total CPU time, script evaluation time, and script parsing time. If the JavaScript execution time is longer than two seconds, then Lighthouse will flag this warning. If goes longer than 3.5 seconds, then it is considered a failure and should be investigated as soon as possible, as this long of a delay will more than likely cause users to bounce from your page, as they will not be able to interact with your page while the JavaScript is processing.

To fix this issue and to help reduce JavaScript execution time, one of the first steps is to review your JavaScript code and completely remove any non-critical code. You can also take advantage of code splitting and distribute JavaScript in smaller files, or chunks. Also, we discussed this earlier in this guide, but preloading key resources, such as JavaScript, can be implemented to download JavaScript earlier, but executed later in the page load process so it does not affect the main-thread tasks. And related to that, one of the benefits of preloading key resources is that you can also take advantage of browser caching. Lastly, asynchronous loading, or lazy loading, can be implemented so that only key scripts are downloaded, parsed, and executed and available to users after the initial page load.