Why choose lazy loading pictures at all?
Lazy Loading defers the loading of a picture that's not required on the page in real time. a picture that's not visible to the user once the page masses, is loaded later once the user scrolls and therefore the image really come into view. If the user ne'er scrolls, a picture that's not visible to the user ne'er gets loaded.
1. Performance Improvement
The is that the most significant one for you as a web site administrator – higher performance and cargo time. With lazy loading, you're reducing the number of pictures that require to be loaded on the page at the start. Lesser resource requests mean lesser bytes to transfer and lesser competition for the restricted network information measure accessible to the user. This ensures that the device is ready to transfer and method the remaining resources abundant quicker. Hence, the page becomes usable abundant earlier compared to the case while not lazy loading.
2. value reduction
The second profit for you is in terms of delivery prices. Image delivery, or delivery of the other quality, is sometimes charged on the idea of the number of bytes transferred. As mentioned earlier, with lazy loading, if the image isn't visible, it ne'er get loaded. Thus, you scale back the overall bytes delivered on the page. particularly for users that bounce off the page or move solely with the highest portion of the page. This reduction in bytes transferred from your delivery network reduces delivery prices. this can become a lot of apparent as we have a tendency to explore lazy loading within the returning sections.
How to Install Lazy Load on your blogger?
Login to blogger.com > Theme > Html Editor and find this code </body>.
Add this code before </body> code and save your template.
<script type='text/javascript'>
//<;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/AVvXsEj8u2Kk4wtEUISFaMELyKvpXnvRT-1AneFPaDY-gHBDtlLxJ_lAmuHz1D46o99EhipLHuVZtPbndc3R8vi3sBAATmrJhT9EBdi1CgWGtOSTUiEIE3Lvb1QZgWTz3Mt6mRyiyuh8U3996x41/s1600/Loadingsome.gif",effect:"fadeIn",threshold:"0"})});
//]]>
</script>when done, save your template then refresh your blogger, Good luck.
