LCP fetchpriority

This health check detects Largest Contentful Paint (LCP) elements that are missing a high fetch priority based on real user data.

It identifies cases where an image based LCP element is not explicitly prioritized using the fetchpriority="high" attribute.

Each todo represents a template where the LCP element is not consistently prioritized for a specific device type.

About this check

When this check is triggered

You’ll see this check when:

  • The LCP element is an image
  • The fetchpriority attribute is missing, invalid, or not set to high
  • The percentage of correctly prioritized LCP events falls below the threshold (typically 95–99%)
  • There are enough events to validate the pattern

What you’ll see

Each todo includes:

  • Template
  • Device type (desktop, mobile, tablet)
  • The percentage of LCP elements using fetchpriority="high"

Example:

LCP fetchpriority missing on homepage for mobile
On page template homepage for mobile, only 62% of LCP images are using fetchpriority="high".

Why this matters

The LCP element is the most important visual element on the page.

If it is not explicitly prioritized:

  • The browser may delay fetching it
  • Other resources (scripts, styles, images) may compete for bandwidth
  • LCP can be unnecessarily delayed

The fetchpriority="high" attribute helps the browser understand that this image is critical and should be scheduled earlier.

This directly impacts Core Web Vitals and perceived loading speed as the LCP's resource load delay sub-part will benefit.

More context on web.dev and RUMvision LCP blogpost.

How to fix it

Most issues come from:

  • Not setting fetchpriority at all
  • Using invalid values like auto
  • Inconsistent implementation across templates or components
  • Dynamic rendering where the attribute is not always applied

Possible causes and fixes:

1. Add fetchpriority="high" to the LCP image

The LCP image should be explicitly prioritized.

What to check

Check if the LCP image is missing the attribute:

img src="hero.webp"

What to do

Add fetchpriority="high":

img src="hero.webp" fetchpriority="high"

Important considerations

  • Only apply fetchpriority="high" to your biggest visible image that is either within or closest to the above-the-fold section
  • Avoid overusing it, as it reduces its effectiveness

2. Avoid invalid or default values

What to check

  • Attributes like fetchpriority="auto"
  • Incorrect casing or typos

Why this matters

  • auto does not provide any prioritization benefit
  • Invalid values are ignored by the browser

3. Ensure consistency across templates

What to check

  • Different templates using different image components
  • Conditional logic where the attribute is not always applied

What to do

  • Standardize your image component for LCP elements
  • Ensure the attribute is always applied for above-the-fold images

4. Combine with correct loading behavior

Fetch priority works best when combined with proper loading strategy.

What to check

What to do

  • Use loading="eager" (or no loading attribute)
  • Combine with fetchpriority="high" for optimal results

5. Validate real-world impact

Adding fetch priority is a small change, but it should show measurable impact.

What to do

  • Monitor LCP improvements after rollout
  • Compare before and after using real user data (p75)

Further debugging

How to approach this in RUMvision

  1. Open the todo
  2. Identify the template
  3. Inspect the LCP element:
    • Check if fetchpriority="high" is applied
  4. Verify in DevTools:
    • Network tab → check request priority of the LCP image
  5. Add or correct the attribute
  6. Monitor improvement over the next 7 days

Pro tip

Focus on:

  • Hero images
  • Banner images
  • Product images above the fold
  • Mobile layouts (often different LCP elements)

Adding fetchpriority="high" is a low-effort optimization with consistent LCP gains when applied correctly.

Table of Contents