LCP Image Fetch Priority

Flags the hero/LCP image when it is eagerly loaded but has neither fetchpriority="high" nor a matching preload.

What it detects

The rule picks the likely Largest Contentful Paint element: the first eagerly-loaded content <img> on the page (it skips loading="lazy" images, data URIs, SVG/ICO icons, tracking pixels, small declared thumbnails, and logos inside <header>/<nav>). It then warns when that image is left at default priority:

• No fetchpriority="high" on the image, and
• No <link rel="preload" as="image"> whose href or responsive imagesrcset matches the image src.

Either signal is enough to pass. A default-priority hero is discovered and fetched late, delaying LCP.

This rule overlaps with LCP Hints on the no-preload case, which is why its weight is deliberately low: it adds the fetchpriority recommendation without double-charging the same root cause.

Solution

Give the LCP image an early, high-priority fetch. Add fetchpriority="high" to the <img>, or preload it with <link rel="preload" as="image" href="..." fetchpriority="high">. You do not need both. Frameworks such as React 19 emit an image preload for eager images automatically. Only apply this to the single above-fold LCP image, never to below-fold images, which should stay lazy.

Enable / Disable

Disable this rule

[rules]
disable = ["perf/lcp-fetchpriority"]

Disable all Performance rules

[rules]
disable = ["perf/*"]

Enable only this rule

[rules]
enable = ["perf/lcp-fetchpriority"]
disable = ["*"]