squirrelscan
GitHub

fetchpriority='high': the LCP image hint squirrel checks

A hero image loaded eagerly with neither fetchpriority='high' nor a matching preload. squirrel picks the likely LCP candidate per page.

What fetchpriority does

fetchpriority is an HTML attribute that hints how the browser should rank a resource against everything else it is fetching. On the image that paints the largest element above the fold, fetchpriority="high" raises it relative to the rest of the queue. Chrome starts most images at a low priority and raises them once layout shows they are in the viewport, and that delay lands on Largest Contentful Paint.

A <link rel="preload" as="image"> for the same URL attacks a different delay: the browser starts the fetch as soon as it parses <head>, before it reaches the <img>. The two compose, and a preload can itself carry fetchpriority. Either one satisfies this rule. Neither belongs on a below-fold image, where raising priority steals bandwidth from the element in the viewport.

What squirrel checks

The rule runs on every crawled page. It picks one LCP candidate: the first <img> in document order that has a src, is not a data: URI, whose src does not match pixel, spacer, blank, 1x1 or tracking, whose path does not end in .svg or .ico, is not loading="lazy", is not inside a <header> or <nav>, and is not declared small. It emits one check:

  • lcp-fetchpriority, at info status with the message No eager hero image candidate found when nothing passes that filter.
  • lcp-fetchpriority, passing with the message Hero image has fetchpriority='high' when the candidate carries that exact attribute value, or Hero image is preloaded when its URL matches an image preload on the page.
  • lcp-fetchpriority, warning with the message Hero/LCP image loaded eagerly without fetchpriority='high' or preload, with the image’s src as the item id, its filename as the label, and a snippet rebuilt from the src and any fetchpriority value rather than the original tag.

An image counts as declared small only when both width and height parse as numbers and the larger of the two is under 300, so an undimensioned hero stays eligible. The hero is chosen by the same shared finder as perf/lcp-hints. Preload matching is by absolute URL, ignoring the query string and fragment: the rule collects the href and every imagesrcset URL from each link[rel~="preload"][as="image"], then compares them against the candidate’s src and its own srcset URLs. A preload for some other image is no evidence about this one, so an unmatched preload elsewhere on the page does not clear the check.

A page with no parsed document emits nothing at all.

Elements inside <noscript> are skipped: a browser with scripting enabled reads <noscript> content as plain text, so nothing in it loads or renders. See content inside noscript.

How to fix it

<img src="/hero.jpg" width="1200" height="630" fetchpriority="high" alt="" />

Put the attribute on the one image that paints the largest above-fold element, and nowhere else. The preload alternative goes in <head>:

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

The common false positive is a page whose real LCP element is a background image in CSS, or text rather than an image. This rule picks the first eligible <img>, which may not be what the browser measures. Check the reported filename against a field measurement before adding the attribute.

Rule IDperf/lcp-fetchpriority
CategoryPerformance
ScopePer-page
Severitywarning
Weight2/10

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"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

  • perf/lcp-hints: the heavier check on the same root cause, which is why this rule’s weight is low.
  • perf/lazy-above-fold: the opposite defect, an above-fold image marked loading="lazy".
  • perf/preconnect: connection setup for the host the hero image comes from.
  • images/dimensions: the width and height attributes this rule reads to size the candidate.

Performance findings ship in every audit next to the SEO, security and agent experience rules. See Core Web Vitals for how an agent works through a report.

References

Check your site

Run squirrel audit https://example.com and open the Performance section of the report. Each flagged page names the image it picked as the candidate. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.

Type to search…

↑↓ navigate↵ openesc close