Native Lazy Loading Images and Iframes

what is lazy-loading 🔗

Lazy-loading means load this element on demand. We use the lazyloading technique to speed up the web page load time.

using lazyloading with images 🔗

Sample code for image element with lazy loading enabled.

<img width="" height="" loading="lazy" src="" alt="" />

The loading="lazy" is to load the image on demand. width="200" and height="400" to save the space for the loading image. src="" for the image url. alt="" to give a description for the image for accessibility purposes.

We us this CSS code snippet to make images responsive.

img {max-width:100%;height:auto;}

using lazyloading with iframe 🔗

Just add loading="lazy" to the opening element of iframe like this.

<iframe loading="lazy" ></iframe>

I hope this post helps you speed up your website page load times.