Skip to main content

Pages with Large Critical Request Chains

Priority: Critical

Impact: Negative

What issues it may cause​

  • Delayed Page Rendering: 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.

  • Increased Latency: 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.

  • Resource Blockages: Critical resources that are loaded late in the sequence can block the rendering of important page elements, such as above-the-fold content.

How do you fix it​

  • Minimize the Number of Critical Resources: Reducing the number of resources that are critical to initial page rendering can significantly decrease the length of critical request chains.

  • Optimize the Loading Order: 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.

  • Reduce Request Overhead: 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.

  • Use HTTP/2: 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.

Learn more about chaining critical requests

What is the positive impact​

  • Improved Page Load Speed: Optimizing critical request chains results in faster rendering of above-the-fold content, enhancing the overall page load speed and user experience.

  • Enhanced Perceived Performance: Prompt loading of essential resources improves the perceived performance of the webpage, making it feel more responsive to users.

  • Reduced Bounce Rates: Faster loading times and improved user experience contribute to lower bounce rates, as users are more likely to stay engaged with the page.

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:

query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
  getCrawl(id: $crawlId) {
    reportsByCode(
      input: {
        reportTypeCodes: Basic
        reportTemplateCodes: [$reportTemplateCode]
      }
    ) {
      rows {
        nodes {
          ... on CrawlSiteSpeedAudits {
            url
            auditId
            title
            displayValue
            savingsScore
            description
            auditResult
            productOfSavingsKibAndPageviews
            productOfSavingsSecsAndPageviews
            savingsKib
            savingsSecs
          }
        }
      }
    }
  }
}

Try in explorer