Preconnect

Performance

A resource hint (<link rel="preconnect">) that tells the browser to establish a connection (DNS + TCP + TLS) to a specified origin before it's needed. Saves 100–300ms when the browser eventually requests resources from that origin.

Updated Mar 9, 2026

Full Explanation

When the browser encounters a resource from a third-party origin (your CDN, a font service, an analytics provider), it has to perform DNS resolution, TCP handshake, and TLS negotiation before fetching anything. Preconnect tells the browser to do all of this upfront, while it's still parsing HTML or downloading other resources.

For CDN setups where assets are served from a different domain (e.g., cdn.example.com while the page is on www.example.com), preconnect eliminates the connection setup delay for the first asset request. This directly improves Largest Contentful Paint (LCP) when the LCP image is on the CDN domain.

Don't overuse preconnect. Each hint consumes CPU and bandwidth for the handshake. Limit it to 2–4 critical origins. For origins you'll use on the next page but not this one, use dns-prefetch instead (cheaper, DNS only).

Examples

HTML resource hints:

<head>
    <!-- Preconnect to CDN (DNS + TCP + TLS) -->
    <link rel="preconnect" href="https://cdn.example.com">

    <!-- Preconnect to font provider -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Fallback for browsers without preconnect -->
    <link rel="dns-prefetch" href="https://cdn.example.com">
</head>

Measuring preconnect impact:

# Without preconnect (Resource Timing API)
// connectStart to connectEnd includes TCP + TLS
performance.getEntriesByName('https://cdn.example.com/hero.jpg')[0]
// connectEnd - connectStart = 120ms

# With preconnect
// connectEnd - connectStart = 0ms (already connected)
// Saves ~120ms on first resource from that origin

Video Explanation

Frequently Asked Questions

A resource hint (<link rel="preconnect">) that tells the browser to establish a connection (DNS + TCP + TLS) to a specified origin before it's needed. Saves 100–300ms when the browser eventually requests resources from that origin.

HTML resource hints:

<head>
    <!-- Preconnect to CDN (DNS + TCP + TLS) -->
    <link rel="preconnect" href="https://cdn.example.com">

    <!-- Preconnect to font provider -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Fallback for browsers without preconnect -->
    <link rel="dns-prefetch" href="https://cdn.example.com">
</head>

Measuring preconnect impact:

# Without preconnect (Resource Timing API)
// connectStart to connectEnd includes TCP + TLS
performance.getEntriesByName('https://cdn.example.com/hero.jpg')[0]
// connectEnd - connectStart = 120ms

# With preconnect
// connectEnd - connectStart = 0ms (already connected)
// Saves ~120ms on first resource from that origin
Previous Term Point of Presence (PoP)
Next Term Prefetch
Back to Glossary