Reduce JavaScript execution time

May 2, 2019 • Updated Oct 4, 2019

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

• Network cost

  More bytes equals longer download times.

• 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.

• 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.

• 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.

How the Lighthouse JavaScript execution time audit fails #

Lighthouse shows a warning when JavaScript execution takes longer than 2 seconds. The audit fails when execution takes longer than 3.5 seconds:

To help you identify the biggest contributors to execution time, Lighthouse reports the time spent executing, evaluating, and parsing each JavaScript file that your page loads.

How to speed up JavaScript execution #

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

For other ways to improve page load, check out the Performance audits landing page.

Resources #

Source code for Reduce JavaScript execution time audit