fetchpriority for tuning the resource queue

A relatively new attribute (2023+)

<!-- LCP image: highest priority -->
<img src="/hero.webp" fetchpriority="high" alt="Hero" />

<!-- Decorative offscreen image: lowest priority -->
<img src="/decoration.svg" fetchpriority="low" alt="" />

<!-- Below-fold but probably important -->
<img src="/article-cover.jpg" loading="lazy" />

Three values

• high — promote ahead of same-type resources. Use on LCP image and critical scripts.
• low — deprioritize. Use on offscreen images, optional scripts.
• auto — browser decides (default).

When it actually matters

Modern browsers pipeline downloads aggressively — preloads + parallel HTTP/2 streams. But on slow connections (mobile 3G) or pages with 50+ images, queue ordering still affects LCP by 200-500ms.

On <link rel="preload">

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

Combine preload + fetchpriority="high" to jump your LCP image to the front of the queue before HTML parsing even reaches the <img> tag.