How to Diagnose and Fix Long Tasks in Web Apps

Long tasks—defined as any JavaScript execution occupying the main thread for more than 50 milliseconds—are the primary culprits behind sluggish user interfaces and degraded Core Web Vitals metrics like Interaction to Next Paint (INP). When the main thread is blocked, the browser cannot respond to user inputs such as clicks, taps, or key presses, resulting in noticeable UI lag. This article explains how web development engineers systematically identify these performance bottlenecks using browser profiling tools and field APIs, followed by concrete engineering patterns to break up or offload computationally intensive work to maintain a responsive interface.

Identifying and Diagnosing Long Tasks

Diagnosing main thread congestion involves combining local lab profiling with real-world user data.

  1. Chrome DevTools Performance Panel
    Engineers record a user interaction flow in the Performance panel. The resulting flame chart highlights long tasks with red warning flags in the "Main" thread track. By drilling down into the flame chart, developers can pinpoint the exact call stack, execution times, and specific functions consuming processing time.

  2. The Long Tasks and Event Timing APIs
    To diagnose issues experienced by actual users, engineers deploy Real User Monitoring (RUM) scripts using the PerformanceObserver API. Observing entries with an entry type of longtask or event allows teams to log the duration, attribution, and start times of blocking tasks directly to an analytics endpoint:

    const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn(`Long task detected: ${entry.duration}ms`, entry);
  }
});
observer.observe({ type: "longtask", buffered: true });

  3. Total Blocking Time (TBT) and INP Audits
    Lighthouse and web vitals libraries aggregate long task durations between First Contentful Paint (FCP) and Time to Interactive (TTI) to calculate Total Blocking Time. High TBT values flag initialization bottlenecks, while high INP scores expose input-handling latency during regular session usage.

Strategies to Fix Long Tasks

Once a long task is mapped to a specific operation, engineers apply several strategies to prevent the main thread from blocking user interaction.

1. Yielding to the Main Thread

When executing a large loop or batch data processing, the execution should be broken into discrete chunks, giving the browser time to paint frames and process pending user events.

  • scheduler.yield(): Modern browsers support the Prioritized Task Scheduling API. Calling await scheduler.yield() yields execution back to the browser's event loop and immediately schedules the remainder of the task without losing context.
  • setTimeout() fallback: In environments without scheduler.yield(), wrapping the subsequent chunk of work in a setTimeout(..., 0) or requestIdleCallback() yields control back to the browser queue.

2. Offloading Compute to Web Workers

Tasks that do not interact directly with the DOM—such as large JSON parsing, image manipulation, cryptographic calculations, or data sorting—should run on a background thread using Web Workers. Because workers run in an isolated environment, heavy computations complete without interrupting the main thread's ability to render or handle events.

3. Optimizing Script Delivery and Execution

Often, long tasks occur during page load due to large bundles parsing and evaluating simultaneously.

  • Code Splitting: Dynamic import() statements allow bundles to be broken down, ensuring only the JavaScript required for the initial render executes on page load.
  • Remove Layout Thrashing: Interleaving DOM reads (e.g., element.offsetWidth) and DOM writes (e.g., element.style.width) forces synchronous layout recalculations within a task. Batching reads before writes eliminates repeated calculations inside JavaScript loops.

4. Utilizing Framework Concurrency

Modern frontend frameworks provide primitives to mark updates as non-urgent. In React, for example, wrapping heavy state transitions inside startTransition marks the associated work as interruptible, allowing urgent user interactions to take priority over rendering expensive background components.