What resource hints are
Resource hints are small <link> directives that let you tell the browser to do network work early, resolve a DNS name, open a connection, fetch a file, or even pre-render a page, before it would discover the need on its own. Used right, they shave real time off LCP and page loads. Used carelessly, they burn bandwidth and battery for nothing.
Why it matters: the browser normally learns what it needs by parsing HTML, then CSS, then running JS. Each layer of discovery costs a round-trip. Resource hints let you skip ahead for the things you already know the page depends on, especially third-party origins and the assets that gate your first paint.
The five hint types, and when to use each
This is the table to bookmark. Each hint does a different amount of work, and using the wrong one is a classic performance own-goal.
| Hint | What the browser does | How aggressive | When to reach for it |
|---|---|---|---|
dns-prefetch | Resolves the DNS for an origin only (no connection) | Cheapest | Many third-party origins you might use, as a lightweight fallback for older browsers |
preconnect | DNS + TCP + TLS handshake, a warm connection ready to use | Moderate | A known critical third party you will hit soon: fonts host, CDN, analytics that gates content |
preload | Downloads a specific file now, at high priority | High | The exact LCP image or font on the current page (see the dedicated preload entry) |
prefetch | Downloads a resource for a likely next navigation, lowest priority | Low priority, speculative | An asset or page the user will probably visit next (e.g. step 2 of a funnel) |
prerender / Speculation Rules | Renders a whole next page in the background | Most aggressive | High-confidence next navigation only, it costs a full page render |
Real hint tags
Here is a realistic <head> that uses the right hint for each job, warm up the font origin, preload the exact files that gate the fold, and set up a lightweight DNS resolve for a secondary origin.
<head>
<!-- preconnect: open a warm connection to the font CDN we will hit immediately -->
<link rel="preconnect" href="https://fonts.example-cdn.com" crossorigin>
<!-- dns-prefetch: cheap fallback / secondary origin used later -->
<link rel="dns-prefetch" href="https://images.example-cdn.com">
<!-- preload: the specific font + LCP image on THIS page -->
<link rel="preload" as="font" type="font/woff2"
href="https://fonts.example-cdn.com/inter.woff2" crossorigin>
<link rel="preload" as="image" href="/img/hero.webp" fetchpriority="high">
</head>
<!-- prefetch: the page the user is likely to open next (low priority) -->
<link rel="prefetch" href="/checkout" as="document">Note the modern replacement for old prerender: the Speculation Rules API. Instead of a link tag you ship a JSON block telling the browser which URLs to prefetch or prerender based on user behavior, it is far more controllable than the legacy hint.
How to check it on your own site
- Run Lighthouse and look for "Preconnect to required origins." If it lists a font or CDN host, add a
preconnectfor it. - View source and read the
<head>. Count your hints, more than a handful ofpreconnectlines is usually a red flag, each holds an open connection. - In DevTools Network, look at when third-party connections open. With a good
preconnectthe DNS/TLS bars for that origin sit at the far left, not mid-waterfall. - Watch the Console for "resource was preloaded but not used" and "preconnect to X but never used" warnings, both mean a hint is wasted.
- Confirm every
preconnectto a font origin hascrossorigin, without it the browser opens a second connection and the hint is pointless for fonts.
Common mistakes and how to fix them
- Preconnecting to everything. Each open connection costs memory and sockets. Limit
preconnectto the two or three origins that genuinely gate the first paint, usedns-prefetchfor the long tail. - Using
prefetchfor the current page. Prefetch is lowest priority and meant for the next navigation. If you prefetch this page's hero, it loads slower, not faster. Usepreload. - Missing
crossoriginon font preconnect/preload. Fonts are CORS requests, omit the attribute and the warm connection or preload does not match the real fetch. - Firing
prerenderspeculatively. Rendering a full page in the background burns CPU, bandwidth, and can skew analytics. Only prerender on strong signals, and prefer the Speculation Rules API. - Leaving stale hints after a redesign. Old preconnects to a CDN you no longer use just waste sockets. Audit hints whenever you change your asset origins.
FAQ
What is the difference between dns-prefetch and preconnect?
dns-prefetch only resolves the domain name. preconnect goes further, DNS plus the TCP and TLS handshake, so a fully warm connection is waiting. preconnect saves more time but costs more, so use it for critical origins and dns-prefetch for the rest.
Is preload a resource hint?
Yes, it belongs to the same <link> family, but it is the most aggressive one because it actually downloads a specific file at high priority. The others just prepare connections or speculate about the next page. See the dedicated preload entry for the details.
How many resource hints is too many?
There is no hard number, but each hint competes for the same bandwidth and sockets. A typical page needs one or two preconnects, a couple of preloads, and maybe a few dns-prefetches. Dozens of hints usually means none of them is helping.
Do resource hints directly help SEO?
Not as a ranking factor on their own. They help by improving LCP and load time, which feed Core Web Vitals. The hint is a means to a faster paint, and the faster paint is what Google measures.
Is prerender still supported?
The old <link rel="prerender"> is deprecated in modern Chrome in favor of the Speculation Rules API, which gives you finer control over prefetch and prerender via a JSON script. Use Speculation Rules for new work.
Claude Vincent is a technical SEO consultant focused on crawlability, rendering, and AI-search visibility. He writes the field guides and case studies at SEO ProCheck, with a bias toward the durable, unglamorous work that decides whether search engines and AI answer engines can actually read and cite a site.
About SEO ProCheck
Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.
Work With Me
Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.
Subscribe to our newsletter!
