Reduce JavaScript execution time
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.
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.
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