Skip to main content

Long Main Thread Tasks

Priority: Critical

Impact: Negative

What issues it may cause​

  • Delayed Interactivity: Long tasks can delay the responsiveness of a webpage, making interactions feel sluggish and unresponsive to users.

  • Poor User Experience: Lengthy processing times can frustrate users, leading to higher bounce rates and lower engagement.

  • Reduced Performance: Long tasks can significantly impact overall page performance, affecting metrics such as time to interactive and first input delay.

How do you fix it​

  • Optimize JavaScript: Long scripts are often a cause of long tasks. Identify and refactor complex or inefficient JavaScript code to reduce execution times.

  • Minimize Render-Blocking Operations: Optimize rendering processes to prevent long tasks from blocking critical rendering tasks.

  • Use Web Workers: Offload heavy computation to web workers to run scripts concurrently, reducing the impact on the main thread.

Learn more about optimizing long tasks.

What is the positive impact​

  • Improved Responsiveness: Mitigating long tasks enhances the responsiveness of the webpage, providing users with a smoother browsing experience.

  • Enhanced User Satisfaction: Faster page responsiveness contributes to higher user satisfaction and engagement metrics.

  • Better Performance Metrics: Addressing long tasks positively impacts performance metrics such as time to interactive, ultimately leading to better overall website performance.

How to fetch the data for this report template​

You will need to run a crawl for report template to generate report. When report has been generated and you have crawl id you can fetch data for the report using the following query:

Operation: query GetReportStatForCrawl( $crawlId: ObjectID! $reportTemplateCode: String! $after: String ) { getReportStat( input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode} ) { crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) { nodes { opportunityDigest element title auditId exampleUrl wastedSecsAvg urlCount wastedSecsSum gaPageviewsSum savingsScoreSum } totalCount pageInfo { endCursor hasNextPage } } } }Variables: {"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"long_tasks_failed_items"}
GetReportStatForCrawlTry in Explorer
GraphQL
query GetReportStatForCrawl(
    $crawlId: ObjectID!
    $reportTemplateCode: String!
    $after: String
   ) {
      getReportStat(
        input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
      ) {
        crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) {
          nodes {
            opportunityDigest
            element
            title
            auditId
            exampleUrl
            wastedSecsAvg
            urlCount
            wastedSecsSum
            gaPageviewsSum
            savingsScoreSum
          }
          totalCount
          pageInfo {
            endCursor
            hasNextPage
          }
        }
     }
   }