Largest Contentful Paint (LCP) is how long the largest visible content element takes to render. Google considers 2.5 seconds or faster a good target. Slow hero images, web fonts, server response time, and render-blocking CSS are common causes.
Copy this as a starting pattern, then adapt paths/selectors to your real site and test before release.
<!-- Preload the real above-the-fold hero image -->
<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">
<img src="/images/hero.webp" width="1600" height="900" fetchpriority="high" decoding="async" alt="">
B · FIX WITHOUT CODE
Compress the real hero image and serve WebP/AVIF where supported.
Remove autoplay sliders or heavy above-the-fold video.
Delay non-critical plugins, widgets, and font files until after first paint.
C · ELEMENTOR / SHOPIFY / WIX
Elementor: set the hero background to a properly sized optimized image and avoid motion effects above the fold.
Shopify: use theme image settings that emit responsive srcset and avoid oversized section images.
Wix: replace oversized first-screen media and remove unnecessary animation from the hero section.
04 · BEFORE / AFTER PROOF
Verify the fix instead of guessing.
Re-test the same URL and device class in Lighthouse/PageSpeed. Only claim improvement from measured before/after runs; results vary by hosting, theme, network, and page content.
BEFOREMeasure the affected URLAFTERRe-test the same URL and device class
05 · FAQ
Common questions
Will this break my site?
Preloading and sizing an existing hero asset is usually low risk, but paths and dimensions must match the real asset. Test staging first and keep rollback instructions.
Does Genesis make changes during the scan?
No. The public diagnostic is read-only. It does not change your website.
GENESISCODE DOCTOR AI