Lazy Load Images and Iframes

Lazy load loading

Chrome relase 76 was first web browser that support lazy-loading at the browser-level. When chrome first so Firefox followed. Now browser-level lazy loading for images and iframes is a build-in feature.

WordPress Add Lazy-Loading to All Images

Last year WordPress announced that WordPress 5.4 will add that feature, so all images will lazy-loading by default.

Browser Compatibility

img loading=lazy is supported by most popular Chromium-powered browsers (Chrome, Edge, Opera). Browsers that do not support the loading attribute simply ignore, so you don't have to worried about that.

How it Works?

Add a loading="lazy" attribute to the iframe or image tag that you want to load on demand. The browser will load iframes or images when users scroll near the element:

Why Lazy-loading Iframes?

Third-party embeds cover a wide range of use cases, from video players, to social media posts, to ads. Often this content is not immediately visible in the user's viewport.

Here is the live example how to use lazy-loading for iframes:

If you like this blog post and it was useful to you, please follow us on Twitter and Facebook.

Related articles


Post a Comment