Resource Hints: a beginner's guide

Resource hints are a small family of HTML tags — `<link rel="preload">`, `<link rel="prefetch">`, `<link rel="preconnect">`, `<link rel="dns-prefetch">`, and `<link rel="modulepreload">` — that tell the browser to start fetching, connecting to, or resolving things earlier than it otherwise would. They are some of the smallest, easiest, highest-leverage performance improvements available, because they let you parallelize work that would otherwise happen sequentially. The browser is happy to start a DNS lookup, open a connection, or download a critical asset as soon as it can — but it doesn't always know which things will be needed. Resource hints tell it.

You should care because resource hints can knock hundreds of milliseconds off a typical page load with five lines of HTML and zero changes to the underlying code. The classic example is a page that has to load a font from `fonts.googleapis.com` halfway through rendering. By default, the browser doesn't know it will need that font until it parses the CSS, which means it has to do a DNS lookup, a TLS handshake, and a download — all sequentially — before the text on the page can render with the right font. With a single `<link rel="preconnect" href="https://fonts.googleapis.com">` in the page header, the browser starts the connection setup immediately, and by the time the CSS parser needs the font, the connection is already warm.

The five resource hints every audit looks at:

• `dns-prefetch` — start the DNS lookup for a hostname. Cheapest hint, useful for any third-party origin you'll talk to.

• `preconnect` — start the full TCP and TLS handshake with a hostname. More expensive than `dns-prefetch` but a much bigger win when the connection actually gets used.

• `preload` — fetch a specific resource right now, with high priority. Useful for critical assets like fonts, hero images, and above-the-fold CSS.

• `prefetch` — fetch a resource in the background, low priority, to be used later. Useful for the next page a user is likely to visit.

• `modulepreload` — like `preload`, but for ES module dependencies. Useful for modern JavaScript bundles.

Three questions a resource-hint audit answers:

• Are there third-party origins my site uses that don't have a `preconnect` hint?

• Is my critical above-the-fold content being served as fast as it could be, or is it waiting on sequential lookups?

• Are there cases where my prefetches are downloading things the user never actually needs (which wastes bandwidth)?

The cost of skipping resource hints is leaving easy performance wins unclaimed. The fix is a one-time pass through the HTML to add the right hints at the right places. Most modern frameworks (Next.js, Nuxt, SvelteKit) generate appropriate hints automatically for the most common cases, but the audit still catches the cases that fall through the cracks.

In one sentence: Find preconnect, prefetch, and preload hints

Discovers resource hints (preconnect, prefetch, preload, DNS-prefetch) configured on a webpage. Reveals third-party dependencies and performance optimization strategies.

Don't worry if some of the words above are still unfamiliar — there's a plain-language glossary at the bottom of this page, and most of the terms link to their own beginner guides if you want to learn more.

Here's what's actually happening behind the scenes when you call this endpoint:

Parses HTML (HyperText Markup Language) for link rel="preconnect", "prefetch", "preload", and "DNS-prefetch" tags. Identifies which external domains are prioritized, what resources are preloaded, and analyzes the performance optimization strategy.

If you're using an AI assistant through MCP, you don't need to understand any of the technical details — the assistant calls the tool and translates the result for you.

Let's skip the marketing fluff and answer the only question that actually matters: why should you, a real human with a real to-do list, care about the Resource Hints tool? Here's the plain-English version, written the way you'd hear it from a friend who happens to do this for a living.

Resource hints reveal critical third-party dependencies and performance priorities. They expose which services a site relies on and provide insights into their performance optimization approach.

Picture this in real life. Imagine a performance engineer. Here's the situation they're walking into: Analyze resource hints to understand performance optimization strategy. Without the right tool, that person would be stuck copy-pasting between five browser tabs, reading documentation written for engineers, and crossing their fingers that the answer they cobble together is correct. With the Resource Hints tool, the same person gets a clear answer in seconds — no spreadsheets, no guessing, no waiting for someone on the infrastructure team to free up.

Three questions this tool answers in plain English. If any of these have ever crossed your mind, the Resource Hints tool is built for you:

• Why does my website feel slow on real devices, even though it looks fine on mine?

• Which specific change would give me the biggest speed boost for the least work?

• Am I losing visitors and search rankings because of performance problems I cannot see?

