Fetch Priority Hints
Fetch priority hints tell the browser the relative importance of a resource fetch, so a critical image loads before a below-the-fold one even when both are discovered at the same time.
Definition
Fetch priority hints (the fetchpriority attribute) let the developer signal the relative priority of a resource fetch — high, low, auto — so that the browser schedules the critical-path resource before a less important one that was discovered in the same parse pass, overriding the heuristic priority the browser would otherwise assign.
Context and scope
Applied in image loading, script loading, and any fetch where the browser default priority does not match the actual user-facing importance.
Common misconceptions
- fetchpriority is just preload — preload initiates a fetch early; fetchpriority adjusts the priority of a fetch already initiated, which is complementary
- The hint always overrides the browser — it is a hint; the browser may still apply its own scheduling, especially under connection constraints
Anti-patterns
- Setting every resource to high, which is the same as setting none to high and defeats the relative ranking
- Setting a low-priority resource to high and starving the genuinely critical fetch that the browser would have prioritized
Related concepts
Authoritative source
What it is
Fetch priority hints (the fetchpriority attribute) let the developer signal the relative priority of a resource fetch — high, low, auto — so that the browser schedules the critical-path resource before a less important one that was discovered in the same parse pass, overriding the heuristic priority the browser would otherwise assign. Applied in image loading, script loading, and any fetch where the browser default priority does not match the actual user-facing importance. The browser is a hostile, shared, single-threaded (for JS) environment where every millisecond of main-thread work is a millisecond the user cannot interact.
How it works
The rendering pipeline — style, layout, paint, composite — is incremental and can be invalidated by any DOM change. Performance work targets avoiding the expensive phases (layout, paint) and scheduling the rest in idle callbacks or off the main thread. Loading work orders resources by their impact on the critical path: render-blocking scripts are deferred, images get fetch priority, and the server pushes what the client will need next.
When to apply and pitfalls
Apply when user interaction latency or load performance has a measured business impact. The pitfall is micro-optimizing a function while the page ships a megabyte of render-blocking JavaScript — the dominant cost is structural, not algorithmic. Another is measuring in the ideal lab profile and missing the long-tail devices and networks where most users actually live.