Last updated
Resource Hint Decision Guide
- preload: Resource is definitely needed on the current page, fetch immediately at high priority
- prefetch: Resource will likely be needed on the next page, fetch during idle time at low priority
- preconnect: You will definitely connect to this origin soon, establish connection early
- dns-prefetch: You might connect to this origin, resolve DNS early (very low cost)
Common Mistakes to Avoid
- Omitting the
asattribute on preload — the browser can't prioritize correctly without it - Forgetting
crossoriginon font preloads — causes the font to be fetched twice - Preloading too many resources — competing for bandwidth hurts more than it helps
- Using preload for resources not needed on the current page — wastes bandwidth
- Preconnecting to too many origins — each connection uses memory and CPU
Examples
Example 1: Preloading Critical Fonts
Fonts block text rendering until they load. Preload them to eliminate the flash of invisible text (FOIT):
<!-- In <head>, before your stylesheet -->
<link
rel="preload"
href="/fonts/inter-regular.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="/fonts/inter-bold.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
The crossorigin="anonymous" attribute is required for fonts — even same-origin fonts use CORS. Without it, the browser fetches the font twice: once for the preload and once when CSS requests it.
Example 2: Preloading a Hero Image
<!-- Preload the above-the-fold hero image -->
<link
rel="preload"
href="/images/hero-banner.webp"
as="image"
type="image/webp"
/>
<!-- For responsive images, use imagesrcset: -->
<link
rel="preload"
as="image"
imagesrcset="/images/hero-400.webp 400w,
/images/hero-800.webp 800w,
/images/hero-1200.webp 1200w"
imagesizes="100vw"
/>
Preloading the hero image prevents it from being discovered late in the rendering process, which is one of the most common causes of poor Largest Contentful Paint (LCP) scores.
Example 3: Preloading Critical JavaScript
<!-- Preload a script needed for initial interactivity -->
<link
rel="preload"
href="/js/main.bundle.js"
as="script"
/>
<!-- Then load it normally later in the page -->
<script src="/js/main.bundle.js" defer></script>
<!-- Preload a critical CSS file -->
<link
rel="preload"
href="/css/critical.css"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript><link rel="stylesheet" href="/css/critical.css"></noscript>