Website speed is one of the crucial factors for better ranking and on a blogger website, you will not find caching and image optimization plugins. So, in this article, we will discuss what is lazy loading and how you can enable lazy load on your blogger website.
Images play important roles in website speed and If you are using lots of images on a webpage then it will request more resources and slows down your webpage loading speed.
A website should load within 3 seconds for a better user experience but According to Google research average loading time of webpages is 22 seconds. To improve your website speed you need to better optimize your Images.
In WordPress, you will find many Image optimization plugins like short pixel, Smush, etc but on the Blogger website, you have to manually optimize your images and upload them to your website.
So you can follow some techniques to optimize your website speed by using image formats like .webp, JPG 2000 and You can also implement lazyload on a blogger website for better user experience and speed.
What is lazy loading?
Steps to enable lazyload on blogger:
- Go to the Blogger dashboard and click on the theme section.
- Then click on Edit HTML from the drop-down menu.
- On the HTML Editor click on ctrl + F and search for </body> or scroll down to the end you will find this </body> tag.
- Paste the javascript code just above the </body> tag and save it.
<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://3.bp.blogspot.com/-xtM_7x0_cU4/XIok1BisovI/AAAAAAAAPUc/QGJpBJZ3QBM_Spkd9r3-SMurEUbRI1pOQCLcBGAs/s10/loadingku.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
Good Try
ReplyDeleteThank you. 👍
DeletePost a Comment
If you have any doubt related to the above post , ask in the comment section