Addy Osmani

ALong Task isJavaScript code that monopolizes the main thread for extended periods of time,causing the UI to "freeze".

While a page page is loading, Long Tasks can tie up the main thread and make thepage unresponsive to user input, even if it looks ready. Clicks and taps oftendon't work because interactive features like event listeners and click handlershaven't yet been attached to UI elements. Because of this, Long Tasks cangreatly increase yourTime to Interactive.

Chrome DevTools can nowvisualize Long Tasks,making it easier to see tasks that need optimizing.

What counts as a Long Task?

CPU-heavy Long Tasks are caused by complex work that takes longer than50 ms.The RAIL model suggests you process user inputevents in50 ms toensure a visible response within 100 ms and preserve the connection betweenaction and reaction.

Key point: While the RAIL model suggests providing a visual response to userinput within 100 ms, theInteraction to Next Paint (INP)metric's thresholds allow for up to 200 ms to set more achievable expectations,especially for slower devices.

Are there Long Tasks in my page that could delay interactivity?

Until now, you've needed to manually look for "long yellow blocks" of scriptover 50ms long inChrome DevToolsor use theLong Tasks APIto figure out what tasks were delaying interactivity.

To help ease your performance auditing workflow,DevTools now visualizes Long Tasks.Tasks (shown in gray) have red flags if they are Long Tasks.

To use the new visualization tool:

1. Record a trace in thePerformance panelof loading a web page.
2. Look for a red flag in the main thread view. You should see tasks are nowmarked in gray and labeledTask.
3. Hold your pointer over a gray bar. You'll see a dialog showing the taskduration and whether it's considered a Long Task.

What is causing my Long Tasks?

To discover the cause of a long task, select the grayTask bar. In thedrawer beneath, selectBottom-Up andGroup by Activity. This lets yousee what activities contributed the most (in total) to the task taking so longto complete. In the following example, the cause of the delay looks like acostly set of DOM queries.

What are common ways to optimize Long Tasks?

Large scripts are often a major cause of Long Tasks. Considersplitting them up.Also keep an eye on third-party scripts, which can also contain Long Tasks thatdelay primary content becoming interactive.

Break all your work into chunks that run in < 50 ms, and run these chunksat the right place and time. The right place for some of them might be off themain thread, in a service worker. For guidance on breaking up long tasks, seeOptimize Long Tasks and Phil Walton'sIdle Until Urgent.

Keep your pages responsive. Minimizing Long Tasks is a great way to ensure yourusers have a delightful experience when they visit your site. For moreinformation on Long Tasks, refer toUser-centric Performance Metrics.