Resource Hint Checker
Audit preload, preconnect, prefetch and dns-prefetch hints, including the ones making the page slower.
About this tool
Lists every resource hint on a page — `preload`, `preconnect`, `prefetch`, `dns-prefetch`, `modulepreload` — and checks whether each one is doing anything useful.
Resource hints are unusual among optimisations in that **overusing them makes the page slower**, and the mechanism is straightforward. A `preload` fetches something at the highest priority immediately, ahead of whatever the browser was about to fetch. Preload ten things and you have not prioritised ten things; you have de-prioritised everything else and delayed the one that mattered.
The most expensive finding here is a **preload for a resource nothing in the HTML requests** — usually a stylesheet or image that was replaced and whose hint stayed behind. That is a full download nobody needs, at the highest priority, in the critical path.
Preloaded fonts are exempt from that check rather than reported. A font is requested from inside CSS, which cannot be read from the HTML, so a font preload always looks unreferenced — and preloading a font is the commonest correct use of the feature. Flagging it would be a confident false alarm on every well-optimised page.
Also checked: `preload` without a matching `as` attribute, which most browsers ignore entirely, and fonts preloaded without `crossorigin`, which makes the browser fetch them twice.
Common questions
How many resources should I preload?
One or two, usually the font and the hero image. Every preload competes with every other for bandwidth at the same priority, so a list of ten is equivalent to having none — except that it delays whatever the browser would have chosen.
What is the difference between preconnect and dns-prefetch?
dns-prefetch resolves the hostname only. preconnect does DNS, TCP and TLS, so it saves far more and costs an open connection. Use preconnect for the two or three origins that load earliest, dns-prefetch for the rest.
Why does my font preload load the file twice?
A missing crossorigin attribute. Fonts are always fetched in anonymous CORS mode, so a preload without crossorigin lands in a different cache slot from the real request and neither can use the other.
When should I use prefetch?
For the next navigation, not this one — the resource is fetched at the lowest priority for a page the visitor has not gone to yet. Prefetching something the current page needs is strictly worse than preloading it.