Skip to main content

fetchpriority="high" on Hero Image Element

Issue No: 117

Category: Resource Hints & Performance Issue Type: Warning Priority: Important

Description​

Pages with above-fold images should set fetchpriority="high" on the hero <img> element so the browser treats its download as the highest priority resource, reducing render latency for the primary visual content.

Crawler Constraint: The XeoPix crawler can detect fetchpriority="high" on any <img> tag in raw HTML and count all <img> elements. It cannot determine which specific image is the LCP element — that requires browser rendering and layout measurement. The trigger fires when the page contains <img> elements but none declare fetchpriority="high".

How Do We Capture It​

Where to Find​

In the HTML <body>:

<img src="/images/hero.webp"
     alt="Product hero"
     width="1200"
     height="600"
     fetchpriority="high">

HTML Extraction Flow​

The XeoPix crawler downloads the raw HTML response and scans the document body:

  1. Issues an HTTP GET to the target URL.
  2. Reads raw response bytes without JavaScript execution.
  3. Scans all <img> tags in the full HTML document.
  4. Checks each <img> for the presence of the fetchpriority attribute.
  5. Records whether any <img> has fetchpriority="high".
  6. Extracts the src values of all <img> tags with fetchpriority="high".
  7. Records the total count of <img> tags and count of those with fetchpriority="high".

Validation Logic​

The crawler validates:

  • Whether any <img> tag has the fetchpriority="high" attribute.
  • Whether the attribute value is exactly high (not low or auto).

How to Get It​

Crawler should:

  1. Parse full raw HTML document.
  2. Find all <img> tags with fetchpriority attribute.
  3. Filter for those where value is high.
  4. Extract src from each; count results.

What to Store​

FieldTypeComment
has_fetchpriority_high_imgBOOLEANWhether any img element declares fetchpriority="high" in the page HTML
fetchpriority_high_img_srcsTEXT[]Array of src values from img elements with fetchpriority="high"
fetchpriority_high_img_countINTNumber of img elements with fetchpriority="high" on the page
img_total_countINTTotal number of img elements found in the page HTML
has_imgs_without_fetchpriority_highBOOLEANWhether the page has img elements but none declare fetchpriority="high"

Condition for Trigger​

The following trigger rule fires only when the page contains img elements but none declare fetchpriority="high".

  • Trigger Rule 1: Page Has Images But No fetchpriority="high" Declared
    • Target Field: has_imgs_without_fetchpriority_high
    • Evaluation Logic: = TRUE
    • Severity: WARNING
    • Diagnostic Message: "This page contains img elements but none declare fetchpriority="high". The above-fold hero image should use this attribute to signal the browser to prioritize its download above other resources, reducing render latency for the primary visual content."

Sources​

Long Description​

fetchpriority is a priority hint attribute that tells the browser how to prioritize the fetch for a resource relative to other resources of the same type. When set to "high" on an <img> element, the browser elevates that image request to the highest network priority, ensuring it is downloaded before competing resources.

For LCP optimization, fetchpriority="high" complements <link rel="preload"> (Issue 115) by working directly at the element level rather than in the head:

ApproachMechanismBest for
<link rel="preload" as="image">Head-level early discoveryImages in CSS background or lazy-loaded via JS
fetchpriority="high" on <img>Element-level priority signalImages already in HTML <img> tag

Without fetchpriority="high":

The browser assigns resource priorities automatically based on heuristics (position in page, resource type, render-blocking status). For images, the browser typically assigns low or medium priority unless they are in the initial viewport. Without a hint, even above-fold hero images can be delayed by competing high-priority resources.

With fetchpriority="high":

The browser immediately promotes the image fetch to Highest priority in the network scheduler. Chrome DevTools shows this as Priority: Highest in the Waterfall view.

Common failure scenarios:

1. Hero Image Uses Default Priority​

<!-- No hint — browser assigns Low or Medium priority -->
<img src="/hero.webp" alt="Hero" width="1200" height="600">

In cases where the page has many resources, the hero image may be downloaded after blocking scripts and stylesheets.

2. fetchpriority="high" on Multiple Images​

<!-- BAD: Multiple images with high priority dilutes the benefit -->
<img src="/hero.webp" fetchpriority="high">
<img src="/banner.webp" fetchpriority="high">
<img src="/product.webp" fetchpriority="high">

Marking multiple images as high priority can increase LCP time because the browser cannot differentiate them. Only the true LCP element should receive fetchpriority="high".

3. fetchpriority="high" With lazy loading Conflict​

<!-- WRONG: lazy loading overrides fetchpriority="high" -->
<img src="/hero.webp" loading="lazy" fetchpriority="high">

Using loading="lazy" with fetchpriority="high" is contradictory. The lazy attribute defers the fetch until the image enters the viewport. Above-fold LCP images should use loading="eager" (the default) or omit loading entirely.

4. Image Injected by JavaScript​

If the LCP image is added to the DOM by JavaScript, fetchpriority="high" cannot be applied via HTML. A <link rel="preload" as="image"> in <head> (Issue 115) is the correct solution in that case.

How to Fix​

Add fetchpriority="high" to the above-fold hero image element:

<img src="/images/hero.webp"
     alt="Product hero image"
     width="1200"
     height="600"
     fetchpriority="high">

Guidelines:

  • Apply fetchpriority="high" to only one image per page — the true LCP element.
  • Do not combine with loading="lazy" — above-fold images should never be lazy-loaded.
  • For responsive images using srcset, the attribute belongs on the <img> tag: 
    <img srcset="/hero-400.webp 400w, /hero-800.webp 800w"
         sizes="100vw"
         src="/hero-800.webp"
         alt="Hero"
         fetchpriority="high">
  • For <picture> elements, place fetchpriority="high" on the inner <img> fallback tag, not on <source>.
  • Consider pairing with <link rel="preload" as="image"> (Issue 115) for maximum LCP benefit when the image URL is known at HTML parse time.