Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

How to Install Lazy Load on Blogger (Blogspot)

How to Install Lazy Load on Blogger (Blogspot)

- - Post a Comment

Compared to all other website elements, images/photos have the largest size. So even though it can beautify the appearance of content, images or photos can also make loading blogs feel slow.

If you've ever checked website speed with tools like GTMetrix or Google Page Speed ​​Insight, poorly optimized images are usually one of the causes of a low pagespeed score.

Well, if you have problems with images, one of the steps in image optimization that you can do is to use Lazy Load.

Unfortunately on Blogger we can't use plugins like WordPress. But don't worry, there is an easy way to use Lazy Loading on Blogger.

Pengertian Lazy Loading

Lazy Loading or Lazy Loading is an optimization technique in which images will only be loaded when they are displayed on the user's screen only.

By default, all images in an article will usually be loaded immediately. If there are many images in the article, then loading will take quite a while. However, with lazy loading, only the images that will be loaded appear on the user's screen. The rest will be displayed with a delay as the reader scrolls down. That way, the loading time will be noticeably faster.

Do you need to use Lazy Loading on Blogger?

Depends. If you have a lot of media files such as images, videos, or GIFs, then Lazy Loading will be very helpful. But if there are only 1-2 images in each article, then lazy loading will not affect too much.

How to Add Lazy Loading Script on Blogger

To use Lazy Loading on a Blogger blog, we only need to add a lazy load script to the Blogger template. The method?

  1. Login to Blogger dashboard
  2. Go to the THEME menu then select EDIT HTML
  3. Search for the tag </body>and then copy this code just above the tag.
<script type='text/javascript'> //<![CDATA[
// Fast Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);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:"",effect:"fadeIn",threshold:"-50"})}); //]]>

If so, save it.

How big is the effect of lazy loading scripts on Blogger blogs?

To find out, on a whim, I tried installing lazy loading on one of my Blogger blogs. Unfortunately on the Viomagz template this doesn't have much effect. So I replaced it first with another template. After checking with GTMetrix this is the default score I got.

Pagespeed score before lazy load images dipasang
Pagespeed score before lazy load images dipasang

After that I installed lazy loading on the blog with the script above. Once added, here are the test results I got

Pagespeed score after lazy load images installed
Pagespeed score after lazy load images installed

How, not bad results right?

So if you use a lot of images and want to increase the loading speed of your Blogger blog , you can try the lazy loading script above.

Post a Comment for "How to Install Lazy Load on Blogger (Blogspot)"