When your page loads, the browser doesn't just download your HTML - it has to connect to every external domain that serves your fonts, scripts, stylesheets, and images. Each of those connections takes time: DNS lookup, TCP handshake, TLS negotiation. On a page that pulls resources from Google Fonts, a CDN, an analytics platform, and an embedded video service, that connection overhead adds up fast.
Preconnect and dns-prefetch are resource hints that tell the browser to start those connection steps early - before it actually needs the resource. Used correctly, they can shave hundreds of milliseconds off your perceived load time with almost no downside.
The Difference Between the Two
dns-prefetch resolves the domain name to an IP address in advance. That's the first step in any connection. It's lightweight and broadly supported, but it only handles DNS - the browser still has to do the TCP and TLS handshakes when the resource is actually needed.
preconnect goes further: it resolves DNS, completes the TCP handshake, and (for HTTPS resources) completes the TLS negotiation. This is a more aggressive hint. It uses more browser resources, so you should only use it for origins you're certain will be needed immediately.
The syntax in HTML:
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Note the crossorigin attribute on preconnect - it's required for resources loaded with CORS (which includes Google Fonts). Without it, the browser may open two separate connections to the same host.
When to Use Which
Use preconnect for:
- Fonts from Google Fonts or Adobe Fonts (high priority, loaded early)
- Your CDN if you serve assets from it
- Any critical third-party resource that's required for above-the-fold rendering
Use dns-prefetch for:
- Analytics scripts (Google Analytics, Plausible, Fathom)
- Social media embeds that may or may not load
- Any third-party origin you want to warm up without committing the full connection overhead
A practical rule: preconnect for up to 4-6 critical origins. dns-prefetch for everything else. Don't preconnect to every third party on your page - unused preconnect connections waste browser resources and can actually hurt performance.
How to Add These to WordPress
Option 1: Through your theme's functions.php
WordPress provides the wp_head hook, and you can use wp_resource_hints to add hints programmatically:
add_filter( 'wp_resource_hints', function( $hints, $relation_type ) {
if ( 'preconnect' === $relation_type ) {
$hints[] = array(
'href' => 'https://fonts.gstatic.com',
'crossorigin' => 'anonymous',
);
}
if ( 'dns-prefetch' === $relation_type ) {
$hints[] = 'https://www.googletagmanager.com';
$hints[] = 'https://www.google-analytics.com';
}
return $hints;
}, 10, 2 );
Option 2: Through a caching or performance plugin
WP Rocket, LiteSpeed Cache, and Perfmatters all have UI options to add resource hints without touching code. In WP Rocket, look under Media > DNS Prefetch. In Perfmatters, it's under Performance > DNS Prefetch.
Option 3: Directly in your theme's <head>
If you have direct access to your theme's header template, you can add the <link> tags manually. This is the most direct approach but least maintainable for non-developers.
Finding What to Preconnect
Run your site through Google PageSpeed Insights or WebPageTest. Both tools will flag "Preconnect to required origins" as an opportunity if you're missing hints for resources that load early in the page lifecycle. The PageSpeed report will name the specific origins you should be targeting.
Also check your browser's Network tab (DevTools) and sort by start time. The domains your page connects to in the first 2 seconds are your candidates for preconnect and dns-prefetch.
Common Mistakes
Preconnecting to everything. A page that preconnects to 15 different origins is wasting browser resources on connections that may never be used in the render-critical window. Be selective.
Missing crossorigin on font preconnects. Google Fonts in particular requires CORS. Without crossorigin, Chrome will open a second anonymous connection and the preconnect hint is wasted.
Preconnecting to your own domain. Your origin is already connected. Preconnect hints are for third-party domains only.
The Bottom Line
Preconnect and dns-prefetch are among the cheapest performance wins available. They require no server-side changes, no complex configuration, and minimal risk. For a typical WordPress site pulling in Google Fonts, a CDN, and a couple of analytics tools, adding the right hints takes 15 minutes and can meaningfully improve your Core Web Vitals scores - particularly Largest Contentful Paint, which is sensitive to font loading delays.
Start with Google Fonts and your CDN. Check PageSpeed Insights. Add hints where flagged. That's it.
