What lazy loading actually does

By default a browser loads every image on a page — even the ones you only see after a lot of scrolling, or never. On a long page with many images that wastes bandwidth and slows the initial render. Lazy loading fixes this: images load only as they approach the visible area. This used to require JavaScript libraries — today a single native HTML attribute is enough:

<img src="photo.jpg" alt="Description" loading="lazy" width="800" height="600">

That's it. No script, no library. The browser handles the rest.

The biggest mistake: lazy-loading the first image

The most common misuse is putting loading="lazy" on every image — including the large hero image at the top. That's counterproductive: the topmost visible image is often the LCP element (Largest Contentful Paint — the biggest immediately visible element, which Google uses to measure load speed). Lazy-loading it makes the browser delay its start, and the load-time measurement gets worse, not better.

So the rule is:

  • Immediately visible images (above the fold): NOT lazy — load them normally, and even preload the most important one.
  • Images below the fold: loading="lazy".

Lazy loading is not a substitute for optimization

An important misconception: lazy loading doesn't make large images small — it only shifts when they load. A 5 MB photo stays a 5 MB photo, it just downloads later. Think of the order as: optimize first, then lazy-load. Bring images to sensible dimensions (resize) and compress them (compression) — both browser-local. Lazy loading is the finishing touch, not the replacement.

Combine with width and height

An easily overlooked detail: lazy-loaded images appear later — and if the browser doesn't know their size beforehand, the layout jumps when they load. So every image should have width and height (or a CSS aspect-ratio) so the space is reserved:

<img src="photo.jpg" alt="..." loading="lazy" width="800" height="600">

What about iframes?

The loading attribute also works on <iframe> — handy for embedded videos or maps far down the page:

<iframe src="..." loading="lazy" width="560" height="315"></iframe>

Heavy embeds (video players, map widgets) benefit the most, because otherwise they load during the initial render even though many users never reach them.

Conclusion

loading="lazy" is a one-line performance win — as long as you apply it to images below the fold and leave the hero/LCP image out. Pair it with width/height, and optimize your images first.