Web performance is a game of milliseconds, and one of the most powerful tools available is also one of the least used by most site owners: resource hints. These are simple HTML tags that instruct the browser to take action on specific resources before it would naturally encounter them. Implemented correctly, they can meaningfully improve how fast your pages feel - especially for returning visitors navigating through your site.
There are three main resource hints, and they each serve a distinct purpose.
Preload: Critical Resources on the Current Page
The preload hint tells the browser: "You will need this resource soon on the current page - start fetching it now, before you encounter it in the normal page parsing flow."
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
The as attribute is required and tells the browser what kind of resource it is fetching, which determines its priority in the network queue. Valid values include font, script, style, image, and fetch.
The highest-impact use case for preload is your LCP image - the Largest Contentful Paint element, typically a hero image or banner. The browser normally discovers images only after parsing and rendering the relevant HTML and CSS. By preloading the LCP image, you push it to the top of the fetch queue and start downloading it immediately, often reducing LCP by several hundred milliseconds. For many sites, this single change moves Core Web Vitals scores from "needs improvement" to "good."
<link rel="preload" as="image" href="/images/hero.webp">
Use preload sparingly. Every resource you preload competes for bandwidth with resources the browser would naturally prioritize. Preloading too many things is the same as prioritizing nothing.
Prefetch: Resources for the Next Page
Where preload focuses on the current page, prefetch looks ahead. It tells the browser: "The user is likely to navigate to another page that needs this resource - download it in the background when you have spare bandwidth."
<link rel="prefetch" href="/about/team.html">
<link rel="prefetch" href="/css/product-page.css">
Prefetched resources are downloaded at low priority and stored in the browser cache. If the user does navigate to the expected next page, the resource loads from cache rather than the network.
Common candidates for prefetch include: the next article in a series, product detail pages linked from a category listing, or checkout page assets on a shopping cart page. Analytics data can help you identify where users actually go next - prefetch those destinations rather than guessing.
On mobile, be cautious. Prefetching consumes data that your visitor may be paying for on a metered connection. Consider using the Network Information API or limiting aggressive prefetching to WiFi sessions if your audience is heavily mobile.
Preconnect: Establish Connections Early
preconnect does not fetch any content - it simply establishes the connection (DNS lookup, TCP handshake, TLS negotiation) to a third-party origin before it is needed. This saves 100-300ms per connection, which matters when you are loading Google Fonts, a CDN, or an analytics service.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Preconnect is particularly effective for Google Fonts, since the fonts themselves are served from a different origin (gstatic.com) than the CSS file (googleapis.com). Preconnecting both origins means the font files start downloading as soon as the CSS is parsed.
Limit preconnect to origins you are certain the page will use. Establishing a TCP connection that goes unused wastes a small but real amount of resources.
Adding Resource Hints in WordPress
In WordPress, the cleanest approach is to add resource hints via wp_head actions in your theme's functions.php or a small utility plugin. Several performance plugins handle this automatically:
- WP Rocket includes LCP image preload detection and can add preconnect for Google Fonts and your CDN automatically
- Flying Pages handles prefetching of internal links intelligently, based on hover intent rather than preloading every link
- Perfmatters allows manual specification of preload, prefetch, and preconnect hints without a full optimization suite
Resource hints are a precision tool, not a fire-and-forget setting. Test changes with PageSpeed Insights or WebPageTest to confirm that each hint you add actually improves the metrics you care about.
