TL;DR
This audit suggests warming up the connection to a third-party origin your page depends on early, so the browser is not still shaking hands with a font host or CDN when the critical file is finally requested. A preconnect hint does the DNS lookup, TCP handshake, and TLS negotiation ahead of time, shaving real milliseconds off resources on another domain. Add <link rel="preconnect"> for the two or three origins that host render-critical assets, and no more.
What this check flags
Every request to a new domain carries a hidden tax before a single byte of the actual file moves: a DNS lookup to find the server, a TCP handshake to open the socket, and (over HTTPS) a TLS negotiation to secure it. On a mid-range phone over mobile data, that setup can eat 300 ms or more per origin. This check fires when your page pulls a render-critical asset (a web font, a CDN-hosted script, an image host) from a third-party origin without warming that connection first.
The cost is a delayed critical path. If your headline font lives on a font CDN and the browser only starts the handshake when it hits the @font-face rule deep in your CSS, text paint stalls behind connection setup that could have started at the top of the document.
Preconnect is warmup, not fetch
This is the distinction people get wrong. Preconnect opens the door; it does not walk anything through it. It establishes the connection so the eventual request is fast, but it does not download the file. That is preload's job. Use preconnect when you know the origin but the browser cannot discover it early; use preload when you know the exact file. Here is the connection warmup in place:
<!-- In <head>, as early as possible -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
<!-- Cheap fallback for origins you only might use -->
<link rel="dns-prefetch" href="https://analytics.example.com">Two things bite people here. First, the crossorigin attribute is mandatory for fonts. A font request is CORS-anonymous, so a preconnect without crossorigin opens a connection the font fetch cannot reuse, and you have warmed a socket for nothing. Second, preconnect is a promise the browser holds open; warm too many origins and you waste sockets and CPU on handshakes you never cash in.
Preconnect vs. dns-prefetch vs. preload
These three resource hints get muddled constantly. They operate at different stages, and picking the wrong one wastes the browser's time.
| Hint | What it does | Cost | Use when |
|---|---|---|---|
dns-prefetch | DNS lookup only | Tiny | Origin you might use later |
preconnect | DNS + TCP + TLS | A held socket | Critical origin, file unknown yet |
preload | Fetches the actual file | Full download | Exact critical file, known URL |
How to detect it
- Lighthouse: the "Preconnect to required origins" opportunity lists third-party origins on your critical path and the estimated savings from warming each.
- PageSpeed Insights: run the URL to see the same opportunity plus which origins field data confirms are slow to connect for real users.
- DevTools Network panel: reload with the Timing breakdown open. Fat "DNS Lookup", "Initial connection", and "SSL" segments on a third-party request are exactly what preconnect erases.
- DevTools Performance panel: record a load and look for connection setup blocking the request of a render-critical asset. If handshake time gates your font or hero, warm that origin.
How to fix it
- Warm your critical origins. Add
<link rel="preconnect">high in the<head>for the domains hosting render-blocking or LCP-critical assets, typically your font host and primary CDN. - Always add
crossoriginfor fonts. Without it the warmed connection cannot be reused by the CORS font fetch. - Cap it at two to four origins. Preconnect is a scarce resource; reserve it for what actually gates the first paint and use
dns-prefetchfor the maybes. - Self-host when you can. Serving fonts and critical scripts from your own origin removes the cross-origin handshake entirely, which beats warming it.
For the strategy behind both hints, read our primer on preconnect and preload for performance and the resource hints glossary entry.
FAQ
What is the difference between preconnect and preload?
Preconnect warms the connection to an origin (DNS, TCP, TLS) but downloads nothing. Preload fetches one specific file you name. Preconnect is for "I know I will need something from this domain"; preload is for "I know I need this exact file, get it now".
Why does my font preconnect need crossorigin?
Fonts are fetched in CORS-anonymous mode. A preconnect without crossorigin opens a connection in a different mode than the font request needs, so the browser cannot reuse it and opens a second one. The hint does nothing useful, and you have burned a socket.
How many origins should I preconnect?
Two to four, tops. Each preconnect holds a socket and spends CPU on a handshake. Warm only the origins that sit on your critical rendering path; for everything speculative, the far cheaper dns-prefetch is the right tool.
Does preconnect help with the same-origin assets on my own domain?
No. By the time HTML parsing starts, the connection to your own origin is already open, so there is nothing to warm. Preconnect only pays off for third-party origins the browser has not yet contacted.
Can too many preconnects slow my page down?
Yes. Speculative connections compete for bandwidth and CPU with the requests that actually matter, and holding sockets you never use is pure waste. Over-preconnecting can measurably hurt, which is why the discipline is "critical origins only".
Claude Vincent is a technical SEO consultant focused on crawlability, rendering, and AI-search visibility. He writes the field guides and case studies at SEO ProCheck, with a bias toward the durable, unglamorous work that decides whether search engines and AI answer engines can actually read and cite a site.
About SEO ProCheck
Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.
Work With Me
Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.
Subscribe to our newsletter!
