If you are 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 the page speed of a Blogger Website.
How to Add Lazy-loading Images on Blogger [Easy Steps] in 2023
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.
2. Now Click on Html/javascript as Shown Below
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}
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 be 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
2. Click on the Html View
3. Now Search Src=
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}
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 Loads 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 as 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
- It Reduces the Loading Time
- You Can Add Multiple Large pieces of Content Without Any Worry
- Page Speed Helps to Rank Higher in the Search Engine
- Reduce Bounce Rate
- Increase Users Engagement
Conclusion
It Needs a Basic Coding Knowledge to Implement It in the Blogger, With the Upper Detailed Steps, You Can Do It Easily. If You do 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.