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
- Variables
- cURL
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
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"uses_rel_preconnect_failed_items"}
curl -X POST -H "Content-Type: application/json" -H "apollographql-client-name: docs-example-client" -H "apollographql-client-version: 1.0.0" -H "x-auth-token: YOUR_API_SESSION_TOKEN" --data '{"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 } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"uses_rel_preconnect_failed_items"}}' https://api.lumar.io/graphql