Skip to main content

Key Requests without Preconnect

Priority: Critical

Impact: Negative

What issues it may cause​

  • Missed Opportunity for Optimization: If rel="preconnect" is not used, the browser has to wait until it encounters a resource that requires a connection to an external origin before it begins setting up that connection. This can add significant delay, especially if the resource is critical to the page’s functionality.

  • Increased Latency: Without preconnecting, the time taken to establish a connection to the server (including DNS lookup, TCP handshake, and TLS negotiation) is added to the time it takes to fetch the resource, which can delay the loading of important resources and thus slow down the page's initial rendering.

  • Poor User Experience: Longer page load times can frustrate users, leading to higher bounce rates and potentially lower engagement and conversions.

How do you fix it​

  • Identify Critical External Resources: Determine which third-party resources (such as fonts, APIs, or CDNs) are crucial for your page's initial rendering.

  • Add rel="preconnect" in the <head>: Include <link rel="preconnect" href="https://example.com"> in the <head> section of your HTML for each critical external origin. This should be done for origins that your page will definitely connect to, ensuring the browser establishes connections as early as possible.

  • Consider Preconnecting to Multiple Origins: If your site relies on multiple external origins, make sure to include preconnect links for each one. However, avoid overusing it as unnecessary preconnects can also waste resources.

Learn more about preconnecting key requests.

What is the positive impact​

  • Faster Initial Page Load: By preconnecting to critical origins, you reduce the time spent on DNS lookups, TCP handshakes, and TLS negotiations, leading to faster resource fetching and quicker initial page load.

  • Improved User Experience: Faster page loads mean users can start interacting with your page sooner, leading to better engagement and satisfaction.

  • Enhanced Performance Metrics: Optimizing the use of rel="preconnect" can improve key performance metrics such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP), which are crucial for both user experience and SEO.

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 CrawlSiteSpeedAuditOpportunities {
            opportunityDigest
            element
            title
            auditId
            exampleUrl
            wastedSecsAvg
            urlCount
            wastedSecsSum
            gaPageviewsSum
            savingsScoreSum
          }
        }
      }
    }
  }
}

Try in explorer