Preconnect tells the browser to establish a connection to a third-party origin (DNS lookup + TCP + TLS) before it's needed. This eliminates 100-300ms of latency when the actual resource request is made.

What's the difference between preconnect and dns-prefetch?

dns-prefetch only resolves DNS (saves ~20-50ms). Preconnect does DNS + TCP + TLS (saves ~100-300ms). Use preconnect for critical origins, dns-prefetch for nice-to-have ones.

How many origins should I preconnect to?

Limit to 3-4 critical origins. Each preconnect uses CPU and network resources. Too many preconnects can actually hurt performance by competing with real resource downloads.

When should I use preload instead of preconnect?

Use preconnect when you know the origin but not the specific file (e.g., Google Fonts domain). Use preload when you know the exact file URL (e.g., a specific font file or critical CSS).

Does preconnect work cross-origin?

Yes, that's exactly what it's for. Preconnect is most valuable for cross-origin requests where the connection setup cost is highest (DNS for a new domain + TCP + TLS).

Preconnect to Required Origins: Speed Up Third-Party Requests

Every time the browser needs a resource from a new origin, it must perform DNS lookup, TCP connection, and TLS negotiation — before it can even start downloading. Preconnect eliminates this hidden tax.

The Hidden Cost of New Connections

First request to fonts.googleapis.com:
  DNS lookup:     ~50ms
  TCP connection: ~50ms
  TLS handshake:  ~100ms
  ────────────────────────
  Total overhead: ~200ms (before any data flows)

On mobile networks, this can be 500ms+ per origin.

Resource Hints Explained

`preconnect`

Performs DNS + TCP + TLS — full connection setup:

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

`dns-prefetch`

Performs DNS lookup only — lighter weight:

<link rel="dns-prefetch" href="https://analytics.example.com">

`preload`

Downloads a specific resource immediately:

<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>

When to Use Each

Hint	Use When	Saves
`preconnect`	You know the origin, need it soon	100-300ms
`dns-prefetch`	You might need the origin later	20-50ms
`preload`	You know the exact file URL	Full request latency

How to Implement

1. Identify Required Origins

Look at your Network tab for third-party domains:

// DevTools Console — find all unique origins
const origins = new Set();
performance.getEntriesByType("resource").forEach(r => {
  const url = new URL(r.name);
  if (url.origin !== location.origin) origins.add(url.origin);
});
console.log([...origins]);

2. Add Preconnect Tags

Add to your <head> — as early as possible:

<head>
  <!-- Critical: fonts (need them for FCP) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Important: CDN for images -->
  <link rel="preconnect" href="https://cdn.example.com">

  <!-- Nice to have: analytics (defer with dns-prefetch) -->
  <link rel="dns-prefetch" href="https://www.google-analytics.com">
  <link rel="dns-prefetch" href="https://connect.facebook.net">
</head>

3. Next.js Implementation

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Or in the metadata API:

export const metadata = {
  other: {
    "link": [
      { rel: "preconnect", href: "https://fonts.googleapis.com" },
    ],
  },
};

4. The `crossorigin` Attribute

Add crossorigin for origins that serve CORS resources (fonts, fetch API):

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

<!-- Regular HTTPS origin doesn't need it -->
<link rel="preconnect" href="https://cdn.example.com">

Without crossorigin on a CORS origin, the browser opens two connections — one for regular requests and another for CORS requests.

Common Preconnect Targets

Service	Origin	Notes
Google Fonts	`fonts.googleapis.com` + `fonts.gstatic.com` (crossorigin)	Both origins needed
Google Analytics	`www.google-analytics.com`	Use dns-prefetch (defer loading)
Cloudinary	`res.cloudinary.com`	Preconnect if hero image is from CDN
YouTube embeds	`www.youtube.com` + `i.ytimg.com`	Better: use a facade
Stripe	`js.stripe.com`	Preconnect on checkout pages only

Common Mistakes

Too Many Preconnects

