Every millisecond a browser spends waiting for a resource is a millisecond your visitor is not seeing your content. Resource hints are instructions you embed in your HTML that tell the browser what it will need before it discovers those needs on its own - giving it a head start on the work it was going to do anyway.
There are four main resource hints, each serving a different purpose.
dns-prefetch: Resolve DNS Early
When a browser encounters a resource hosted on a third-party domain (a font from Google, a script from a CDN, an analytics pixel), it first needs to resolve that domain's IP address through DNS - a process that adds 20-120 milliseconds to the request.
dns-prefetch tells the browser to perform that DNS lookup early, while it is processing your HTML, so the result is cached by the time the resource is actually needed.
<link rel="dns-prefetch" href="//fonts.googleapis.com">
Use dns-prefetch for every significant third-party domain your site loads from. It is low-cost and broadly supported.
preconnect: Establish the Full Connection Early
Preconnect goes further than dns-prefetch. Instead of just resolving the DNS, it establishes the full connection to the origin - DNS resolution, TCP handshake, and TLS negotiation - before the browser knows it needs a resource from that origin.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Preconnect is more valuable than dns-prefetch for origins you are certain will be used, especially for resources that block rendering (like Google Fonts). The trade-off: establishing a connection consumes server resources, so limit preconnect to two or three critical third-party origins. Use dns-prefetch for the rest.
The most high-impact use case for preconnect in 2026 is still Google Fonts, which requires connections to both fonts.googleapis.com (for the CSS) and fonts.gstatic.com (for the font files themselves).
preload: Load Specific Resources the Current Page Needs
Preload is for your own critical resources - things the current page definitely needs, but which the browser would not discover until later in its parsing process.
<link rel="preload" href="/images/hero.jpg" as="image">
<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>
The most impactful use of preload is your LCP (Largest Contentful Paint) image - typically the hero image at the top of your homepage. Without preloading, the browser discovers this image late in the loading process because it is referenced in CSS rather than HTML. Preloading it moves the download earlier, directly improving your LCP score.
The as attribute is required - it tells the browser what type of resource is being preloaded so it can prioritize correctly.
Be careful not to overuse preload. Preloading resources that are not immediately needed can compete with truly critical resources for bandwidth.
prefetch: Load Resources a Future Page Will Need
Prefetch instructs the browser to fetch a resource in the background at low priority for use on a future page - after the current page has finished loading.
<link rel="prefetch" href="/about">
<link rel="prefetch" href="/assets/js/checkout.js">
A practical example: on a blog post page, you could prefetch the next article in the series. When the reader finishes and clicks "Next Article," that page has already been quietly downloaded and loads almost instantly.
Prefetch is speculative - you are guessing what the user will do next. Use it when you have high confidence about navigation patterns (e.g., multi-step checkout flows, paginated content, predictable article sequences).
How to Add Resource Hints in WordPress
WP Rocket and Perfmatters both include preconnect and prefetch options in their settings panels - no code required.
For manual implementation, add resource hints to your child theme's functions.php:
add_action( 'wp_head', function() {
echo '<link rel="preconnect" href="https://fonts.googleapis.com">';
echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
}, 1 );
Priority 1 ensures these hints appear as early as possible in the <head>.
The Highest-Impact Combinations
If you implement only two resource hints, make them:
- preconnect to Google Fonts (or whatever font service you use) - immediate impact on render time for font-heavy designs
- preload your LCP hero image - directly improves the Core Web Vitals metric that Google uses in its ranking signal
Both are low-risk, broadly supported, and produce measurable results in PageSpeed Insights. Start there and add additional hints as you identify other opportunities through performance profiling.
Resource hints are one of the few performance optimizations that require very little infrastructure change to implement. A few lines in your HTML head can shave meaningful time off the metrics that matter most to both visitors and search engines.
