Cara Memasang Lazy Load Pada Blogger

Usuluddin, S.Kom    Kamis, Februari 13, 2020    TUTORIAL   

Cara Memasang Lazy Load Pada Blogger

GoSEO.id - Ada banyak sekali cara untuk mempercepat kecepatan blog yang kita miliki. Salah satunya seperti pembahasan kita sebelumnya yaitu "Meningkatkan Kecepatan Blog Dengan Cloudflare". Dengan mempercepat kecepatan blog, juga berarti semakin mengoptimalkan SEO blog yang kita miliki.

Oleh karena itu, pada pembahasan kali ini GoSEO.id akan membagikan tutorial "Cara Memasang Lazy Load Pada Blogger". Yang pastinya dengan cara ini blog kita semakin teroptimasi dan memiliki load yang lebih cepat.

Tutorialnya sangat mudah. Kita akan memanfaatkan Plugin JQuery Lazy Load sebagai meringankan beban loading saat memuat halaman blog.

Oke kita langsung saja ke TKP :

Cara Memasang Lazy Load Pada Blogger

1. Login akun blogger.com yang kamu miliki.
2. Masuk ke menu Tema => lalu klik tombol Edit HTML.
3. Kemudian silahkan copy kode dibawah ini dan letakkan tepat diatas kode </body>.
   

   <script type='text/javascript'>
   //<![CDATA[
   // Lazy 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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWWF0Ehy6ETFrKhq6g7Qe7zUX6K105kuB72o6WqWklTGU9b0GIilJXwSoaDFgM_RrT9qJWFz62NgZPqHXzhKTJ_9zQCC5D6eJ4ZmwedRk7LCxET45n_xIiiegWk4nwW7OQEwREWbhkihN6/h120/GoSEOidLazyLoad.gif",effect:"fadeIn",threshold:"-50"})});
   //]]>
   </script>

4. Setelah itu klik tombol Simpan dan Selesai. Silahkan lihat hasilnya.

Bagaimana? begitu mudah bukan?

Semoga artikel ini bermanfaat. Silahkan tinggalkan komentar jika ada bagian yang tidak kamu mengerti.