Cara Memasang Lazy Load Image Untuk Mempercepat Loading Blog

Cara Memasang Lazy Load Image di Blogger

AdityaTekno.com
- Cara Memasang Lazy Load Image di Blogger / Blogspot. Gambar merupakan salah satu faktor yang mempengaruhi beban loading menjadi lebih lambat. Gambar tersebut bisa berupa thumbnail, banner, logo, maupun gambar produk pemasaran yang terpasang di blog.

Apa itu Lazy Load Image?

Lazy Load Image adalah teknik atau cara menunda pemuatan gambar sebelum scroll halaman, jadi saat memuat sebuah halaman, gambar tidak akan dimuat sampai kita scroll halaman dan itu akan menambah kecepatan blog.

Cara kerja script lazy load image ini tidak jauh berbeda dengan script lazy load adsense, dan lazy load discus

Kenapa Lazy Load Image? 

Karena Lazy Load Image dapat membatasi pemuatan gambar yang tidak diperlukan di halaman awal. Sebuah gambar yang tidak terlihat oleh pengguna saat halaman dimuat akan dimuat nanti ketika pengguna menggulir halaman (scroll). 

Jika pengguna tidak menggulir halaman, maka gambar tidak akan terlihat oleh pengguna dan tidak akan pernah dimuat.

Tentu cara ini akan meningkatkan performa blog dari segi kecepatan loading nya.

Cara Memasang Lazy Load Image di Blog

  1. Pertama, buka dashboard Blogger >> Klik Tema >> Klik Edit HTML
  2. Kemudian tambahkan kode di bawah ini sebelum </body>
  3. <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://www.spruko.com/demo/pinlist/demo/img/loader.svg",effect:"fadeIn",threshold:"-50"})});
    //]]></script>
  4. Klik Simpan.
Coba sekarang cek kecepatan loading blog anda, apakah ada perubahan?


Demikian tutorial Cara Memasang Lazy Load Image Untuk Mempercepat Loading Blog. Semoga bisa bermanfaat dan membantu mempercepat loading blog anda. Terima kasih sudah berkunjung. Salam AdityaTeno.com

BACA ARTIKEL ADITYATEKNO.COM LAINNYA DI GOOGLE NEWS.

Next Post Previous Post
1 Comments
  • A. Abdul Mustahab ツ
    A. Abdul Mustahab ツ 5 November 2020 pukul 13.37

    Wah keren ini, tapi jangan lupa script ini hanya bekerja jika sudah pasang script jquery.

Add Comment
comment url