Reviewed November 2, 2026

fetchpriority High on the Hero Image: The One Attribute That Moves LCP

Add fetchpriority="high" to the hero image element that is your Largest Contentful Paint, and fetchpriority="low" to heavy images below the fold. Browsers initially assign most images a low or auto priority and only raise the hero after layout, which is late. The attribute moves the hero to the front of the download queue from the first parse. On image led hero pages this is routinely worth several tenths of a second of LCP, and it costs one attribute, not a redesign.

Every speed audit on an image led storefront finds the same photograph: a huge hero image, beautifully compressed, correctly sized, lazy loading disabled, and still arriving late, because the browser spent the first second downloading twenty other things it guessed mattered more. Compression was never its problem. Queue position was.

The browser cannot know which image is the LCP element until it lays out the page, and by then the queue has formed. fetchpriority is how you stop making it guess. It is the rare performance fix that is one word long.

Why the browser guesses wrong

Chrome and other browsers assign initial priorities heuristically: images in the initial viewport get bumped, but early in parsing, before CSS and layout settle, many images start at lower priority and compete with fonts, scripts, and each other. On a typical homepage the carousel slides, the collection tiles, and the logo all enter the queue alongside the hero. The hero often is the carousel's first slide, being downloaded at the same priority as slides two and three that nobody may ever see.

The result shows in the waterfall as a hero that starts downloading late and finishes later, pushing LCP out even though bandwidth was idle earlier. Preloading the hero image can fix the same problem, and fetchpriority is the lighter instrument: it reorders rather than duplicates, lives on the element itself, and cannot drift out of sync with the image the way a preload pointing at last season's file can.

Applying it in a Shopify theme

Identify the true LCP element first, from field data or a lab run with throttling, not from assumption: on many product pages it is the main product image, on homepages the hero, on collection pages sometimes the first tile or even a text block. Add fetchpriority high to that one image tag, and only that one. Marking five images high recreates the original queue problem inside the attribute.

Set below the fold product tiles and secondary carousel slides to fetchpriority low and keep their lazy loading. Remove any lazy loading from the LCP image itself; loading lazy on the hero is the single most common self inflicted LCP wound in themes, and it stacks with the priority problem. If the theme uses a responsive image helper, confirm the attribute survives into the rendered HTML rather than trusting that the setting exists somewhere in a panel.

Measuring without lying to yourself

Compare LCP in the lab with the same throttling profile before and after, then wait for field data to confirm the direction over the following weeks. Lab tests will flatter the change immediately; field data, the p75 your rankings and your shoppers actually live with, moves on its own schedule.

Attribute honestly. If you shipped the priority change in the same deploy as image compression and a font fix, your log should say so, and the gain belongs to the bundle. Stores that credit one change with a bundle's result end up keeping useless changes for years because each one apparently worked.

Frequently asked questions

Does fetchpriority work in all browsers?

It is supported in Chromium browsers and Firefox, with Safari support arriving later. Where it is unsupported, the attribute is ignored and nothing breaks, which makes it a safe progressive enhancement. The majority of most stores' mobile traffic gets the benefit today.

Should I use fetchpriority or preload for the hero image?

Either can work. fetchpriority is simpler to keep correct because it travels with the image element. Preload is useful when the hero is a background image the browser discovers late. Using both on the same image is redundant and can cause double handling in some setups.

Can I set fetchpriority high on multiple images?

You should not. The attribute is a relative signal; marking many images high tells the browser nothing and restores the contention you were fixing. One hero gets high. Important below fold images stay auto, and the rest go low.

Does fetchpriority help if my LCP element is text?

Not directly. If LCP is a text block, the bottleneck is usually font loading or render blocking CSS and scripts, and the fixes live there: font display settings, preloading the critical font, and cutting blocking resources. Run the diagnosis before applying the image remedy to a text problem.