Lazy-Load Below-the-Fold Images
MUST: Eagerly load (and `rel="preload"`) only above-the-fold imagery; give every below-the-fold image `loading="lazy"`. Keep `width`/`height` or `aspect-ratio` on it so deferring the download does not reintroduce layout shift, and never lazy-load the LCP hero.
Give every image below the fold loading="lazy" so it downloads only when approached
<img src="/chart.png" width="800" height="450" loading="lazy" decoding="async" alt="…">Bad
Good
Why it matters
Eagerly loading images the user has not scrolled to yet spends their bandwidth and the browser's limited connection pool on pixels nobody is looking at — and it does so while the LCP hero is still competing for those same connections. loading="lazy" defers the request until the image nears the viewport, which cuts initial page weight and lets the above-the-fold content land sooner.
Keep width/height (or aspect-ratio) on the placeholder so deferring the download does not reintroduce layout shift, and never lazy-load the hero itself.