LCP in production: fetchpriority, priority hints, and what actually worked.

Chrome shipped fetchpriority as stable in 107 (Nov 2022). It took another 18 months for it to become widely used. Here is what shipped on four client sites between March and July 2024, with before/after LCP numbers from CrUX.

Site A. DTC apparel, Shopify Hydrogen

p75 LCP before: 3.1s (mobile). After: 2.0s. Changes:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" fetchpriority="high" loading="eager" decoding="async">

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" fetchpriority="high" loading="eager" decoding="async">

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" fetchpriority="high" loading="eager" decoding="async">

Also removed a 180KB above-fold carousel library, deferred to idle. Carousel was doing 94% of its work before LCP on mobile.

Site B. B2B SaaS marketing site, Next.js 14

p75 LCP before: 2.8s. After: 1.4s. Changes: switched from next/image with priority prop (which sets fetchpriority automatically) to explicit <link rel="preload"> in the document head. The Next image component was still racing with hydration code.

Site C. Editorial publisher, WordPress

p75 LCP before: 4.2s. After: 2.6s. The win was not fetchpriority at all, it was killing a Google Tag Manager bootstrap that was synchronously loading 11 tags before LCP. Moved GTM to async and delayed non-consent tags to after interaction.

Site D. Marketplace search results page

p75 LCP before: 2.5s. After: 2.6s. Fetchpriority did nothing here because the LCP element was the first product card image, which was chosen dynamically based on search result ordering. Fix was server-side rendering the first card's image URL into a preload header. Cloudflare Workers, 4 lines of code.

What generalises

1. Fetchpriority is not a knob you can turn up. It tells Chrome which resource matters; if your LCP element is something weird (client-rendered carousel, dynamically chosen hero), the hint goes to the wrong thing.

2. Preload headers (HTTP 103 Early Hints or Link header from the origin) win more time than HTML <link rel=preload>. Cloudflare, Fastly, and Vercel all support this.

3. If your LCP is above 2.5s and you have not audited what is running before it, you are tuning the wrong thing. Most LCP problems are render-blocking JavaScript, not image delivery.

Sources: Chrome DevRel fetchpriority guide; Next.js docs on image priority; internal site audits, March-July 2024.