Skip to main content

Preconnect Hints to Critical Third-Party Origins

Issue No: 113

Category: Resource Hints & Performance Issue Type: Warning Priority: Important

Description​

Pages that load resources from third-party origins (fonts, CDN, APIs) should declare <link rel="preconnect"> hints so the browser can establish TCP/TLS connections to those origins early, reducing connection latency for external resources.

The XeoPix crawler identifies external origins by scanning resource URL attributes (src, href) across <script>, <link>, <img>, and <source> tags in the raw HTML, comparing each hostname against the page's own crawled origin. It then checks whether a matching preconnect hint exists for each external hostname found. The trigger only fires when external origins are actually referenced in the HTML but lack a preconnect hint.

How Do We Capture It​

Where to Find​

Inside HTML <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

HTML Extraction Flow​

The XeoPix crawler downloads the raw HTML response and parses the <head> block:

  1. Issues an HTTP GET to the target URL.
  2. Reads raw response bytes without JavaScript execution.
  3. Scans the <head> block for all <link> tags.
  4. Filters for tags where rel equals preconnect.
  5. Extracts the href attribute from each matched tag.
  6. Records whether the crossorigin attribute is present on each tag.
  7. Collects the full list of preconnect origins into an array.
  8. Scans all <script src>, <link href>, <img src>, and <source src> attributes across the full HTML document.
  9. Extracts the origin (scheme + hostname) from each resource URL.
  10. Compares each extracted origin against the page's own crawled origin to identify external origins.
  11. For each distinct external origin found, checks whether a matching <link rel="preconnect"> hint with the same origin exists.
  12. Stores the list of external origins that have no corresponding preconnect hint.

Validation Logic​

The crawler validates:

  • Whether any <link rel="preconnect"> tag exists.
  • Whether the href is a valid origin URL (scheme + host, no path).
  • Whether any preconnect tag declares the crossorigin attribute (required for font origins).
  • Whether each distinct external origin referenced in the HTML has a corresponding preconnect hint.

How to Get It​

Crawler should:

  1. Parse raw HTML <head>.
  2. Find all: link[rel="preconnect"].
  3. Extract href and presence of crossorigin from each; build a set of covered origins.
  4. Count matched tags and store preconnect origin list.
  5. Scan all <script src>, <link href>, <img src>, <source src> tags in the full document.
  6. Extract origin (scheme + hostname) from each resource URL.
  7. Compare against the page's own crawled origin; collect distinct external origins.
  8. Produce the list of external origins that have no matching entry in the preconnect set.

What to Store​

FieldTypeComment
has_preconnect_hintsBOOLEANWhether any preconnect link tag is declared in the page head
preconnect_originsTEXT[]Array of origin URLs declared in preconnect tags
preconnect_countINTNumber of preconnect link tags found on the page
preconnect_with_crossorigin_countINTNumber of preconnect tags that include the crossorigin attribute
has_external_originsBOOLEANWhether the page HTML references any resource on a different origin than the crawled page
external_originsTEXT[]Distinct external origin URLs found in script/link/img/source resource attributes
external_origin_countINTNumber of distinct external origins referenced in the page HTML
has_external_origins_without_preconnectBOOLEANWhether any external origin found in the HTML has no matching preconnect hint
external_origins_without_preconnectTEXT[]List of external origins that have no corresponding preconnect hint declared

Condition for Trigger​

The following trigger rule fires only when the HTML contains references to external origins that have no preconnect hint.

  • Trigger Rule 1: External Origins Referenced Without Preconnect Hint
    • Target Field: has_external_origins_without_preconnect
    • Evaluation Logic: = TRUE
    • Severity: WARNING
    • Diagnostic Message: "One or more third-party origins are referenced in the page HTML but have no preconnect hint. Each uncovered external origin incurs full DNS + TCP + TLS connection latency before its resources can download. Add a preconnect hint for each critical external origin."

Sources​

Long Description​

When a browser encounters a resource on a third-party origin (e.g., a Google Font, a CDN asset, or an analytics API), it must complete a full connection sequence before downloading the resource:

  1. DNS lookup (resolves hostname to IP address)
  2. TCP handshake (establishes connection)
  3. TLS negotiation (for HTTPS — adds 1–2 round trips)

This sequence can cost 100–500ms or more for distant origins. The preconnect hint instructs the browser to begin this connection process immediately when the HTML is parsed — before the resource is actually needed.

Example for a Google Fonts origin:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

The crossorigin attribute is required when the resource will be fetched with CORS (e.g., fonts). Without it, the preconnected socket cannot be reused for the actual font download, wasting the connection.

Without preconnect hints:

  • Every third-party origin incurs full DNS + TCP + TLS latency on first use.
  • LCP is delayed if the LCP image or font comes from an external origin.
  • Total Blocking Time increases if a blocking script origin has no preconnect.

With preconnect hints:

  • Browser opens the connection during HTML parsing, in parallel with other work.
  • By the time the resource request fires, the connection is already established.
  • Typical savings: 100–500ms per origin.

Common failure scenarios:

1. No Preconnect for Google Fonts​

A page loads fonts from fonts.googleapis.com and fonts.gstatic.com but declares no preconnect hints. Both origins incur full connection latency on every page load.

2. Preconnect Without crossorigin for Font Origins​

<!-- BAD: crossorigin missing for font delivery -->
<link rel="preconnect" href="https://fonts.gstatic.com">

<!-- GOOD -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Without crossorigin, the preconnected socket is for a non-CORS request and cannot be reused for the actual CORS font fetch, resulting in a second connection being opened.

3. Preconnect to Too Many Origins​

Preconnect opens a socket and holds it open. Declaring more than 6 preconnect hints can tie up browser connection slots and slow down the primary origin. Limit preconnect to critical origins only.

4. Preconnect Without Actual Resource Usage​

Declaring preconnect to an origin that the page never actually requests wastes connection slots. The crawler cannot detect this — it can only confirm the hint exists.

How to Fix​

Add <link rel="preconnect"> tags for each critical third-party origin in the page <head>:

<!-- For font delivery origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- For CDN origins -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- For API origins (if blocking) -->
<link rel="preconnect" href="https://api.example.com">

Guidelines:

  • Use crossorigin for any origin serving CORS resources (fonts, scripts loaded with CORS).
  • Limit preconnect to 4–6 truly critical origins to avoid exhausting connection slots.
  • For non-critical third-party domains, prefer dns-prefetch instead (Issue 114).
  • Place preconnect hints as early as possible in the <head>, before any stylesheets or scripts.