Do you want to enable Plugin named “Lazy Load for Blogger Images” just like WordPress Websites? Then, this article gives you detailed knowledge about lazy load plugins.
Lazy Load is a very helpful plugin for bloggers and website owners. Because It helps you to reduce your website’s initial loading time and also reduce your page weight at the time of loading.
Because of this your website loads within milliseconds and opens so fast. So that your users never exit the page so quickly and your bounce rate decreases, dwell time increases and you get conversions and increase AdSense revenue and so many benefits.
So Let’s deal with some questions and then we will learn to enable it on blogger sites.
What is a Lazy Load for Blogger?
Lazy Load is a technique to delay the Images, content, or resources on a website until it’s actually needed.
In simple language, When a user opens a website, that will only load the content which the user is currently seeing on his screen. Other content will not load until the user will scroll down the website.
Benefits of Lazy Load for a Blogger Website
There are so many Benefits of Lazy Load on the website. See the below-listed list for lazy load options for blogger websites.
- Reduces Initial Loading Time
- Reduces Web Page Load
- Increase Website Loading Speed
- Deliver Content to users only after the request
- Improve your ranking on Google
- Better User Experience
- Lower Bounce Rate and Increase Dwell Time
According to Google, For better user experience your website should load within 3 seconds but most of the website takes approx 20 seconds to load web pages.
So in this situation, Lazy load helps you the most and gives a better user experience. So let’s see how we can implement it on our blogger website.
Simple Steps to Enable Lazy Load Plugin on Blogger
To enable lazy load in bloggers, You need a lazy load script. Once you put that script code in your Blogger theme HTML codes then it will apply to your entire website images automatically. So let’s see how to put that code in HTML codes.
- Open Blogger Dashboard and click on the theme option
- Now click on Customize option and then click on the Edit HTML option from the Dropdown
- After that your theme HTML codes will be open, now search for </body> tag
- Click Ctrl+F on your keyboard and type </body> and press enter.
- You will find </body> tag in the last of these codes or you can also scroll down to find that
- Now put the below given Lazy Load script just above </body> tag and save.
Copy Paste the Lazy Load Javascript Code for Blogger Here.
<script>//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s1/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>Congratulations! You have successfully activated the Lazy Load option for your blogger website which will work on your entire website automatically. If you want to check, whether it’s working or not, then just open your website and start scrolling. You will notice that your images are loading when you are scrolling. It is giving a Fade effect which is showing it is loading after the user scrolling.
You can also check your website speed in google page speed insights or GTmetrix to see the loading time data.
Conclusion
So friends, if you are not using the WordPress website then you don’t have to worry at all. This Lazy Load Script will help you to enable the lazy load option on your website which will work the same as other plugins in the WordPress website. And the benefits I have already explained above.
So I hope you like this article and it is valuable for you. So, don’t forget to share this article on social media with friends and help each other.