Lighthouse: Reduce JavaScript execution time

Overview

Reducing JavaScript execution time, in general, refers to decreasing the amount of time spent parsing, compiling, and executing JavaScript files.

By default, JavaScript executes on the main-thread and when this is happening, the browser cannot execute other tasks.

Depending on the order in which the scripts are executed, this could prevent elements from being painted, delaying page rendering and affecting page interactivity.

Reducing JavaScript execution time essentially reduces the main-thread blocking time - in turn, potentially weakening the effect of cascaded requests.

Improving this audit can result in better Performance metrics, and drive real-world performance gains.

How does a long JavaScript execution time affect page performance?

When the browser finds a <script> tag during the initial parsing of your HTML, it pauses this process and instead starts to load, parse, and execute the JavaScript code in said <script> tag.

This is because JavaScript can affect your page rendering/content.

JavaScript execution time plays a central role in your page's performance; a long JavaScript execution time may be detrimental to your site performance in several ways, including:

1) Longer download times

A higher JavaScript payload/file size may increase the bandwidth consumed. This effect is even worse on slower networks.

2) Being unresponsive to user input

JavaScript blocks the main-thread, causing the browser to block all other tasks as it parses, compiles, and executes it.

3) Significantly delaying the Time To Interactive (TTI) metric

If the page executes a lot of code before it's actually needed, it delays the point at which your page is fully interactive to user input, resulting in a slow or unresponsive experience.

4) Higher memory consumption

JavaScript files that execute for a long time demand higher memory resources, which can affect performance if your visitor is on a mobile or low-end device.

Reducing JavaScript execution time is highly impactful to your site performance, and it can also fix other JavaScript or main-thread related issues.

In simple terms, a long JavaScript execution time is usually the result of non-optimal code or a large payload (self-hosted or third-party).

Another strategy to reduce JavaScript execution time is to review your website code and remove any JavaScript that is unused or is no longer required.

How does GTmetrix trigger this audit?

GTmetrix measures the execution time for each JavaScript file on your page.

Clicking the audit on the GTmetrix report lists all of the JavaScript files along with their execution times.

This audit's impact score will depend on the JavaScript execution time, with a longer execution time usually resulting in a higher impact score.

How to reduce JavaScript execution time?

There are a number of ways to reduce JavaScript execution time, such as:

1) Implementing code-splitting

Code-splitting is the method of splitting your JavaScript bundle into smaller files so that only the critical code (i.e., code that is necessary for above-the-fold content and user interaction) is executed during initial page load.

By executing fewer lines of code at the beginning of the page load process, First Paint can happen sooner.

Moreover, executing smaller chunks of code reduces the main-thread blocking time and can significantly reduce the overall JavaScript parsing and execution time.

Click here to learn more about code-splitting.

2) Removing unused code

Unused code can often be inherited from previous versions of your site, and/or imported from other modules that aren't referenced anymore.

You may also have chunks of code that used to be a part of testing but aren't needed on your production website.

Find and eliminate dead-code on your webpage to reduce JavaScript execution time and keep the main-thread less occupied.

Click here to learn more about removing unused code.

3) Caching your code with the PRPL pattern

The PRPL pattern is an acronym referring to the combination of 4 key methods that can help reduce JavaScript execution time, namely:

a) Preloading important JavaScript files

Preloading key JavaScript files allows scripts to be downloaded beforehand, but executed later. This prevents the scripts from blocking the main-thread at critical phases of the page load, enabling your users to interact faster with the page.

Combine this with code-splitting so that key chunks of your JavaScript code are split off and preloaded.

Click here to learn how to preload key scripts.

b) Rendering the First Paint as soon as possible

Eliminate render-blocking resources to render the First Paint as soon as possible.

There are many ways to eliminate render-blocking on scripts, such as inlining critical JavaScript, and deferring or asynchronously loading non-critical JavaScript.

Read our blog article to learn more about how to implement these.

c) Pre-caching assets

Use service workers to fetch assets directly from the cache instead of downloading them again from the server. This allows faster downloads and execution on repeat visits.

Click here to learn more about pre-caching assets.

d) Lazy-loading JavaScript files

Lazy-loading JavaScript files can reduce the initial page loading time as the scripts are only loaded on-demand. Combine this with code-splitting so that key chunks are preloaded and the other non-critical chunks are lazy-loaded.

Read this article to learn more about code-splitting and lazy-loading.

4) Minifying and compressing JavaScript code

Minifying and compressing your JavaScript files lowers their file sizes by removing comments, redundant code, and whitespaces.

These elements aren't needed by the browser to load your page, and a lower JavaScript payload reduces their overall parsing time.

Note that minification should be regarded as a way to fine-tune your performance rather than single-handedly boost it. Focus on the above optimizations before attempting minification.

Click here to learn more about how to minify JavaScript files.