Preloading
Definition
Telling the browser to start downloading important resources early, before it naturally discovers them during page parsing.
What is Preloading?
Preloading instructs the browser to download specific resources as high priority, early in the page load process. Normally, browsers discover resources as they parse HTML – preloading lets you skip the queue for critical files.
It's like giving VIP status to resources you know will be needed.
Why Preloading Matters
Earlier Resource Delivery
Critical resources arrive sooner, speeding up rendering and interactivity.
LCP Improvement
Preloading hero images and fonts often directly improves Largest Contentful Paint.
Predictable Loading
You control priority rather than relying on browser discovery order.
Hidden Resource Discovery
Some resources (like fonts referenced in CSS) aren't discovered until later. Preloading fetches them immediately.
How to Preload
Add a <link rel="preload"> tag in your document head:
<link rel="preload" href="/fonts/heading.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero-image.webp" as="image">
<link rel="preload" href="/critical.js" as="script">
The as attribute tells the browser what type of resource to expect.
What to Preload
Fonts
Web fonts often block text rendering. Preloading ensures they arrive early.
Hero Images
The largest above-fold image (often the LCP element) benefits from preloading.
Critical JavaScript
Scripts needed for above-fold interactivity should load early.
Key CSS
Though typically loaded via link tags anyway, dynamically loaded CSS can be preloaded.
What Not to Preload
Too Many Resources
Preloading everything prioritises nothing. Limit to 2-5 critical resources.
Below-Fold Content
Resources users won't see immediately shouldn't take priority.
Small Resources
The overhead of preload hints outweighs benefits for tiny files.
Third-Party Resources
You don't control their server – preloading may not help as expected.
Preload vs Prefetch
| Preload | Prefetch |
|---|---|
| High priority | Low priority |
| Current page need | Future page need |
| Use immediately | Use later |
Verification
Check that preloading works using browser DevTools:
- Network tab shows preloaded resources loading early
- Console may warn about unused preloads
- Lighthouse flags excessive or unused preloads
Unused preloads waste bandwidth and can actually harm performance – only preload what you'll actually use within a few seconds.