You can either click the tool and get the answer yourself, or ask your AI assistant — connected through MCP (Model Context Protocol) — to ask the question for you and translate the answer into something you can paste into Slack.

Who gets the most out of this. Founders watching their conversion rates, marketers trying to lift landing-page revenue, ecommerce operators chasing every percentage point of speed, and developers tuning Core Web Vitals. If you see yourself in that list, this is one of the EdgeDNS tools you should bookmark today.

What happens if you skip this entirely. Skip it and visitors bounce, conversions drop, and your search ranking quietly slides — all from a problem nobody on the team can see. That's why running this check — even once a month — is one of the cheapest forms of insurance you can give your domain.

If you're still on the fence about whether the Resource Hints tool belongs in your toolbox, this section is for you. Below you'll meet three real people — a performance engineer, a security analyst, and an SEO specialist — facing three real situations where this tool turns a stressful afternoon into a five-minute task. Read whichever story sounds closest to your week.

Story 1: Performance Analysis

Imagine you're a performance engineer. Analyze resource hints to understand performance optimization strategy.

Why it matters: Learn from competitor performance optimizations.

Story 2: Third-Party Discovery

Imagine you're a security analyst. Identify critical third-party dependencies from preconnect hints.

Why it matters: Map supply chain dependencies for security assessment.

Story 3: SEO Audit

Imagine you're an SEO specialist. Verify resource hints are properly configured for Core Web Vitals (Google Core Web Vitals).

Why it matters: Optimize page performance for better search rankings.

Common situations across teams. Beyond the three stories above, here are the everyday workplace moments when people across the company reach for the Resource Hints tool — or one of the tools right next to it in this category. If any of these are on your calendar this month, that's your sign:

• Before a high-traffic marketing campaign or product launch.

• After a redesign, to make sure performance did not regress.

• When your conversion rate drops without an obvious cause.

• On a recurring schedule, to enforce a performance budget for your team.

If you can see yourself in even one of those bullets, the Resource Hints tool will pay for itself the first time you use it.

Still not sure? Here's the easiest test in the world. Open Claude, ChatGPT, Gemini, or any other AI assistant connected to the EdgeDNS MCP server and ask, in your own words: "Is the Resource Hints tool useful for my job?" The assistant will look at the tool, ask you a couple of follow-up questions about what you're trying to accomplish, and give you a straight answer in plain English. No commitment, no signup forms, no jargon.

If you've connected the EdgeDNS MCP server to Claude, ChatGPT, Gemini, Cursor, or any other AI assistant, you don't need to write any code. Just ask in plain English:

"Use the Resource Hints tool to check example.com and explain anything that looks wrong in plain language."

The AI will figure out which tool to call, fill in the right parameters, run it, and then explain the result back to you. No copy-pasting between tabs. No reading raw JSON. No memorizing endpoint names.

If you're a developer and want to call the endpoint from a script or your own application, here's the simplest possible example. Replace the placeholder API key with the real one from your dashboard.

There's just one piece of information you need to provide. The table below explains exactly what it is and what a real value looks like.

When you call this tool, you'll get back a JSON object with the fields below. If you're talking to it through an AI assistant, the assistant reads these for you and explains them in plain language — you don't need to memorize them.

These tools pair naturally with Resource Hints. If you're already running this check, the related ones often answer the next question that comes up:

• Response Time — Measure server response latency

• Compression Check — Analyze gzip/brotli/zstd compression support

• Performance Score — Composite speed score from 6 optimization factors

If you're using an AI assistant through MCP (Model Context Protocol), you can ask it to run several of these in one go: "Check Resource Hints and the related tools for example.com and tell me what looks off."

If any words on this page felt like jargon, here's a plain-language version. Click any linked term to read a full beginner-friendly guide.

DNS (Domain Name System) — The internet's address book. When you type a website name, DNS turns it into the actual numeric address computers use to find each other.

HTML (HyperText Markup Language) — The basic language web pages are written in. The tags you see in the source code (<h1>, <p>, <a>) are HTML.

Core Web Vitals (Google Core Web Vitals) — Google's official measurements of how fast and smooth your web pages feel — how quickly content appears, how long the page takes to become interactive, and how stable the layout is. Used as a search ranking signal.