JavaScript execution time

When your JavaScript takes a long time to execute, it slows down your page performance in several ways:

1. Network cost
   More bytes equals longer download times.
2. Parse and compile cost
   JavaScript gets parsed and compiled on the main thread. When the main thread is busy, the page can't respond to user input.
3. Execution cost
   JavaScript is also executed on the main thread. If your page runs a lot of code before it's really needed, that also delays your Time To Interactive, which is one of the key metrics related to how users perceive your page speed.
4. Memory cost
   If your JavaScript holds on to a lot of references, it can potentially consume a lot of memory. Pages appear janky or slow when they consume a lot of memory. Memory leaks can cause your page to freeze up completely.

Why it is important

Javascript loading,parsing and compiling can drastically impact the user experience. User on a slow network connection might not experience the full functionality when script are taking a long time to load and parse.

There are several limits to human perception when it comes to using applications:

1. 0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
2. 1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.
3. 10 seconds is about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect.

How the audit fails

Sitefig shows a warning when JavaScript execution takes longer than 2 seconds.

The audit fails when execution takes longer than 3.5 seconds:

Fixing the problem

1. Only send the code that your users need by implementing code splitting.
2. Minify and compress your code.
3. Remove unused code.
4. Reduce network trips by caching your code with the PRPL pattern.