Preconnect to Required Origins: How to Fix It
Lighthouse flags "Preconnect to required origins" when your page pulls critical resources from third-party origins (fonts, a CDN, an analytics or video host) without warming up the connection first. Add a <link rel="preconnect"> hint for the two or three origins that block rendering, include the crossorigin attribute for fonts, and use rel="dns-prefetch" for everything less urgent. Done right, this trims DNS, TCP, and TLS time off your critical path and can speed up Largest Contentful Paint. Done wrong (preconnecting to a dozen origins) it backfires.
What this means
Before a browser can download a file from another origin, such as fonts.gstatic.com or your CDN, it has to set up a connection: a DNS lookup to resolve the hostname, a TCP handshake to open the socket, and a TLS negotiation to secure it. On a slow connection, those round trips can add hundreds of milliseconds before a single byte of the resource arrives.
A <link rel="preconnect"> hint tells the browser to start that work early, in parallel with parsing, so the connection is ready when the resource is requested. A lighter hint, <link rel="dns-prefetch">, performs only the DNS lookup ahead of time. The audit fires when Lighthouse detects important cross-origin requests that would benefit from one of these hints but the page does not provide them.
Why it matters
Connection setup happens on the critical path. If a font or a hero image lives on a third-party origin and the browser only discovers it mid-parse, the user waits through the full DNS plus TCP plus TLS sequence before the resource even starts downloading. Preconnecting moves that cost earlier and overlaps it with other work, which can directly improve your Largest Contentful Paint when the resource in question is what paints the largest element.
This matters for SEO because Core Web Vitals are part of how Google evaluates page experience. It is closely related to other performance fixes such as eliminating render-blocking resources, and the gains you see in the lab should be confirmed against real users, which is the distinction covered in field versus lab data.
How it gets flagged
Lighthouse raises this audit during a performance run (PageSpeed Insights, Chrome DevTools, or the SEO ProCheck performance report). It identifies cross-origin requests that start early and sit on the critical path, then checks whether a matching preconnect hint exists. When one is missing, the origin is listed with an estimated time saving. In recent Lighthouse versions this appears inside the network dependency tree insight rather than as a standalone audit, but the recommendation is the same: warm up connections to the origins that matter most.
How to fix it
Identify the handful of third-party origins that serve render-critical resources. Add a preconnect hint for each, placed early in the <head> so the browser sees it before it gets deep into parsing.
<head>
<!-- Warm up the connection to Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Warm up your CDN -->
<link rel="preconnect" href="https://cdn.example.com">
<!-- Lighter hint for a less urgent origin -->
<link rel="dns-prefetch" href="https://www.googletagmanager.com">
</head>Three rules keep this effective:
- Use
crossoriginfor fonts and other anonymous-mode resources. Fonts are fetched anonymously, so the preconnect must match. If you omitcrossoriginon a font origin, the browser only performs the DNS lookup and the TLS connection is wasted, so you set up a second connection anyway. - Do not over-preconnect. The hint is best reserved for the most critical origins. Preconnecting to many domains consumes bandwidth and CPU on TLS work and can delay the resources that actually matter. For lower-priority origins, use
dns-prefetchinstead, which is far cheaper. - Only preconnect to origins you will use soon. A browser closes any preconnected connection that goes unused within about 10 seconds, so warming up an origin you do not contact promptly is pure waste.
If you self-host your fonts and CDN assets on the same origin as your HTML, you may not need preconnect at all, because the connection is already open.
False positives
This audit is advisory, and a few flags do not warrant action. If an origin loads late (a chat widget or footer pixel that fires well after first paint), preconnecting it can hurt more than it helps; dns-prefetch or nothing is the better call. On a fast self-hosted setup, the estimated savings can be a few milliseconds, well within measurement noise. Treat the time-saving estimate as a guide, confirm the origin is genuinely on the critical path, and check the real-world impact in field data before and after.
FAQ
Preconnect opens the full connection (DNS, TCP, and TLS) ahead of time. Dns-prefetch only resolves the hostname. Preconnect saves more time but costs more, so reserve it for critical origins and use dns-prefetch for the rest.
Keep it to the two or three origins that serve render-critical resources. Preconnecting more than that contends for bandwidth and can delay the resources you care about most.
Fonts are requested in anonymous mode. Without the crossorigin attribute the preconnect does not match the font request, so the browser only does the DNS lookup and has to open a fresh secured connection later anyway.
It can, when the preconnected origin serves the element that determines LCP. The gain depends on your network conditions and how early the resource is needed. Always verify against field data rather than relying on the lab estimate alone.
Resource hints are one lever among many. An advanced SEO audit maps the full critical path on your site and prioritizes the changes that actually move your Core Web Vitals.
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!
