# Long Main Thread Tasks

**Priority**: Critical

**Impact**: Negative

## What issues it may cause

<ul>
  <li>
    <strong>Delayed Interactivity:</strong> Long tasks can delay the responsiveness of a webpage, making interactions
    feel sluggish and unresponsive to users.
  </li>
  <li>
    <strong>Poor User Experience:</strong> Lengthy processing times can frustrate users, leading to higher bounce rates
    and lower engagement.
  </li>
  <li>
    <strong>Reduced Performance:</strong> Long tasks can significantly impact overall page performance, affecting
    metrics such as time to interactive and first input delay.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Optimize JavaScript:</strong> Long scripts are often a cause of long tasks. Identify and refactor complex or
    inefficient JavaScript code to reduce execution times.
  </li>
  <li>
    <strong>Minimize Render-Blocking Operations:</strong> Optimize rendering processes to prevent long tasks from
    blocking critical rendering tasks.
  </li>
  <li>
    <strong>Use Web Workers:</strong> Offload heavy computation to web workers to run scripts concurrently, reducing the
    impact on the main thread.
  </li>
</ul>
[Learn more about optimizing long tasks.](https://web.dev/articles/long-tasks-devtools)

## What is the positive impact

<ul>
  <li>
    <strong>Improved Responsiveness:</strong> Mitigating long tasks enhances the responsiveness of the webpage,
    providing users with a smoother browsing experience.
  </li>
  <li>
    <strong>Enhanced User Satisfaction:</strong> Faster page responsiveness contributes to higher user satisfaction and
    engagement metrics.
  </li>
  <li>
    <strong>Better Performance Metrics:</strong> Addressing long tasks positively impacts performance metrics such as
    time to interactive, ultimately leading to better overall website performance.
  </li>
</ul>

## 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:


```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
            }
          }
       }
     }
```

**Variables:**
```json
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"long_tasks_failed_items"}
```