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, which 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).