Long Tasks · Definition & Explanation 2026

A Long Task is any task that runs on the browser's main thread for 50 milliseconds or more. During a long task, the browser cannot process user input, making the page feel unresponsive.

The 50ms threshold comes from the RAIL model: to feel instant, the browser must respond to user input within 100ms. Since the browser needs ~50ms for its own work (rendering, compositing), only 50ms is available for JavaScript. Any task exceeding this budget blocks user interactions.

The blocking time of a long task is the portion exceeding 50ms. A 70ms task has 20ms blocking time; a 200ms task has 150ms. TBT sums all blocking times during loading.

• •2017 — Long Tasks API proposed as a W3C specification for detecting main-thread blocking.
• •2019 — TBT introduced in Lighthouse, directly measuring long task impact during loading.
• •2024 — INP replaces FID as CWV, making long task optimization critical for all interactions, not just the first.
• •2025–2026 — scheduler.yield() available in Chrome 129+, providing the standard way to break long tasks.

Detection tools:

• •Long Tasks API — `new PerformanceObserver(list => {}).observe({type: 'longtask'})` detects long tasks programmatically in field.
• •Chrome DevTools Performance panel — Long tasks appear as yellow/red bars in the flame chart. Click to see which functions are responsible.
• •Lighthouse — 'Avoid long main-thread tasks' audit lists all long tasks during loading.
• •Web Vitals library — Reports INP attribution including long task information.

1. 1Large JavaScript execution — Parsing and executing a 500KB+ script bundle.
2. 2DOM manipulation — Adding/removing hundreds of elements at once.
3. 3Complex calculations — Data processing, sorting, filtering large arrays.
4. 4Framework rendering — React reconciliation, Vue reactivity, Angular change detection.
5. 5Third-party scripts — Analytics, chat widgets, A/B testing tools.
6. 6Layout thrashing — Reading layout properties then writing DOM changes in a loop.