Main Thread Work · Definition & Explanation 2026

Main Thread Work refers to all processing on the browser's single main thread during page load:

• •Script Evaluation — Parsing and executing JavaScript (typically 40-60% of total).
• •Style & Layout — Computing CSS styles and calculating element positions (10-20%).
• •Rendering — Paint and compositing operations (5-15%).
• •HTML Parsing — Building the DOM tree (5-10%).
• •Other — Garbage collection, browser internals (5-10%).

Lighthouse sums all categories and flags pages exceeding 4 seconds total. The 'Minimize main-thread work' audit shows the breakdown by category.

• •2018 — Lighthouse adds 'Minimize main-thread work' audit with category breakdown.
• •2020 — Audit becomes a key diagnostic as CWV highlight the importance of main-thread efficiency.
• •2024 — INP as CWV makes main-thread optimization critical throughout the page lifecycle, not just during loading.
• •2025–2026 — Web Workers, partial hydration, and scheduler APIs provide new tools for reducing main-thread pressure.

Measured by Lighthouse during simulated page load. The 'Minimize main-thread work' audit shows total time and category breakdown.

Also visible in Chrome DevTools Performance panel — the 'Summary' tab shows time distribution by category when recording a page load.

1. 1Large JavaScript bundles — Script evaluation dominates main-thread time.
2. 2Unused JavaScript/CSS — Downloaded, parsed, and processed but never used.
3. 3Complex CSS selectors — Force expensive style recalculation.
4. 4Excessive DOM size — More nodes = more style/layout computation.
5. 5Layout thrashing — Reading and writing layout properties alternately.
6. 6Third-party scripts — Analytics, ads, chat add significant script evaluation time.
7. 7Unoptimized images — Large images require more decoding time on the main thread.