Long Task

A long task is a task on the browser's main thread that takes longer than 50 ms to complete. While it runs, the browser cannot handle clicks, key presses or scrolling logic, and it cannot paint new frames.

Why it matters

The 50 ms line comes from the aim of responding to input within about 100 ms, leaving room for the task already running to finish. Long tasks are the main cause of poor INP and high TBT. They come from big script evaluation, heavy framework rendering, large JSON parsing, expensive loops and layout work.

Example

You can observe them in the browser:

new PerformanceObserver(list => {
  for (const e of list.getEntries()) {
    console.log('Long task', Math.round(e.duration), 'ms');
  }
}).observe({ type: 'longtask', buffered: true });

To break one up, process work in chunks and yield between them:

for (const chunk of chunks) {
  process(chunk);
  await new Promise(r => setTimeout(r, 0)); // yield
}

Common mistakes

• Optimizing network speed when the problem is script execution.
• Splitting work but never yielding, so it stays a single task.
• Moving heavy computation to a Web Worker only when it needs the DOM.
• Ignoring long tasks from third-party scripts.

Related

• Main thread
• TBT
• INP
• Code splitting

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.