Part of the Speed audit
Check your preconnect and resource hints
When your page loads files from external servers, each connection has setup overhead. Preconnect hints tell the browser to start those connections early, before it needs the files.
No signup required. Results in under 60 seconds.
423,000+ checks run and counting
What this check does
SiteCurl scans your page for outside CSS and JS files (files loaded from a domain other than yours). It then checks if your page has <link rel="preconnect"> tags for those outside servers.
If your page loads files from outside domains and has at least one preconnect hint, the check passes. If outside files are present but no preconnect hints exist, SiteCurl flags it as a warning and tells you how many outside servers are missing.
Pages that load all files from their own domain pass on their own. No outside servers means no preconnect hints are needed.
How this shows up in the real world
Each time the browser needs a file from a new server, it goes through a multi-step setup. First, DNS lookup: turning the domain name into an IP (20-120ms). Second, TCP handshake: opening the link (one round trip, 50-200ms on mobile). Third, TLS setup: turning on encryption (one more round trip). Total: 100-500ms before the first byte of the file is even asked for.
This happens for each new domain. If your page loads fonts from Google Fonts, analytics from a tracking tool, and a widget from a third-party source, that is three setups. They happen in order: the browser finds each outside file as it reads the HTML, then starts the setup process.
Preconnect changes the timing. A <link rel="preconnect" href="https://fonts.googleapis.com"> tag in the <head> tells the browser to start the link right away, before it even finds the file that needs it. By the time the browser hits the script or stylesheet tag, the link is already open and the file starts loading with no delay.
The gains are most clear on high-lag links (mobile networks, far-off servers). Cutting 200ms of setup for 3 outside domains saves 600ms of serial waiting.
Why it matters
Outside files are on the key path for most pages. Google Fonts, analytics scripts, and CDN-hosted code all add link overhead. Without preconnect, the browser finds these files late and pays the full setup cost at the worst time.
Preconnect matters most for fonts. Web fonts are found late in the load chain: the browser reads HTML, gets CSS, parses CSS, finds the @font-face rule, and only then starts to get the font file. Preconnecting to the font server cuts the link delay from this already long chain.
Google Lighthouse names preconnect as a top tip for outside servers. Adding these hints lifts your Lighthouse speed score and can cut Time to First Byte for outside files.
Who this impacts most
Sites using Google Fonts gain the most from preconnect. The font load chain is long, and cutting link time directly speeds up text rendering.
Marketing sites with many third-party tools (analytics, chat widgets, A/B testing, heatmaps) load files from many domains. Each one gains from a preconnect hint that starts the link early.
Online stores using outside review widgets, payment tools, and CDN-hosted images have the most outside servers. Preconnecting to the top ones (the CDN and payment tool) speeds up the checkout flow.
How to fix it
Step 1: Find outside servers. Run a SiteCurl scan. The resource hints finding shows how many outside servers your page loads from and whether preconnect hints are in place.
Step 2: Add preconnect links to your head. For each outside domain, add a link tag early in your <head>: <link rel="preconnect" href="https://fonts.googleapis.com">. Put these before any stylesheet or script tags so the browser reads them first.
Step 3: Add crossorigin when needed. If the outside file uses CORS (fonts, some APIs), add the crossorigin prop: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. Without it, the browser may open two links: one for the preconnect and one for the real request.
Step 4: Limit preconnects to key servers. Each preconnect uses browser resources. Only preconnect to domains that serve key files (fonts, main CDN, payment tool). For less vital servers (analytics, social widgets), the normal link timing is fine.
Step 5: Try dns-prefetch as a lighter option. For servers where full preconnect is too much, use <link rel="dns-prefetch" href="https://example.com">. It only does the DNS lookup (saving 20-120ms) without the TCP and TLS cost.
Common mistakes when fixing this
Preconnecting to too many servers. Each preconnect opens a link the browser must keep alive. More than 4-6 can waste resources. Focus on the domains that serve your most vital outside files.
Missing the crossorigin prop. Fonts and some APIs need CORS. Without crossorigin on the preconnect, the browser opens a non-CORS link first, then finds it needs CORS and opens a second one. The preconnect is wasted, and you get two links instead of one.
Placing preconnect after the file that needs it. If your preconnect link shows up after the stylesheet that triggers the outside request, the browser has already started its own link. Put preconnect links as early as you can in the <head>.
Preconnecting to your own domain. The browser already has a link open to your server. Preconnecting to your own site does nothing useful and wastes a link slot.
How to verify the fix
After adding preconnect links, run a new SiteCurl scan. The finding should show that preconnect hints are in place. You can also check in your browser: view the page source (Ctrl+U) and search for preconnect in the <head>.
To gauge the effect, open Chrome dev tools, go to the Network tab, and look at the timing chart for outside files. With preconnect, the DNS/TCP/TLS steps should finish before the file request starts, showing as a shorter total load time.
The bottom line
Preconnect hints give the browser a head start on external connections. Each one saves 100-500ms of connection setup that would otherwise happen at the worst time. Add <link rel="preconnect"> for your most important external domains (fonts, CDN, payment provider) and place them early in the head.
Example findings from a scan
No preconnect hints for 3 external origins
Preconnect hints in place (2 for 3 external origins)
No external origins requiring preconnect hints
Related checks
Frequently asked questions
What is a preconnect hint?
A preconnect hint is a link tag that tells the browser to start connecting to an external server before it actually needs a file from that server. It handles DNS lookup, TCP connection, and TLS negotiation ahead of time.
How many preconnect hints should I use?
Stick to 4-6 at most. Each preconnect uses browser resources to maintain the open connection. Focus on the domains that serve your most critical resources: font servers, your CDN, and any external resource on the critical rendering path.
What is the difference between preconnect and dns-prefetch?
Preconnect does three things: DNS lookup, TCP connection, and TLS handshake. dns-prefetch only does the DNS lookup. Preconnect saves more time but uses more resources. Use preconnect for critical origins and dns-prefetch for less important ones.
Can I check resource hints without signing up?
Yes. The free audit checks your home page for resource hints as part of a full seven-category scan. No signup required.
Do preconnect hints work with HTTP/2?
Yes. HTTP/2 multiplexes requests over one connection, but the initial connection setup still takes time. Preconnect eliminates that setup delay even over HTTP/2.
What does the crossorigin attribute do on preconnect?
It tells the browser to set up a CORS-enabled connection. Fonts and some APIs require CORS. Without it, the browser may open two connections: one without CORS (from the preconnect) and one with CORS (when the actual request needs it).
Check your site speed now