Main Thread Execution Timeline

JavaScript task execution is the source of the biggest and most common performance bottlenecks. Avoiding long-running tasks and blocking the JavaScript main thread is one of the most critical performance strategies to employ.

The Main Thread Execution Timeline, found on the Overview and Third Party tabs for Snapshots and Single Page Tests, helps you identify long tasks that took more than 50ms to execute during page load. Calibre showcases both parent and children tasks that contribute to a long task warning, so you can identify which specific task causes the most issues.

Timeline chart showing main thread execution of long JavaScript tasks

Each task (identified as Task) is accompanied by a long task warning showing the “blocking period” of each script which contributes to Total Blocking Time and is classified as one of:

  • Scripting (consisting of Parse and Compile or Script Evaluation)
  • Rendering
  • Style & Layout
  • Parse HTML & CSS

Hovering a task will show the total and blocking duration, and the source of the task as either an identified third party or a JavaScript file.

The Main Thread Execution Timeline showcases all long task warnings and blocking times in the lifespan of the main thread activity. For that reason, the sum of blocking times portrayed will likely be higher than reported Total Blocking Time, which is limited to the period between First Contentful Paint and Time to Interactive.