# Preconnect added for third-party origins - **Pattern:** `ab-002000` (`performance-core.loading-resource-priority.preconnect-third-party`) - **Severity:** info - **Lifecycle:** active - **Last modified:** 2026-04-18 - **Canonical URL:** https://auditbuffet.com/patterns/ab-002000 - **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002000) ## Why it matters 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. ## Severity rationale 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. ## Remediation Add `` in `` 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: ```html ``` Limit total `preconnect` directives to 4. Each one holds a TCP socket open; exceeding that for rarely-used origins wastes browser connection budget. ## Detection - **ID:** `preconnect-third-party` - **Severity:** `info` - **What to look for:** Scan HTML for `` and `` 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 `` 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 `` for the most critical origins: ```html ``` 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. ## External references - iso-25010 performance-efficiency.time-behaviour Taxons: performance HTML version: https://auditbuffet.com/patterns/ab-002000