Learn Measure Blog About

Minimize main thread work

Updated
Appears in: Performance audits

The browser's renderer process is what turns your code into a web page that your users can interact with. By default, the main thread of the renderer process typically handles most code: it parses the HTML and builds the DOM, parses the CSS and applies the specified styles, and parses, evaluates, and executes the JavaScript.

The main thread also processes user events. So, any time the main thread is busy doing something else, your web page may not respond to user interactions, leading to a bad experience.

How the Lighthouse main thread work audit fails

Lighthouse flags pages that keep the main thread busy for longer than 4 seconds during load:

A screenshot of the Lighthouse Minimize main thread work audit

To help you identify the sources of main thread load, Lighthouse shows a breakdown of where CPU time was spent while the browser loaded your page.

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

How to reduce load on the main thread

Many activities, like parsing CSS and laying out the page, can keep the main thread busy. However, parsing, compiling, and executing JavaScript is often the biggest source of work on the main thread.

Consider these tactics to improve JavaScript performance during page load:

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

Resources

Last updated: Improve article