How does native lazy loading work for images and iframes, and when should you not use it?

Add loading="lazy" to an <img> or <iframe>. The browser then waits to request it until the element is near the viewport (the visible part of the page). This saves bandwidth and frees the network for critical resources. It needs no JavaScript. Browsers that don't support it simply load the element straight away.

When not to use it: don't lazy load images that are visible on the first screen. This matters most for the LCP image (the largest image or text block on screen). The browser must run layout to know where a lazy image is, so it starts the download late. This is a common cause of poor LCP.

Always give lazy images a width and height, or an aspect-ratio. Then the browser reserves the space, and the image won't cause a layout shift when it arrives.

For custom behaviour, such as lazy loading components, you can use IntersectionObserver.