Preload vs Prefetch vs Preconnect
Slap yourself if
You treat these as interchangeable speed hacks or add all three hoping the browser will figure it out.
Why this exists
Because misuse of preload, prefetch, and preconnect routinely slows down real pages by fighting the browser’s scheduler instead of cooperating with it.
Mental model
These hints operate at different phases of the loading pipeline: preconnect warms the transport, preload reserves priority on the critical path, prefetch speculates about the future. Mixing them blindly collapses intent.
- preconnect establishes TCP/TLS (and possibly QUIC) connections early.
- preload declares a resource as critical and pulls it into the current fetch priority graph.
- prefetch schedules a low-priority fetch for a possible future navigation.
- The browser arbitrates all of them against bandwidth, dependencies, and heuristics.
- Using preload for non-critical or unused resources.
- Prefetching large assets that evict more important cache entries.
- Adding preconnect to origins that are never used.
- Stacking preload and prefetch on the same resource.
Preconnect warms up connections, preload pulls a resource into the current critical path, and prefetch speculates about future needs — each targets a different stage of loading.
- Says they all just make things faster.
- Uses preload as a replacement for good bundling.
- Ignores cache eviction and bandwidth contention.
- Cannot explain priority differences.
Deep dive
Requires Pro
Premium deep dives include more internals, more scars.