Why Your Hero Image Loads Last

The browser decides what to load first. For your LCP image, it decides wrong. One HTML attribute fixes that.

Dafallah Ibrahim

— 2 min read
Share

You compressed your images, inlined critical CSS, and added preload hints. Your LCP score still stinks. Here's the likely reason: the browser is treating your hero image like any other <img> tag.

Browsers assign a network priority to every resource request. CSS gets the highest. Scripts get high. Images get low — all images, equally. The browser has no idea which image is your LCP element.

Why this matters

Largest Contentful Paint is often your hero image. The browser queues it behind scripts, fonts, and lower-priority images because it can't tell the difference. You lose 200–500ms while the browser fetches things the user doesn't see first.

How it works

The fetchpriority attribute overrides the browser's default priority assignment. Set it to "high" on your LCP image and the browser reorders its request queue before it finishes parsing the full document.

Set it to "low" on below-the-fold images to push them further back. This is different from loading="lazy", which defers loading entirely. fetchpriority changes the order, not whether the resource loads. Combine both for images far down the page.

Where this helps

  • Product pages with a hero shot above the fold and a gallery below — the hero loads first, the gallery waits.
  • Article pages where the featured image is LCP but analytics scripts and ad pixels compete for bandwidth.
  • Dashboards where the initial chart or data table should render before any background API fetches.

Watch out

Don't set every resource to "high" — you'll recreate the original problem. The attribute works on <img>, <link>, <script>, and <iframe>, but Firefox support landed only recently. If you're using <link rel="preload"> for your LCP image, add fetchpriority="high" there too — preloaded resources default to medium priority without it.

Try it yourself

<!-- LCP image: tell the browser this matters most -->
<img src="/hero.jpg" alt="Hero" fetchpriority="high">

<!-- Below-the-fold: defer and deprioritize -->
<img src="/gallery-15.jpg" alt="" loading="lazy" fetchpriority="low">

<!-- Preload + fetchpriority together -->
<link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">

TL;DR

  • What changed: fetchpriority overrides how the browser prioritizes individual resource requests.
  • Why it matters: your LCP image loads sooner because the browser stops queuing it behind less important assets.
  • What to try today: add fetchpriority="high" to your hero image and measure the LCP delta.

Read more