Every third-party origin requires a separate TCP connection and TLS handshake before the browser can send its first byte. On a typical network, that overhead is 100–300ms per origin (ISO-25010 time-behaviour). A page loading from fonts.googleapis.com, fonts.gstatic.com, and a CDN without preconnect directives pays that cost three times over — sequentially, if the browser has not yet opened those connections. The most visible symptom is delayed web font rendering, which blocks text display and contributes to layout shift.
Info because each missing preconnect adds 100–300ms of connection overhead per third-party origin, but the impact is bounded and depends on the number of distinct origins used.
Add <link rel="preconnect"> in <head> for the 3–4 origins used in the first 5 seconds of page load. Use dns-prefetch for lower-priority origins to avoid wasting TCP connections:
<!-- Google Fonts requires two origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Analytics: preconnect if loaded early -->
<link rel="preconnect" href="https://www.google-analytics.com">
<!-- Lower-priority third party: DNS only, no TCP socket held open -->
<link rel="dns-prefetch" href="https://cdn.example.com">
Limit total preconnect directives to 4. Each one holds a TCP socket open; exceeding that for rarely-used origins wastes browser connection budget.
ID: performance-core.loading-resource-priority.preconnect-third-party
Severity: info
What to look for: Scan HTML for <link rel="preconnect"> and <link rel="dns-prefetch"> directives. Identify all third-party origins used by the page: font services (fonts.googleapis.com, fonts.gstatic.com), analytics (google-analytics.com, segment.io), CDN providers, and API endpoints on different domains. Check whether the most latency-sensitive third-party origins have preconnect directives. Count the total number of preconnects and verify they are limited to origins used in the first 5 seconds of page load.
Pass criteria: The 3-4 most latency-sensitive third-party origins (fonts, analytics, CDN) have <link rel="preconnect"> directives with correct crossorigin attribute where needed. Origins not used immediately use dns-prefetch instead of preconnect to avoid wasting TCP connections. Total preconnects do not exceed 4.
Fail criteria: Pages load resources from third-party origins with no preconnect or dns-prefetch, adding 100-300ms of connection overhead per origin. More than 4 preconnect directives are present, wasting TCP connections for origins that may not be used. Critical font origin has no preconnect, delaying font rendering.
Skip (N/A) when: The project serves all resources (including fonts and analytics) from its own domain with no third-party origins.
Detail on fail: Name the unconnected third-party origins. Example: "fonts.gstatic.com has no preconnect; font file discovery incurs 180ms connection overhead. Analytics endpoint on api.segment.io connected without preconnect or dns-prefetch" or "6 preconnect directives configured; 3 are for low-priority origins rarely used in first 5s; wasting connections".
Remediation: Preconnect eliminates the TCP + TLS handshake latency for third-party origins. Add it to your <head> for the most critical origins:
<!-- Google Fonts: two origins needed -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Analytics: preconnect if loaded early, dns-prefetch if deferred -->
<link rel="preconnect" href="https://www.google-analytics.com">
<!-- Lower-priority third party: dns-prefetch instead -->
<link rel="dns-prefetch" href="https://cdn.example.com">
Limit preconnect to origins needed within the first 5 seconds. Use dns-prefetch for everything else — it only resolves the DNS without opening a TCP connection, so it is cheaper.