Identify the LCP node
In Lighthouse or Performance panel, click the LCP element. If it is <img> or a CSS background, you have an image problem. Note the downloaded file size and the displayed pixels. Those two numbers drive the fix.
Why it matters
- LCP is a Core Web Vital and a ranking input.
- Heroes are often 1–3 MB PNGs displayed at 400 px on mobile.
- Lazy-loading the hero delays LCP on purpose — accidentally.
How to do it
- Convert the LCP image to WebP at 1–1.5× the mobile and desktop rendered widths (or one 1920 px file if you must keep a single asset).
- Replace the source. Remove lazy load from that image. Add
fetchpriority="high"if it is the hero. - Preload the exact URL the browser will use (the WebP, not a 4000 px original).
- Re-run Lighthouse on mobile. Repeat for the next template.
Settings that work
Mobile LCP width is often 360–430 CSS px. A 800–1200 px WebP at 75–80% is usually enough. Desktop full-bleed: 1920 / 75%.
Common mistakes
- Preloading a JPEG while the page requests WebP.
- Using a CSS background with a huge PNG and no preload.
- Carousel libraries that load slide 1 late.