Glossary
Fetch priority
The fetchpriority attribute tells the browser that one resource matters more or less than its default ordering assumes. It changes the order of fetches that are going to happen — it does not decide whether a fetch happens, which is what a lazy loading attribute controls. Confusing the two is the most common misuse: raising the priority of a lazy-loaded image does nothing, because the fetch has not been scheduled yet.
What the browser already does
It assigns priorities from the resource type and position: stylesheets and blocking scripts high, images in the viewport moderate, images below the fold low.
Those defaults are good, which is why the attribute is worth using in very few places rather than everywhere.
The one they routinely get wrong is the image that turns out to be the largest element painted, because the browser cannot know that before layout.
Which is exactly the case the attribute exists for, and it is usually the only one on a page.
Priority and loading are different controls
A lazy attribute defers the fetch until the resource approaches the viewport. Nothing is scheduled, so nothing can be prioritised.
Fetch priority reorders among resources that are being fetched now.
So on an image visible without scrolling, the correct sequence is to remove any lazy attribute first and then raise priority if it is the largest painted element.
Doing the second without the first is a no-op that looks like a fix, which is why it survives in codebases.
Why raising everything achieves nothing
Priority is relative. If every resource is high, the ordering is the same as if none were.
Bandwidth is finite, so raising one resource necessarily delays another — the question is always which.
The useful pattern is one raise and, sometimes, one lower: the hero image up, a below-the-fold carousel or an analytics script down.
Lowering is the underused half, and it is frequently the safer intervention because it delays something nobody is waiting for.
Where else it applies
On a preload declaration, where it refines the priority of a fetch the declaration already scheduled.
On a script element, where lowering a non-critical third-party script is often worth more than raising anything.
On a programmatic fetch, through an option rather than an attribute.
It is a hint in every case: browsers may ignore it, and their heuristics continue to apply alongside it.
How it is observed
Whether a fetch priority is declared is read from the served markup, alongside the lazy loading attributes.
The image most likely to be the largest element painted is identified, which is what makes a missing raise meaningful.
An image carrying both a preload and a lazy attribute is reported, since those are contradictory instructions.
Whether a declared priority measurably improves rendering needs field measurement and is not asserted from markup.
Frequently asked questions
- Can I use fetch priority instead of removing a lazy attribute?
- No. Priority orders fetches that are happening; a lazy attribute decides whether one happens yet. Remove the attribute first, then raise priority if the image warrants it.
- Should I raise priority on all my important images?
- Priority is relative — raising everything is the same as raising nothing. One raise on the likely largest painted element is usually the whole intervention.
- Is lowering priority useful?
- Often more than raising. Delaying a below-the-fold carousel or a non-critical third-party script frees bandwidth for what renders first, with little risk.
Sources
Related
VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.
Scan a website