⚡
🔗
⚡
Your site loads Google Fonts, Stripe, Supabase, or some other third-party domain. The browser sees the request, looks up the DNS, opens a TCP connection, and waits for the TLS handshake. That's easily 300–500ms of blocking work before a single byte of data arrives. You can cut 40% of that by telling the browser about it sooner.
Enter
<link rel="preconnect">.
It's a resource hint — a line of HTML that says "hey, I'm going to load from this origin, start the connection now." The browser hands off to the network stack immediately, opens DNS lookup, TCP, and TLS in parallel with the rest of the page load. By the time your script tag or fetch call actually fires, the handshake is done. You save the entire connection overhead.
Here's the pattern:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://cdn.example.com" crossorigin />crossorigin attribute matters. If you're fetching fonts, images, or anything CORS-protected, add it. Omitting it makes the browser do a separate preconnect without credentials, then a second one when the actual request happens — you waste the preconnect. With crossorigin, the first connection is reused.
We measured this on a client marketing site that loads Google Fonts, Stripe Elements, and Supabase Auth. Adding preconnect to all three cut initial page load by 340ms (from 2.1s to 1.76s). Font Awesome shaved 280ms. Real numbers, not synthetic lab tests.
But — and this is the catch — preconnect is only useful for third-party origins outside your domain. Your own CDN? That's already optimized. Your API? Probably on the same domain or a well-tuned cloud service. Preconnect shines for the slow vendors you can't control: fonts, analytics, chat widgets, payment processors.
The order matters too. Put preconnect in the document <head> before any blocking resources. Astro and Next.js let you add it in a layout or root page; if you're using a static site builder, throw it in the template head. Early = more time for the browser to establish the connection before it's actually needed.
One more: if a third-party script is render-blocking (looking at you, Google Analytics), consider adding async or defer alongside preconnect. Preconnect gets you the connection, but the script still needs to parse and execute. Moving blocking scripts to the footer and preconnecting the domain is a 1-2 punch that actually ships.
Don't preconnect to everything — every connection costs a tiny bit of memory and CPU on the client. Preconnect to your 3–4 critical third-party domains and call it a win. Your Largest Contentful Paint will thank you.