Interaction
Longtask

Long Task

To determine when long tasks happen, you can use PerformanceObserver (opens in a new tab) and register to observe entries of type longtask:

Snippet

try {
  const po = new PerformanceObserver((list) => {
    const numLongTasks = list.getEntries().length;
    for (const entry of list.getEntries()) {
      console.table(entry.toJSON());
    }
    console.log(
      `%cNum. Long Tasks: ${numLongTasks}`,
      "color: #FF4E42; font-weight: bold",
    );
  });
  po.observe({ type: "longtask", buffered: true });
} catch (e) {
  console.error(`The browser doesn't support this API`);
}
Long Animation FramesTTFB