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.
What this check does
SiteCurl scans your page for external CSS and JavaScript files (files loaded from a different domain than your site). It then checks if your page includes <link rel="preconnect"> tags for those external origins.
If your page loads resources from external domains and has at least one preconnect hint, the check passes. If external resources are present but no preconnect hints exist, SiteCurl flags it as a warning and tells you how many external origins are missing.
Pages that load all resources from their own domain pass automatically. No external origins means no preconnect hints are needed.
How this shows up in the real world
Every time the browser needs a file from a new server, it goes through a multi-step connection process. First, DNS lookup: translating the domain name to an IP address (20-120ms). Second, TCP handshake: establishing the connection (one round trip, 50-200ms on mobile). Third, TLS negotiation: setting up encryption (another round trip). Total: 100-500ms before the first byte of the file is even requested.
This happens for each new domain. If your page loads fonts from Google Fonts, analytics from a tracking service, and a widget from a third-party provider, that is three separate connection setups. They happen sequentially: the browser discovers each external resource as it reads the HTML, then starts the connection process.
Preconnect changes the timing. A <link rel="preconnect" href="https://fonts.googleapis.com"> tag in the <head> tells the browser to start the connection immediately, before it even finds the resource that needs it. By the time the browser reaches the script or stylesheet tag, the connection is already open and the file starts downloading with no delay.
The savings are most visible on high-latency connections (mobile networks, distant servers). Cutting 200ms of connection setup for 3 external domains saves 600ms of serial waiting.
Why it matters
External resources are on the critical path for most pages. Google Fonts stylesheets, analytics scripts, and CDN-hosted libraries all add connection overhead. Without preconnect, the browser discovers these resources late and pays the full connection cost at the worst time.
Preconnect is especially important for fonts. Web fonts are discovered late in the loading process: the browser reads HTML, downloads CSS, parses the CSS, finds the @font-face rule, and only then starts downloading the font file. Preconnecting to the font server removes the connection delay from this already long chain.
Google Lighthouse specifically recommends preconnect for external origins. Adding these hints improves your Lighthouse performance score and can reduce Time to First Byte for external resources.
Who this impacts most
Sites using Google Fonts benefit the most from preconnect. The font loading chain is long, and shaving off connection time directly improves text rendering speed.
Marketing sites with multiple third-party tools (analytics, chat widgets, A/B testing, heatmaps) load resources from many domains. Each one benefits from a preconnect hint that starts the connection early.
E-commerce sites using external product review widgets, payment providers, and CDN-hosted images have the most external origins. Preconnecting to the most important ones (the CDN and payment provider) speeds up the checkout flow.
How to fix it
Step 1: Identify external origins. Run a SiteCurl scan. The resource hints finding shows how many external origins your page loads from and whether preconnect hints are present.
Step 2: Add preconnect links to your head. For each external 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 processes them first.
Step 3: Add crossorigin when needed. If the external resource uses CORS (fonts, some APIs), add the crossorigin attribute: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. Without it, the browser may open two connections: one for the preconnect and one for the actual request.
Step 4: Limit preconnects to critical origins. Each preconnect uses browser resources. Only preconnect to domains that serve critical resources (fonts, main CDN, payment provider). For less important origins (analytics, social widgets), the standard connection timing is fine.
Step 5: Consider dns-prefetch as a fallback. For origins where the 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 overhead.
Common mistakes when fixing this
Preconnecting to too many origins. Each preconnect opens a connection the browser must maintain. More than 4-6 preconnects can waste resources. Focus on the domains that serve your most important external files.
Missing the crossorigin attribute. Fonts and some APIs require CORS. Without crossorigin on the preconnect, the browser opens a non-CORS connection first, then discovers it needs CORS and opens a second one. The preconnect is wasted, and you get two connections instead of one.
Placing preconnect after the resource that needs it. If your preconnect link appears after the stylesheet that triggers the external request, the browser has already started its own connection. Put preconnect links as early as possible in the <head>.
Preconnecting to your own domain. The browser already has a connection open to your server. Preconnecting to your own origin does nothing useful and wastes a connection slot.
How to verify the fix
After adding preconnect links, run another SiteCurl scan. The finding should show that preconnect hints are in place. You can also verify in your browser: view the page source (Ctrl+U) and search for preconnect in the <head>.
To measure the impact, open Chrome dev tools, go to the Network tab, and look at the timing waterfall for external resources. With preconnect, the DNS/TCP/TLS steps should complete before the resource request starts, showing as a shorter total download 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