Lazy loading images

Lazy loading means that images outside the visible area aren't loaded immediately, but only when the user scrolls to them. The loading="lazy" attribute is enough.

Without lazy loading, the browser downloads even images at the very bottom of the page that the user may never see — this delays the first render and wastes data. Lazy loading speeds up the start and saves transfer.

1. 1Add loading="lazy" to images and iframes below the visible area.
2. 2Do NOT use lazy on the main above-the-fold image (the LCP image) — you want that one as early as possible (preload it if needed).
3. 3Always specify width and height so the layout doesn't jump (CLS).