Preload
preload tells the browser to fetch critical resources early (fonts, hero images). Overusing it wastes bandwidth—preload only what's truly critical.
Definition
Preload is a resource hint (`<link rel='preload'>`) telling the browser to fetch a resource early because it's critical. It's commonly used for hero images and fonts to improve LCP. Overusing preload can waste bandwidth and hurt performance.
Why it matters
- Accelerates LCP element loading — discovers and fetches hero images or fonts early
- Prevents font flashing (FOIT/FOUT) and related CLS shifts
- Decouples discovery timing — resources referenced inside CSS/JS can load early
- Lighthouse recommends preloading LCP images for better scores
- Works with fetchpriority='high' for fine-grained priority control
- Shortens Critical Rendering Path, speeds up first paint
- Improves perceived performance and user experience
How to implement
- Preload only critical above-the-fold resources (typically 2-4 items)
- Set correct `as` attribute (image/font/script/style/fetch) — affects priority and CORS
- Always add crossorigin for fonts, otherwise they download twice
- Use imagesrcset/imagesizes for responsive image preloading
- Verify preload consumption in DevTools Network panel
- Avoid preloading unused resources (triggers console warning)
- Combine with preconnect for third-party origins
Examples
html
<!-- Place preload early in <head> for hero images -->
<link
rel="preload"
as="image"
href="/images/hero.webp"
fetchpriority="high"
/>
<!-- Responsive preload (selects image based on viewport) -->
<link
rel="preload"
as="image"
imagesrcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
imagesizes="100vw"
/>html
<!-- crossorigin is required to prevent double download -->
<link
rel="preload"
as="font"
type="font/woff2"
href="/fonts/inter-latin.woff2"
crossorigin
/>
<!-- Use in CSS (ensure src matches preload href exactly) -->
<style>
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-latin.woff2') format('woff2');
font-display: swap;
}
</style>FAQ
Common questions about this term.