Preload vs Prefetch — When to Use Each Resource Hint

Preload vs Prefetch Explained

preload and prefetch are both resource hints that tell the browser to fetch resources ahead of time, but they serve fundamentally different purposes and have different priority levels.

Preload — Current Page, High Priority

<link rel="preload"> tells the browser: "This resource is needed for the current page — fetch it right now with high priority." The browser starts downloading the resource immediately, even before it encounters the resource in the HTML or CSS.

<link rel="preload" href="/css/critical.css" as="style" />
<link rel="preload" href="/fonts/inter.woff2" as="font"
      type="font/woff2" crossorigin="anonymous" />

Key characteristics of preload:

• High priority fetch — the browser treats it as a critical resource
• Requires the as attribute — tells the browser what type of resource it is
• Must be consumed within a few seconds, or the browser logs an "unused preload" warning
• Does not execute the resource — it only fetches it into the cache

Prefetch — Future Navigation, Low Priority

<link rel="prefetch"> tells the browser: "This resource will likely be needed for a future navigation — fetch it when you have idle time." The browser downloads it with the lowest priority, so it does not compete with resources needed for the current page.

<link rel="prefetch" href="/next-page.html" as="document" />
<link rel="prefetch" href="/js/next-page-bundle.js" as="script" />

Key characteristics of prefetch:

• Low priority fetch — only downloaded during browser idle time
• Resources are stored in the HTTP cache for future use
• No "unused prefetch" warning — it is expected that the resource may not be needed immediately
• Useful for predictive loading based on likely user behavior

Decision Guide

Scenario	Use
Critical CSS for current page	preload
Hero image above the fold	preload
Font used on current page	preload
JavaScript for the next page	prefetch
CSS for a likely next navigation	prefetch
API data for the next view	prefetch

Common Mistake

Do not use preload for resources on the next page — they will consume bandwidth and compete with resources the user actually needs now. Conversely, do not use prefetch for resources critical to the current page — they will load too slowly to be useful.