# Pages with Long JS Execution Time

**Priority**: Critical

**Impact**: Neutral

## What issues it may cause

<ul>
  <li>Network cost: More data means longer download times.</li>
  <li>
    Parse and compile cost: JavaScript is parsed and compiled on the main thread. When the main thread is busy, the page
    can't handle user interactions.
  </li>
  <li>
    Execution cost: JavaScript is executed on the main thread. If your page runs excessive code before it's needed, it
    can delay the Time To Interactive, which is a key metric for how users perceive your page speed.
  </li>
  <li>
    Memory cost: If your JavaScript retains numerous references, it can use up a lot of memory. High memory consumption
    can make pages feel sluggish or unresponsive. Memory leaks can lead to the page freezing entirely.
  </li>
</ul>

## How do you fix it

<ul>
  <li>Minifying and compressing JavaScript files to reduce their size and improve loading times.</li>
  <li>Deferring non-critical JavaScript so that only essential scripts are executed during initial page load.</li>
  <li>Lazy loading resources to only execute scripts when they are needed.</li>
  <li>Optimizing JavaScript code to reduce unnecessary computations and improve performance.</li>
  <li>Using code splitting to load only the code necessary for the current page or interaction.</li>
</ul>
[Learn more about how to reduce JavaScript execution
time.](https://developer.chrome.com/docs/lighthouse/performance/bootup-time/)

## What is the positive impact

<ul>
  <li>
    Faster Time to Interactive: Reducing bootup time means the page becomes interactive more quickly, allowing users to
    start engaging with the content sooner.
  </li>
  <li>
    Improved User Experience: Faster bootup times lead to smoother interactions and a more responsive website, resulting
    in a better experience for users.
  </li>
  <li>
    Reduced CPU Usage: Optimized bootup time minimizes the amount of CPU resources used during JavaScript execution,
    which can improve performance, especially on lower-end devices.
  </li>
  <li>
    Lower Memory Consumption: By improving bootup time, you can reduce memory usage, preventing slowdowns and crashes on
    devices with limited memory capacity.
  </li>
  <li>
    Higher User Retention and Engagement: Faster bootup times lead to more satisfying user interactions, encouraging
    users to stay on the page longer and engage more with the website's content.
  </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}
        ) {
          crawlSiteSpeedAudits(after: $after, reportType: Basic) {
            nodes {
              url
              auditId
              title
              displayValue
              savingsSecs
              pageviews
              productOfSavingsSecsAndPageviews
              itemsCount
              auditResult
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

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