Performance

Plan a lazy-load strategy that doesn't hurt Largest Contentful Paint

A scenario prompt for fixing a 4.2s LCP caused by a performance plugin lazy-loading the hero image sitewide, scoping the fix so it stops the one image that matters without turning off lazy-load everywhere else.

Works with Claude / GPT200 uses 4.1

The prompt

performance-lazy-load-strategy-lcp
A site's Largest Contentful Paint is 4.2s, well into the "poor" range. Lighthouse
identifies the LCP element as the homepage hero image, and flags it as "lazy-loaded
and not preloaded" as the cause of the delay.

STACK: [Elementor-built homepage, a performance plugin (like WP Rocket or Autoptimize)
set to lazy-load all images sitewide with no exclusions configured, native
loading="lazy" applied via that plugin's JS to every <img> tag site-wide]

Build the fix like a consultant who understands lazy-load is usually right and just
misapplied here, not by recommending "turn off lazy load":
1. Explain the actual mechanism causing the delay: the hero image is being treated the
   same as an image at the bottom of the page, so the browser deprioritizes fetching
   it until layout confirms it's needed, adding delay to the exact image the LCP
   metric is measuring.
2. Give the precise fix: excluding the hero image specifically from lazy-loading
   (most performance plugins have a setting for "exclude first N images" or a class-
   based exclusion), and adding fetchpriority="high" plus a preload link for that one
   image, rather than disabling lazy-load sitewide.
3. Note that disabling lazy-load entirely would fix this one image but slow down every
   other page that has many below-the-fold images, defeating the purpose of the
   feature, so the fix needs to be scoped to just this element.
4. Address the edge case where Elementor sets a hero image as a CSS background-image
   rather than an <img> tag, background images aren't affected by the loading="lazy"
   attribute at all, so if that's the actual setup here, the real fix is a different
   one: making sure the background image isn't being deferred by the plugin's separate
   "lazy load background images" feature instead.
5. Confirm this is entirely a wp-admin and page-builder settings fix (plugin exclusion
   rules, Elementor's own image settings), no hosting-level or code-level access
   needed, so it should be quick to implement and verify with another Lighthouse run.

Lazy-loading everything sitewide is a reasonable default until it accidentally includes the one image a Core Web Vital is measuring, and the fix is almost never “turn it off,” it’s “exclude the one thing that shouldn’t have been included.” This prompt is built around that distinction and the CSS-background-image edge case that trips up a lot of Elementor and Divi sites specifically.

Check whether your hero image is an actual <img> tag or a CSS background first, that one detail changes which plugin setting actually applies.