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.