# Pages with Large Critical Request Chains

**Priority**: Critical

**Impact**: Negative

## What issues it may cause

<ul>
  <li>
    <strong>Delayed Page Rendering:</strong> Since resources in a CRC must be loaded in sequence, any delay in fetching
    one resource delays all subsequent resources in the chain. This increases the time to first render and the overall
    time to interactive, which can lead to a poor user experience.
  </li>
  <li>
    <strong>Increased Latency:</strong> The more steps there are in a request chain, the greater the cumulative latency,
    which can be particularly problematic for users with slow or unstable internet connections.
  </li>
  <li>
    <strong>Resource Blockages:</strong> Critical resources that are loaded late in the sequence can block the rendering
    of important page elements, such as above-the-fold content.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Minimize the Number of Critical Resources:</strong> Reducing the number of resources that are critical to
    initial page rendering can significantly decrease the length of critical request chains.
  </li>
  <li>
    <strong>Optimize the Loading Order:</strong> Prioritizing the loading of critical resources through techniques like
    resource hinting (preload, prefetch) can help ensure that key resources are loaded faster and earlier in the page
    load process.
  </li>
  <li>
    <strong>Reduce Request Overhead:</strong> Combining resources (such as scripts and stylesheets) and minimizing their
    size through compression can reduce the number of requests and the amount of data transferred, thus shortening the
    CRC.
  </li>
  <li>
    <strong>Use HTTP/2:</strong> Leveraging HTTP/2 allows multiple resources to be loaded in parallel over a single
    connection, which can help mitigate the impact of critical request chains by reducing the time spent waiting on
    sequential load processes.
  </li>
</ul>
[Learn more about chaining critical
requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains/)

## What is the positive impact

<ul>
  <li>
    <strong>Improved Page Load Speed:</strong> Optimizing critical request chains results in faster rendering of
    above-the-fold content, enhancing the overall page load speed and user experience.
  </li>
  <li>
    <strong>Enhanced Perceived Performance:</strong> Prompt loading of essential resources improves the perceived
    performance of the webpage, making it feel more responsive to users.
  </li>
  <li>
    <strong>Reduced Bounce Rates:</strong> Faster loading times and improved user experience contribute to lower bounce
    rates, as users are more likely to stay engaged with the page.
  </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
              savingsScore
              description
              auditResult
              productOfSavingsKibAndPageviews
              productOfSavingsSecsAndPageviews
              savingsKib
              savingsSecs
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

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