How to Defer onscreen Images On Blogger? [EASY WAY]

 Last time I talked about Defer Off Screen Images In Blogger Using Lazyload Plugin, but here I'm going to show you a traditional method.

Very often, webpages contain many images that contribute to data-usage and how fast a page can load. Most of those images are off-screen (non-critical), requiring user interaction (an example being scroll) in order to view them.

Here is loading attribute for you if you set loading = "lazy" in your <img> or <iframe> , your images or iframes will lazy load. This is so cool because you don't need any JS library or <noscript> tags as fallback to no-js browsers.

loading = "lazy" works pretty good, but it loads images much earlier when coming to viewport as compared to some lazy load JS libraries.

Below is how you can use it.

<img src="image.jpg" alt="....." loading="lazy" />
<iframe src="https://youtu.be/viDeoId" title="....." loading="lazy"></iframe>

In case of Blogger, after writing complete post, switch to HTML view and select replace tool.

Switch to HTML view.

Replace <img with <img loading="lazy" and click on Replace All.

This will replace all the <img occurrences to <img loading="lazy" and your image will load lazy thus making the load time of whole page faster.

Other values for Attribute loading are eager and auto. If you make loading="eager" then the images will load as usual and no lazy-loading.

Auto value has no special effect so its not advisable to use.

So that's how you can similarly replace any <iframe tag with <iframe loading="lazy" and you can easily increase your page speed.

If you have any questions, you can ask in comments below :)

• Tweet
• Share
• Share
• Share
• Share