Fix Shopify LCP in Under 1 Hour — fetchpriority='high' on the Hero Image
Largest Contentful Paint (LCP) measures how long it takes for the largest visible element to render. On most Shopify stores, that element is the hero image — and on most Shopify stores, that image is loading with default browser priority, competing with scripts, fonts, and other resources. Adding fetchpriority='high' to exactly one image — the hero — signals to the browser to fetch it immediately, before everything else. This single change typically improves LCP by 400-800ms with zero visual impact.
What fetchpriority does and why it matters for LCP
Browsers assign fetch priority to every resource they discover — scripts, stylesheets, images, fonts. By default, images above the fold receive 'high' priority but not the highest possible. Adding fetchpriority='high' explicitly elevates the hero image to maximum network priority, ensuring it starts downloading before any lower-priority resource. Crucially, only one image should receive this attribute per page — if multiple images have fetchpriority='high', the prioritization signal becomes meaningless and LCP can worsen.
Identifying your LCP element
Open Chrome DevTools > Performance tab, record a page load, and look for the LCP marker. The LCP element is highlighted in the viewport. Alternatively, run a Lighthouse audit — it identifies the LCP element in the Opportunities section. On most Shopify storefronts, the LCP element is the hero image in the index section (index__image-banner or similar). Note its template location before proceeding.
Implementing fetchpriority in Shopify Liquid
Using image_tag: {{ section.settings.image | image_url: width: 1500 | image_tag: fetchpriority: 'high', loading: 'eager', alt: section.settings.image.alt, widths: '750,1000,1500', sizes: '100vw' }}. If you are generating the img tag manually: <img src="{{ image | image_url: width: 1500 }}" fetchpriority="high" loading="eager" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}">. The critical combination is fetchpriority='high' AND loading='eager' — never use loading='lazy' on an LCP image.
Using section.index to apply fetchpriority only on the first section
If your theme uses section.index to track position, apply fetchpriority only when the section is first: {% assign loading = 'lazy' %}{% assign fetchpriority = 'low' %}{% if section.index == 1 %}{% assign loading = 'eager' %}{% assign fetchpriority = 'high' %}{% endif %}{{ image | image_url: width: 1500 | image_tag: loading: loading, fetchpriority: fetchpriority }}. This ensures the optimization applies to the hero but not to identical section types lower on the page.
The fix: before and after
// CODE_COMPARISON
Frequently asked questions
- Should I add fetchpriority='high' to every above-fold image?
No. fetchpriority='high' should be applied to exactly one image per page — the LCP element. Applying it to multiple images negates the prioritization signal because the browser cannot give maximum priority to several resources simultaneously. For all non-LCP images above the fold, use loading='eager' without fetchpriority='high'.
- How much LCP improvement can I expect?
On stores with LCP between 2.5-5 seconds, adding fetchpriority='high' to the correct image typically improves LCP by 400-800ms. Stores on fast hosting with LCP already under 2.5 seconds see smaller gains (200-400ms). The improvement is consistent across devices and connection types because it affects resource scheduling, not bandwidth.
- How do I verify the fix worked?
Run a PageSpeed Insights test before and after the change at pagespeed.web.dev. Look for the LCP metric in the Performance section. Also check the Network waterfall in Chrome DevTools — the hero image should now appear near the top of the waterfall with Priority: Highest, starting its download before lower-priority resources.
// SCAN_YOUR_CODE
Does your theme have this bug?
Paste your code. Syphio automatically detects and fixes this error and hundreds of others — in seconds.
Validate my Liquid →