<!-- ❌ BAD — too many preconnects compete with real downloads -->
<link rel="preconnect" href="https://origin1.com">
<link rel="preconnect" href="https://origin2.com">
<link rel="preconnect" href="https://origin3.com">
<link rel="preconnect" href="https://origin4.com">
<link rel="preconnect" href="https://origin5.com">
<link rel="preconnect" href="https://origin6.com">

<!-- ✅ GOOD — only critical origins -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">

Preconnecting to Your Own Origin

<!-- ❌ USELESS — browser already has a connection to your origin -->
<link rel="preconnect" href="https://www.yoursite.com">

Missing crossorigin on Font Origins

<!-- ❌ Creates two connections instead of one -->
<link rel="preconnect" href="https://fonts.gstatic.com">

<!-- ✅ Correct — matches the CORS request the font download will make -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Measuring Impact

DevTools Network Tab

Look at the Connection Start time for third-party requests
With preconnect, this should be near 0ms (connection already established)

WebPageTest

Check the connection view — preconnected origins show the green (DNS), orange (TCP), and purple (TLS) bars shifted earlier in the waterfall.

Quick Wins Checklist

Identify top 3-4 third-party origins in DevTools Network tab
Add preconnect for critical origins used above the fold
Add dns-prefetch for less-critical origins
Include crossorigin for font and API origins
Place preconnect tags as early as possible in <head>
Don't exceed 4-5 preconnect hints
Verify connections are pre-established in Network timing

The Hidden Cost of New Connections

First request to fonts.googleapis.com:
  DNS lookup:     ~50ms
  TCP connection: ~50ms
  TLS handshake:  ~100ms
  ────────────────────────
  Total overhead: ~200ms (before any data flows)

On mobile networks, this can be 500ms+ per origin.

Resource Hints Explained

`preconnect`

Performs DNS + TCP + TLS — full connection setup:

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

`dns-prefetch`

Performs DNS lookup only — lighter weight:

<link rel="dns-prefetch" href="https://analytics.example.com">

`preload`

Downloads a specific resource immediately:

<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>

When to Use Each

Hint	Use When	Saves
`preconnect`	You know the origin, need it soon	100-300ms
`dns-prefetch`	You might need the origin later	20-50ms
`preload`	You know the exact file URL	Full request latency

How to Implement

1. Identify Required Origins

Look at your Network tab for third-party domains:

// DevTools Console — find all unique origins
const origins = new Set();
performance.getEntriesByType("resource").forEach(r => {
  const url = new URL(r.name);
  if (url.origin !== location.origin) origins.add(url.origin);
});
console.log([...origins]);

2. Add Preconnect Tags

Add to your <head> — as early as possible:

<head>
  <!-- Critical: fonts (need them for FCP) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Important: CDN for images -->
  <link rel="preconnect" href="https://cdn.example.com">

  <!-- Nice to have: analytics (defer with dns-prefetch) -->
  <link rel="dns-prefetch" href="https://www.google-analytics.com">
  <link rel="dns-prefetch" href="https://connect.facebook.net">
</head>

3. Next.js Implementation

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Or in the metadata API:

export const metadata = {
  other: {
    "link": [
      { rel: "preconnect", href: "https://fonts.googleapis.com" },
    ],
  },
};

4. The `crossorigin` Attribute

Add crossorigin for origins that serve CORS resources (fonts, fetch API):

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

<!-- Regular HTTPS origin doesn't need it -->
<link rel="preconnect" href="https://cdn.example.com">

Without crossorigin on a CORS origin, the browser opens two connections — one for regular requests and another for CORS requests.

Common Preconnect Targets

Service	Origin	Notes
Google Fonts	`fonts.googleapis.com` + `fonts.gstatic.com` (crossorigin)	Both origins needed
Google Analytics	`www.google-analytics.com`	Use dns-prefetch (defer loading)
Cloudinary	`res.cloudinary.com`	Preconnect if hero image is from CDN
YouTube embeds	`www.youtube.com` + `i.ytimg.com`	Better: use a facade
Stripe	`js.stripe.com`	Preconnect on checkout pages only

