When main-thread JavaScript blocks interactivity

A Long Task is JavaScript that holds the main thread for an extended stretch, effectively freezing the UI. During page load, long tasks are especially costly: the page may look ready, but event listeners and click handlers may not be attached yet, so taps and clicks do nothing. The result is a measurable jump in Time to Interactive (TTI).

Chrome DevTools now flags these tasks directly in the Performance panel, removing the need to hunt through raw traces by eye.

What qualifies as a Long Task

Any main-thread task that runs longer than 50 ms is classified as a Long Task. That threshold comes from the RAIL model, which recommends processing input events within 50 ms so a visible response appears within 100 ms, keeping the connection between action and reaction intact.

Note that Interaction to Next Paint (INP) allows up to 200 ms for a response, a more realistic target for slower devices, but the Long Task definition is unchanged.

Finding Long Tasks in DevTools

Previously, spotting these required scanning the Performance panel for script blocks longer than 50 ms or instrumenting the page with the Long Tasks API. The current DevTools visualization does the work for you:

  1. Record a trace of the page load in the Performance panel.
  2. Look for red flags on the main thread. Long Tasks appear as gray bars labeled Task.
  3. Hover over a gray bar to see a dialog with the task duration and whether it is flagged as a Long Task.

To find the root cause, select a gray Task bar and open the drawer beneath. Choose Bottom-Up with Group by Activity to see which operations contributed the most time. In many cases, the culprit is a cluster of expensive DOM queries.

Common optimizations

Oversized scripts are a frequent source of Long Tasks. Code splitting is the standard first move. Third-party scripts deserve the same scrutiny—their long tasks can delay your primary content from becoming interactive.

Beyond splitting, break work into chunks that each run in under 50 ms and schedule them at the right time. Some chunks may be better off the main thread entirely, for example in a service worker. For a more detailed strategy, see the guidance on optimizing long tasks and the "Idle Until Urgent" pattern.

Minimizing Long Tasks keeps pages responsive and preserves the experience users expect when they load your site. For broader context on tracking these tasks, refer to the user-centric performance metrics documentation.