Cara Memasang Lazy Load Image Untuk Mempercepat Loading Blog

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
- Pertama, buka dashboard Blogger >> Klik Tema >> Klik Edit HTML
- Kemudian tambahkan kode di bawah ini sebelum </body>
- Klik Simpan.
<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://www.spruko.com/demo/pinlist/demo/img/loader.svg",effect:"fadeIn",threshold:"-50"})});
//]]></script>
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.
Wah keren ini, tapi jangan lupa script ini hanya bekerja jika sudah pasang script jquery.