Long Tasks

ELI5 — The Vibe Check

Long Tasks are any JavaScript tasks that take more than 50ms and block the main thread. During a Long Task, your page freezes — clicks don't register, animations stutter, and users get frustrated. They're the silent killers of web performance.

Real Talk

Long Tasks are defined as any tasks on the browser's main thread that exceed 50 milliseconds. They block user input, cause visual jank, and degrade interactivity. The Long Tasks API allows monitoring these through PerformanceObserver, helping identify JavaScript bottlenecks that affect responsiveness.

Show Me The Code

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

When You'll Hear This

"Our analytics flagged a 300ms long task during page load — it's blocking interactivity" / "Break long tasks into smaller chunks using requestIdleCallback or setTimeout"