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:
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 minimize main thread work #
The sections below are organized based on the categories that Lighthouse reports. See The anatomy of a frame for an overview of how Chromium renders web pages.
See Do less main thread work to learn how to use Chrome DevTools to to investigate exactly what your main thread is doing as the page loads.
Script evaluation #
Style and layout #
- Reduce the scope and complexity of style calculations
- Avoid large, complex layouts and layout thrashing
- Stick to compositor only properties and manage layer count
- Simplify paint complexity and reduce paint areas
Parsing HTML and CSS #
Script parsing and compilation #
Garbage collection #
- Source code for Minimize main thread work audit
- Main thread (MDN)
- Inside look at modern web browser (part 3)