Common Mistakes

Too Many Preconnects

<!-- ❌ BAD — too many preconnects compete with real downloads -->
<link rel="preconnect" href="https://origin1.com">
<link rel="preconnect" href="https://origin2.com">
<link rel="preconnect" href="https://origin3.com">
<link rel="preconnect" href="https://origin4.com">
<link rel="preconnect" href="https://origin5.com">
<link rel="preconnect" href="https://origin6.com">

<!-- ✅ GOOD — only critical origins -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">

Preconnecting to Your Own Origin

<!-- ❌ USELESS — browser already has a connection to your origin -->
<link rel="preconnect" href="https://www.yoursite.com">

Missing crossorigin on Font Origins

<!-- ❌ Creates two connections instead of one -->
<link rel="preconnect" href="https://fonts.gstatic.com">

<!-- ✅ Correct — matches the CORS request the font download will make -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Measuring Impact

DevTools Network Tab

Look at the Connection Start time for third-party requests
With preconnect, this should be near 0ms (connection already established)

WebPageTest

Check the connection view — preconnected origins show the green (DNS), orange (TCP), and purple (TLS) bars shifted earlier in the waterfall.

Quick Wins Checklist

Identify top 3-4 third-party origins in DevTools Network tab
Add preconnect for critical origins used above the fold
Add dns-prefetch for less-critical origins
Include crossorigin for font and API origins
Place preconnect tags as early as possible in <head>
Don't exceed 4-5 preconnect hints
Verify connections are pre-established in Network timing

The Hidden Cost of New Connections

Resource Hints Explained

preconnect

dns-prefetch

preload

When to Use Each

How to Implement

1. Identify Required Origins

2. Add Preconnect Tags

3. Next.js Implementation

4. The crossorigin Attribute

Common Preconnect Targets

Common Mistakes

Too Many Preconnects

Preconnecting to Your Own Origin

Missing crossorigin on Font Origins

Measuring Impact

DevTools Network Tab

WebPageTest

Quick Wins Checklist

Ready to stop wasting ad spend?

Share this article

Related Articles

Use HTTP/2: Faster, Multiplexed Connections

Leverage Browser Caching: Set Long Cache Lifetimes

Reduce Server Response Time (TTFB): Get HTML to the Browser Faster

Enable Text Compression: Shrink Your HTML, CSS, and JS

Share this article

Related Articles

Use HTTP/2: Faster, Multiplexed Connections

Leverage Browser Caching: Set Long Cache Lifetimes

Reduce Server Response Time (TTFB): Get HTML to the Browser Faster

Enable Text Compression: Shrink Your HTML, CSS, and JS

The Hidden Cost of New Connections

Resource Hints Explained

preconnect

dns-prefetch

preload

When to Use Each

How to Implement

1. Identify Required Origins

2. Add Preconnect Tags

3. Next.js Implementation

4. The crossorigin Attribute

Common Preconnect Targets

Common Mistakes

Too Many Preconnects

Preconnecting to Your Own Origin

Missing crossorigin on Font Origins

Measuring Impact

DevTools Network Tab

WebPageTest

Quick Wins Checklist

Ready to stop wasting ad spend?

Share this article

Related Articles

Use HTTP/2: Faster, Multiplexed Connections

Leverage Browser Caching: Set Long Cache Lifetimes

Reduce Server Response Time (TTFB): Get HTML to the Browser Faster

Enable Text Compression: Shrink Your HTML, CSS, and JS

Share this article

Related Articles

Use HTTP/2: Faster, Multiplexed Connections

Leverage Browser Caching: Set Long Cache Lifetimes

Reduce Server Response Time (TTFB): Get HTML to the Browser Faster

Enable Text Compression: Shrink Your HTML, CSS, and JS

`preconnect`

`dns-prefetch`

`preload`

4. The `crossorigin` Attribute

`preconnect`

`dns-prefetch`

`preload`

4. The `crossorigin` Attribute