Five Ways to Lazy Load Images for Better Website Performance

Native lazy loading of images and iframes is super cool. Nothing could be more straightforward than the markup below:

<img src="myimage.jpg" loading="lazy" alt="..." />
<iframe src="content.html" loading="lazy"></iframe>

As you can see, no JavaScript, no dynamic swapping of the src attribute’s value, just plain old HTML.

The loading attribute gives us the option to delay off-screen images and iframes until users scroll to their location on the page. loading can take any of these three values:

lazy: works great for lazy loading
eager: instructs the browser to load the specified content right away
auto: leaves the option to lazy load or not to lazy load up to the browser.