Preconnect missing medium
Preconnect to required origins
Critical cross-origin assets pay a full DNS, TCP, and TLS round-trip on first use because the connection wasn't opened early.
What you see
Preconnect to required origins — Est savings of 310 ms Consider adding `preconnect` or `dns-prefetch` resource hints to establish early connections to important third-party origins.
What’s actually happening
Fonts flash in late, a hero image from a CDN arrives after everything around it, and the network waterfall shows a gap before those requests where the browser is busy resolving DNS and negotiating TLS. The audit lists the origins that would benefit and an estimated saving. The cost is highest on mobile networks where each round-trip is 100ms or more.
Common causes
- Web fonts loaded from fonts.gstatic.com or another font host with no preconnect, so the connection opens only when the CSS references the font.
- Hero images, video, or product media served from a separate CDN origin discovered late in the parse.
- Critical API or script origins that aren't connected to until a script requests them.
- Relying on the browser to discover and connect to each origin on demand instead of priming it from the <head>.
How to fix it
- Preconnect the few origins on the critical pathAdd <link rel="preconnect" href="https://cdn.example.com"> in the <head> for origins serving above-the-fold assets. For fonts include crossorigin: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> — without it the browser opens a second, useless connection.
- dns-prefetch the restFor origins that matter but aren't on the critical path, use <link rel="dns-prefetch" href="https://example.com">. It only resolves DNS (cheaper than a full preconnect) and is a fine fallback for older browsers. List dns-prefetch after preconnect for the same origin.
- Limit preconnects to 4 or fewerEach open connection costs CPU and memory, and the browser closes an unused preconnect after about 10 seconds. Preconnecting origins you don't promptly use is flagged as waste in a separate audit. Reserve it for genuinely critical origins.
- Combine with preload for the asset itselfPreconnect opens the pipe; preload requests the specific file. For a critical font, pair preconnect to the host with <link rel="preload" as="font" ... crossorigin> for the font file so the download starts immediately.
Stop it recurring
Keep a short, reviewed list of preconnect hints in your base template and remove any origin you stop using on the critical path.
Related errors