Glossary · Performance

Preload (rel=preload)

rel=preload is a resource hint that tells the browser to fetch a specific file early, at high priority, because the current page will need it soon.

Updated October 6, 2026

Preload is a resource hint, written as <link rel="preload"> or a Link HTTP header, that tells the browser to start downloading a specific file immediately at high priority, before the parser or stylesheet would normally discover it.

Why it matters

Some critical files are found late: a font referenced inside CSS, a hero image set by a stylesheet, or a script requested by another script. Preload moves their request to the start of the page load, which can improve LCP and avoid font flashes. It must be used sparingly, because preloaded files compete with other high-priority requests.

Example

<link rel="preload" href="/fonts/inter.woff2" as="font"
      type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">

The as attribute sets the priority and lets the browser match the request with the later use. Fonts always need crossorigin, even from the same origin.

Common mistakes

  • Omitting as or crossorigin, so the preloaded file is fetched twice.
  • Preloading files the page never uses; Chrome warns in the console after a few seconds.
  • Preloading many files, which delays the truly critical ones.
  • Confusing it with prefetch, which is for future navigations.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · PerformanceBrotli CompressionBrotli is a compression algorithm from Google that usually shrinks text assets 15-25 percent more than gzip and is supported by all modern browsers.Glossary · PerformanceCache BustingCache busting changes a file's URL when its content changes, so browsers and CDNs fetch the new version despite long cache lifetimes.Glossary · PerformanceCache StampedeA cache stampede happens when a popular cache entry expires and many requests rebuild it at once, flooding the database or origin behind the cache.Guide · PerformanceHTTP/2 and HTTP/3 Explained: What Changes and How to Enable ThemUnderstand multiplexing, QUIC and head-of-line blocking, when HTTP/2 and HTTP/3 actually help, and how to enable and verify them on nginx and Cloudflare.7 min readGuide · PerformanceImage Optimization Guide: WebP, AVIF, Sizing, srcset, Lazy LoadingChoose between JPEG, PNG, WebP and AVIF, size images correctly, use srcset and lazy loading, and batch convert with cwebp, avifenc and sharp.6 min readGuide · Hosting & CDNCDN Explained: What It Does, When You Need One, and How Caching WorksUnderstand how a content delivery network works, which headers control caching, what origin shield does, when a CDN helps or hurts, and how to verify it is working.7 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.