Resource Hints Generator
Generate preload, preconnect, dns-prefetch and prefetch link tags, with guidance on when each one actually helps.
Generate preload, preconnect and dns-prefetch tags that actually help load times.
When to use it
Downloads the file at high priority. Only use it for something needed in the first render, or it competes with more important work.
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>About the resource hints generator
Resource hints tell the browser to start work early. preload fetches something needed for the current page at high priority. preconnect opens the DNS, TCP and TLS handshake to another origin before you need it, which saves hundreds of milliseconds on a slow connection.
They are easy to overuse. Preloading too much makes everything compete for bandwidth and can make the page slower, not faster.
How to use it
- 1Choose the hint type and read when it applies.
- 2Enter the URL and the resource type.
- 3Add crossorigin, which fonts always require.
- 4Copy the tag.
Questions
Why do preloaded fonts download twice?
Because the crossorigin attribute is missing. Fonts are fetched in anonymous mode, so without it the preload and the real request are treated as different fetches.
How many preconnects should I use?
Two or three at most. Each one holds open a connection, and too many compete for bandwidth during the critical early phase.
What is the difference between preload and prefetch?
preload is high priority for something needed on this page. prefetch is low priority for something likely needed on the next page.