Frontend Beauty
ESC

Type to search the knowledge base.

Preconnect and DNS Prefetch

Warm critical third-party origins with preconnect; use dns-prefetch lightly; don’t shotgun hints.

intermediate3 min read
  • performance
  • preconnect
  • dns-prefetch
  • resource-hints
  • lcp

Resource hints tell the browser to warm connections before a request is discovered. Used on the right origin, they shave DNS+TLS off LCP and API calls. Used on everything, they contend for sockets and CPU.

Docs: MDN preconnect, web.dev preconnect, Priority hints ecosystem.

dns-prefetch vs preconnect

<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://cdn.example.com" crossorigin />
Hint Does Cost
dns-prefetch DNS only Cheap
preconnect DNS + TCP + TLS Higher

preconnect with CORS assets (fonts) needs crossorigin matching the real request mode.

When preconnect wins

  • LCP image on a CDN origin different from document
  • Critical API host used immediately on interactive pages
  • Font host if not self-hosted

When it loses

  • Warming 10 analytics hosts on every page
  • Preconnecting origins used only after idle
  • Same origin as document (already connected)

preload is different

<link rel="preload" as="image" href="/hero.avif" fetchpriority="high" />

preload fetches a specific resource; preconnect only warms the origin. Don’t confuse them. Mis-preloading unused files wastes bandwidth.

Speculation rules / prefetch

prefetch / Speculation Rules for likely next navigations is a separate, more aggressive layer — measure carefully (privacy, waste).

Audit process

  1. Waterfall: early TLS to which hosts?
  2. Add 1–2 preconnects for proven critical origins.
  3. Re-measure LCP/TTFB resource delay.
  4. Remove unused hints.
<head>
  <link rel="preconnect" href="https://images.example.com" crossorigin />
  <link rel="preload" as="image" href="https://images.example.com/hero.avif" fetchpriority="high" />
</head>

Interview out-loud

“preconnect warms DNS/TCP/TLS for a critical third-party origin; dns-prefetch is cheaper DNS-only. I use one or two preconnects for LCP/CDN hosts with matching crossorigin, never shotgun analytics domains.”

How this shows up in interviews

Be ready to define the metric or technique in one sentence, name one measurement approach (DevTools panel, web-vitals, or headers), and cite a concrete fix you would try first. Walk through a before/after: what the waterfall or flame chart showed, what you changed, and which percentile moved. Mention a tradeoff (complexity, caching correctness, or third-party business constraints) so the answer doesn’t sound like a blog checklist.

Production guardrails

Ship behind a flag when the change is risky, watch field p75 for the affected template for at least a few days, and keep a rollback path. Pair lab verification (throttled Performance/Network) with RUM so you don’t celebrate a Lighthouse-only win. Document the owner of any ongoing budget or third-party exception.

Further depth

Teams often under-invest in this topic until an incident or CWV regression. Schedule a one-hour drill: reproduce the failure mode in DevTools, list the top three mitigations for your stack, and file tickets with owners. Revisit after the next major feature that touches networking, rendering, auth, or third parties — those are the moments regressions land. Keep primary documentation links in the runbook so on-call is not searching chat history at 2am.

Concrete artifacts to leave behind: a short architecture note, a CI assertion or header snapshot, and a dashboard panel (lab or field) that would have caught the last bug. Teaching the rest of the team the mental model matters as much as the one-line fix.

Further reading

Related guides