How to Add Lazy-loading Images on Blogger [Easy Steps] in 2021

If you are is on Blogger, then the Biggest issue is Customization. There Is No Plugin to Add in Blogger to Boost the Speed of a Website. 

If You Are a Blogger and Worried About Loading Speed Because of the Images Then Read the Complete Post and Follow the Steps Described Below to Lazy load Images and Improve page speed of a Blogger Website.

How to Add Lazy-loading Images on Blogger [Easy Steps] in 2021

How to Add Lazy-loading Images on Blogger

Use Lazy-Loading Image on Blogger to improve Speed

To Make a Post More Attractive We Use Images, but Some Beginner Bloggers Do Not Have the Proper Idea to Optimize Images. Image Is the Large Part of a Website and Takes Much Time to Load.  

In This Post, We Will Discuss Step by Step Guide to Lady Load Images to Reduce the Page Loading

Step by Step Guide to Add Lazy Load in Blogger

To Understand It, in a Better Way We Will Divide It Into 2 Parts

First Part 

1. Log in to Your Blogger Dashboard, Then Go to Layout >>click on "Add a Gadget" on the Sidebar.

How to Add Lazy Load in Blogger

2. Now Click on Html/javascript as Shown Below

How to Add Lazy Load in Blogger

3. Copy the Below Code and Paste It in the Box

<script>

Document.addeventlistener("Domcontentloaded",function(){var E=[].slice.call(Document.queryselectorall("Img.lazy"));if("Intersectionobserver"in Window){let N=new Intersectionobserver(Function(E,t){e.foreach(Function(E){if(E.isintersecting){let T=e.target;t.src=t.dataset.src,t.classlist.remove("Lazy"),n.unobserve(T)}})});e.foreach(Function(E){n.observe(E)})}});

</script>{codeBox}

lazy load Script

You Are Completely Ready Now and  

Second Part

Before We Jump to the 2nd Part, Just Keep in Mind That, if We Lazy Load Every Image Then the First Snippet Image Will Not Visible to the Google Crawler, and There Will Be No Benefit of the Main Image of the Post.

So, We Only Use Simple Lazy Load Code Except for the Main Image of the Post. It Is a Manual Process and You Have to Do It Manually With Every Post Where You Want to Lazy Load the Images.

1. Go to a Post

image lazy load script

2. Click on the Html View

3. Now Search Src=

blogger lazy load script

4. Now Copy the Below Code and Replace It With All the "Src=" Code Except the First Src (Very Easy & You Can Do It)

Class="Lazy" Data-src={codeBox}

lazy load script for blogger

Congratulation You Are Now Ready to Boost Your Website Speed.

What Is Lazy Loading and How's It Work

When a Website Open Then It's Every Part Is Loading No Matter It Is Required by the User or Not. It Heavily Impacts the Page Speed and Reduces It.

Lazy Load Is a Process, Where the Website Load as Much Required by the User, and When the User Wants to Visit the Other Part or Then It Only Load the Other Part Like Images and Videos, Infographics, and Many More.

It Will Helps to Increase the Page Speed and There Are Multiple Benefits of Page Speed. It Is One of the Best Methods to Increase the Page Speed of a Blogger or Custom Build Website.

Benefits of Lazyload

  1. It Reduces the Loading Time
  2. You Can Add Multiple Large Content Without Any Worry
  3. Page Speed Helps to Rank Higher in the Search Engine
  4. Reduce Bounce Rate
  5. Increase Users Engagement

Conclusion

It Need a Basic Coding Knowledge to Implement It in the Blogger, With the Upper Detailed Steps, You Can Do It Easily. If You Have Not Much Money to Invest in Web Hosting Then You Can Also Use Blogger and With Some Basic Coding, Optimize Your Blog Easily.

I Hope You Like This Post, for More Amazing Post Related to Bloggers, Make Money Online Visit Another Post on This Site.

please do not enter any spam link.

Post a Comment (0)
Previous Post Next Post
close