LCP background image

This health check detects Largest Contentful Paint (LCP) elements that are implemented as background images based on real user data.

It identifies cases where the LCP element is rendered via CSS (e.g. background-image) instead of using a proper element.

Each todo represents a template where background images are used as LCP elements for a significant portion of visits.

About this check

When this check is triggered

You’ll see this check when:

  • The LCP element is detected as a background image (e.g. div+image, section+image)
  • The combined share of these cases exceeds the threshold (typically 5%)
  • The impact is visible in real user data
  • 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 rendered as background images

Example:

LCP is a background image on category-page for desktop
On page template category-page for desktop, 7.7% of LCP elements are implemented as background images (e.g. div+image, section+image).

Why this matters

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

When it is implemented as a background image:

  • The browser discovers it later than regular elements
  • It cannot be prioritized using fetchpriority
  • It depends on CSS being downloaded and parsed first

This results in delayed LCP via worse resource load delay and slower perceived loading speed as a result.

In contrast, standard image elements:

  • Are discovered earlier in the HTML
  • Can easily be prioritized and preloaded
  • Integrate better with browser loading optimizations

This directly impacts Core Web Vitals and user experience.

More context on web.dev and RUMvision LCP blogpost.

How to fix it

Most issues come from:

  • Using background-image for hero sections
  • Design-driven implementations using CSS instead of semantic HTML
  • Component libraries defaulting to background images

Possible causes and fixes:

1. Replace background images with <img> elements

The LCP element should be a proper image element.

What to check

Look for patterns like:

div style="background-image: url(hero.webp)"

What to do

Replace with an :

img src="hero.webp"

Important considerations

  • Keep layout and styling via CSS, but move the image itself to HTML
  • Ensure the image remains visually identical after the change

2. Ensure early discovery of the LCP image

Why this matters

  • Background images are only discovered after CSS is parsed
  • This introduces unnecessary resource load delay

What to do

  • Render the LCP image directly in the initial HTML
  • Avoid relying on CSS for critical visual content

3. Enable proper prioritization

Using inline images unlocks important performance features.

What to do

  • Add fetchpriority="high" to the LCP image
  • Use loading="eager" (or no attribute)
  • Optionally preload the image

4. Watch for component or framework limitations

What to check

  • UI components that enforce background images
  • Hero banners or sliders using CSS backgrounds

What to do

  • Refactor components to support
  • Ensure the first visible slide or hero uses a real image element

5. Validate visual and performance impact

Switching from background images to inline images should lead to measurable improvements.

What to do

  • Compare LCP before and after the change
  • Monitor real user data (p75) for improvements

Further debugging

How to approach this in RUMvision

  1. Open the todo
  2. Identify the template
  3. Inspect the LCP element:
    • Check if it is implemented via CSS (background-image)
  4. Verify in DevTools:
    • Elements tab → check how the image is rendered
    • Network tab → when does the image request start?
  5. Replace with an element
  6. Monitor improvement over the next 7 days

Pro tip

Focus on:

  • Hero sections
  • Banner components
  • Category headers
  • Landing pages with visual-first design

Replacing background images used as LCP elements is often a high-impact optimization for improving LCP.

Table of Contents