Hey Folks! Are you searching tutorial for how to enable lazy loading images on blogger? If yes then here you will find all your answers.
In this article we will discuss about what is lazy loading and how to enable lazy loading images on blogger. So, let's dive in!
What is Lazy loading?
Lazy loading is defined as a optimization technique which is used to delay resource and object's loading until they arrive their location. Images have an important role in website speed and if we are using many images then it will slow down the loading speed of our webpage and will request more resources. And if you want to increase the loading speed of your webpage then it will require optimization of your images. So, in blogger we can increase the loading speed and user experience by implementing lazy loading on the website. Lazy loading is useful in reducing the page weight which results in less initial load time and also helpful in saving the resources of both server as well as client.
Now, let's discuss the steps to enable lazy loading on blogger.
How to enable Lazy loading on blogger
Here, we will discuss step by step guide to enable lazy loading on blogger. With the following steps you will be able to automatically apply the lazy loading to all images.
1. First of all, Go to Blogger site and Sign-in with your Google account.
2. In the left side, Click on Themes > Edit HTML.
3. Now, on the HTML Editor just find the tag and paste the following javascript code just above the tag.
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCY9JMHQPWh7DCD5LIa-H1Z8jL38vhGjvxtkJfpzw5BkBEMSyaQ7y75JH5oMNZJfg16RUTh9QXdQNKo04gyUXBPecIfqOjScAaL5p-eBQ1Rdila0mJCFUIG4RSmKlTwx0R0hb0PazhAsq/s1/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
4. Then, click to enable Lazy Loading on your Blogger Website.
And now you can see whether the lazy loading has been implemented successfully on your website or not by checking the speed of your website on Google page speed insight.
Conclusion
Above we have discussed the tutorial for how to enable lazy loading images on Blogger. Lazy loading is defined as a optimization technique which is used to delay resource and object's loading until they arrive their location. By following above mentioned steps anyone can easily enable Lazy loading on blogger and if you find any problem related to Lazy loading then you can ask me in the comment section.