HomeMethod

Knowledge

Web VitalsTechniquesSnippetsAnswersImpactsBottlenecks

Early Domain Connection

Warm up connections to critical third-party domains before their resources are requested.

Overview

Every new domain a page connects to requires a DNS lookup, TCP handshake, and TLS negotiation before any data transfers. Resource hints like preconnect and dns-prefetch tell the browser to perform these steps in the background, during early HTML parsing — so the connection is ready the moment a resource is actually requested.

Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, CLS.

The Problem

Web pages typically load resources from multiple third-party domains: Google Fonts, analytics, CDNs, video embeds. On a mobile connection, each new domain adds 100–500ms of connection overhead before the first byte of data. This overhead stacks up sequentially and directly delays LCP and FCP — especially for above-the-fold resources like custom fonts.

Performance Impact

LCP

100–500ms

critical third-party resources (fonts, images) skip connection setup

FCP

100–300ms

CSS and font connections established before they are needed

SI

DNS, TCP, and TLS to third-party origins are pre-warmed; their assets enter the visual timeline earlier

TTFB

Indirect

early CDN connection reduces latency for CDN-hosted critical assets

Risk: Low

preconnect uses browser resources — limit to 4–6 critical domains

How it works

  1. 01

    dns-prefetch — DNS resolution only

    <link rel="dns-prefetch" href="https://example.com"> tells the browser to resolve the domain name to an IP address in the background. This saves the DNS lookup time (typically 20–120ms) when a resource from that domain is eventually requested.

  2. 02

    preconnect — full connection setup

    <link rel="preconnect" href="https://example.com"> goes further: DNS lookup, TCP handshake, and TLS negotiation. By the time a resource is requested from that origin, the full connection is already established — saving 100–500ms on the first request.

  3. 03

    The crossorigin attribute for CORS resources

    For origins serving CORS-enabled resources (fonts, certain APIs), add the crossorigin attribute: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. Without it, the browser opens a separate connection for CORS requests, nullifying the preconnect.

  4. 04

    Hints are placed early in the head to maximise lead time

    Resource hints should appear as early as possible in <head> — before stylesheets and scripts — so the browser has maximum time to complete the connection before the resource is needed.

Adding resource hints in WordPress — functions.php

Code
<?php
function add_resource_hints() {
    // Google Fonts — preconnect (full) + dns-prefetch (fallback)
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "
";
    echo '<link rel="dns-prefetch" href="https://fonts.googleapis.com">' . "
";
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "
";

    // Analytics — dns-prefetch is sufficient (non-critical timing)
    echo '<link rel="dns-prefetch" href="https://www.google-analytics.com">' . "
";

    // CDN serving critical images — preconnect
    // echo '<link rel="preconnect" href="https://cdn.yoursite.com" crossorigin>' . "
";
}
add_action( 'wp_head', 'add_resource_hints', 1 );

Priority 1 means these hints are output before WordPress enqueues styles and scripts, giving the browser the maximum possible lead time.

Limitations

  • Each preconnect involves DNS + TCP + TLS — real CPU, battery, and bandwidth expenditure. Browsers limit concurrent preconnects. Adding more than 4–6 preconnects on a single page can cause connections to queue or compete with critical resources. Use dns-prefetch for lower-priority domains.
  • Most browsers close idle preconnected connections after 10–15 seconds. If you preconnect to a domain whose resources appear late in the page (below the fold, deferred), the connection may expire before it is used, wasting the effort.
  • Preconnecting to your own origin domain is redundant — the connection is already established by the first HTML request. Only use preconnect for genuinely external domains serving resources needed early in the load.

Common Mistakes

Using preconnect for every external domain

Preconnect is heavyweight. Use it only for critical domains (fonts, above-the-fold CDN assets) needed within the first 2–3 seconds. For analytics, social buttons, and other non-critical third parties, use dns-prefetch — lighter, lower risk.

Omitting the crossorigin attribute for fonts

Fonts loaded with fetch() or via CSS @font-face use CORS. Without crossorigin on the preconnect hint, the browser opens a second connection for the actual font request — the preconnect connection is abandoned and the savings are lost.

Placing resource hints late in the HTML

Resource hints added via JavaScript or placed near the bottom of <head> give the browser very little lead time. The earlier in <head> the hints appear, the more overlap there is between connection setup and HTML parsing.

Test this techniqueNetwork AuditRun the tool

Need help applying this to your site?

Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.

Start an Engagement
Support our family now