Lazy Loading WebP Images Without Breaking LCP

Lazy is a below-the-fold tool

If the image can appear in the first viewport on a phone, it is not lazy. Convert it, preload it, fetchpriority=high. Convert the rest and lazy-load those.

Why it matters

• JS lazy-loaders hide LCP from the browser.
• Light WebP files make lazy less critical — but still useful on long pages.
• CLS happens when width/height are missing, not because of WebP.

How to do it

1. Convert the page images to WebP.
2. Mark hero: no lazy, maybe preload.
3. Mark the rest: loading=lazy decoding=async.

Settings that work

Always set width and height (or aspect-ratio) on every img.