Long Tasks

Why They Matter

• They block user interactions. While a long task runs, the browser cannot process clicks, keyboard input, or scroll events. Users press a button and nothing happens — the input just waits in a queue until the task finishes.
• They directly hurt INP scores. Interaction to Next Paint measures responsiveness. If a user interaction has to wait behind a long task, the delay shows up directly in the INP metric, worsening your Core Web Vitals.
• They cause visual jank. Animations, transitions, and scrolling stutter when long tasks monopolize the main thread. The browser cannot paint frames while it is busy executing heavy JavaScript.
• They accumulate. One 200-millisecond task is bad. Six of them during page load make the entire experience feel sluggish. Long tasks tend to cluster during initialization, making the first few seconds of page interaction the worst.

How to Fix Them

1. Break large tasks into smaller chunks. Instead of processing everything in one go, split the work into pieces that each take less than 50 milliseconds. Use setTimeout, requestAnimationFrame, or scheduler.yield() to give the browser breathing room between chunks.
2. Defer non-essential work. If heavy processing is not needed for the initial user experience, delay it until after the page is interactive. Loading analytics, processing secondary data, or initializing below-the-fold features can wait.
3. Move heavy computation to web workers. Web workers run on a separate thread, so they do not block the main thread at all. Any CPU-intensive work that does not need direct DOM access is a candidate for a web worker.
4. Reduce JavaScript overall. The less JavaScript running on your page, the fewer opportunities for long tasks to form. Remove unused libraries, trim unnecessary features, and keep your code lean.
5. Profile to find the worst offenders. Use your browser's Performance tab to identify exactly which tasks are longest and what code is responsible. Focus on the biggest blockers first for maximum impact.

Common Mistakes

• Running everything at page load. Initializing every script, library, and feature during page load creates a cluster of long tasks right when the user first tries to interact. Stagger initialization to spread the work out.
• Not profiling before optimizing. Guessing which code causes long tasks wastes effort. Use browser profiling tools to measure where the actual bottlenecks are before making changes.
• Only testing on fast devices. A task that takes 30 milliseconds on your development machine might take 150 milliseconds on a mid-range phone. Always test on devices that represent your actual audience.
• Ignoring third-party scripts. Analytics, chat widgets, and ad scripts frequently create long tasks. They run on your main thread just like your own code and contribute equally to unresponsiveness.