The browser can only load resources it knows about. When it encounters a font reference buried in a stylesheet, or an image set as a CSS background, it doesn’t start fetching until it has parsed through enough of the document to discover the reference. By that point, critical render time has already been wasted. Resource hints, preload, preconnect, and dns-prefetch, let you declare dependencies early in the <head> so the browser can act on them immediately, in parallel with parsing the rest of the document.
The Code
Add this to your functions.php or a site-specific plugin. It hooks into wp_head at priority 1, placing the hints as early in the document head as possible, before WordPress’s own enqueued styles and scripts are output.
preconnect
A preconnect hint tells the browser to open a TCP connection, including TLS handshake, to the specified origin before it has any specific resource to request from it. For third-party origins like Google Fonts, this eliminates the connection setup latency that would otherwise delay the first font file request. The crossorigin attribute is required on the gstatic.com connection because font files are fetched with CORS. Omitting it means the browser opens a non-CORS connection and then has to open a second CORS connection when it actually requests the font, negating the benefit of the hint.
preload
A preload hint tells the browser to fetch a specific resource immediately, at high priority, before it’s discovered in the normal parse flow. The as attribute is required and must match the resource type, style for stylesheets, image for images, font for font files, script for scripts. Without it, the browser fetches the resource at low priority and may ignore the hint entirely.
The fetchpriority="high" attribute on the hero image tells the browser this image is the Largest Contentful Paint candidate and should be prioritised above other image fetches. This directly improves LCP scores in Core Web Vitals, which is one of the most impactful single changes you can make to improve a homepage’s PageSpeed score.
dns-prefetch
dns-prefetch is the lightest hint, it only resolves the DNS for the specified domain without opening a connection. Use it for origins you’ll connect to later in the page but where establishing a full preconnect would be wasteful. Analytics scripts, tag managers, and advertising networks are good candidates, they’re loaded, but not on the critical rendering path.
How Many Hints to Add
Resource hints are not free, each preconnect consumes a TCP connection and TLS handshake for an origin that may or may not end up being used. More than six to eight preconnect hints can actually slow page load by competing for bandwidth. Apply preconnect only to origins that are genuinely on the critical path and queried on every page. Use dns-prefetch for secondary origins and omit hints entirely for origins used only on specific page types.
add_action( 'wp_head', function() {
// Preconnect to critical third-party origins
echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "\n";
echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "\n";
// Preload your theme's critical stylesheet
$style_url = get_stylesheet_directory_uri() . '/assets/css/critical.css';
echo '<link rel="preload" href="' . esc_url( $style_url ) . '" as="style">' . "\n";
// Preload the hero image on the front page
if ( is_front_page() ) {
$hero_url = get_stylesheet_directory_uri() . '/images/hero.webp';
echo '<link rel="preload" href="' . esc_url( $hero_url ) . '" as="image" fetchpriority="high">' . "\n";
}
// DNS prefetch for analytics and tag managers
echo '<link rel="dns-prefetch" href="https://www.googletagmanager.com">' . "\n";
echo '<link rel="dns-prefetch" href="https://www.google-analytics.com">' . "\n";
}, 1 );