Defer Off screen Images in Blogger Using Lazyload Plugin

Every webmaster out there wants to rank his/her website or blog on Google. They put all the efforts in - inpage SEO, Offpage SEO , back links etc.

In all these matrices , speed is most important. If you have a great website - which takes like 10 seconds to load, then no one gonna like it and they will find alternative one day.

That's why you need to do a proper optimization of your page load and here Google PageSpeed Insights is your friend.

While analyzing your site in Audit (Lighthouse now), you may have noticed the alert below.

It says "Defer Off Screen Images". Which means you are loading the images and blocking the main thread causing the whole page to load slow.

So now whats the solution?

Solution is to load the necessary images only when user want to see it. Like when user scroll down and the image comes into the viewport.

Google Officially suggests their own solution - to use LazyLoad plugin.

Lazyload is nothing but a JavaScript file which detects the image tags in the document and make them load only when they appear in the viewport (ie. when user scrolls down).

Now in this guide we'll look exactly how to implement this to your Blogger blog. Implementing this will increase your page speed score for sure.

WordPress already have those lazyload plugins so they don't really have to worry about it. But Blogger people have to do something.

Step 1:

How to use Lazyload in Blogger

Login to your Blogger account and go to 'Theme'.
Choose 'Edit HTML' from the Options there.
Scroll the go to the end of the HTML code and paste the code below before </body>.

You've successfully implemented Lazyload to Blogger.

Step 2:

Now the next part is that Lazyload require to have class lazyload with all the image tags which you need to load lazy. It also need data-src instead of src attribute (For images and iframes).

For that, you need to write your article as usual.

Or you can open any of your existing post. After writing all the text and putting images, change writing mode to HTML.

change writing mode to HTML

Now here comes the main role to play. If you are already familiar with HTML, this isn't a problem for you.

You need to find each and every image tag in your article. Then you need to replace src attribute with data-src and need to add a class lazyload.

For example:

From -

To -

And that's how you need to do. Now doing all these manually will take a lot of time.

In some themes, thumbnail images may disappear after doing this. For that, don't do anything to the very first image tag (Keep it as it is because Blogger uses first image in the post as thumbnail).

But Blogger's new UI has something for us - 'Find and Replace Tool'.

Using find and replace tool we can replace - src with class="lazyload" data-src

And that's it! Your all images will load lazy.

Quick Idea: If you already have written a lot of posts, then leave them and start implementing this to your new posts.

Now doing this thing in each and every post is pain in arm.

That's why I made a simple tool which will help you.

Defer Off screen Images in Blogger Using a Tool

I've made a simple lazyload tool called 'LazyLoad Support Adder for Blogger' here.

Using that, first follow Step 1 as shown above. Then-

Write your whole post as it is. Just before publishing, change mode to HTML view.
After that cut (Ctrl + X) the whole HTML code.
Paste it in the tool here and click on 'Try It'. In case if you want to include first image image in lazyload, uncheck the Leave first img tag checkbox.
Once HTML get processed, copy the HTMl code and paste back to Blogger and click on Publish.

That's it and you're done. This way you can easily implement it to your Blogger Blog and can upgrade your points in Google PageSpeed Insights.

Every time you finish writing a article, make sure you cut and paste HTML from Lazyload tool.

Now you might have question - How much does it affects to lighthouse score?

Well, here's the experimental answer.