Tutorial Cara Memasang Lazy Load di Blogspot atau Blogger

Cara Memasang Lazy Load di Blogspot atau Blogger - Gambar dan iklan yang tidak teroptimasi dengan sempurna akan menyebabkan pemuatan menjadi lambat.

Tutorial Cara Memasang Lazy Load di Blogspot atau Blogger - Dari semua komponen-komponen yang ada dalam sebuah blog atau website, gambar dan iklan menjadi elemen yang paling banyak menyita waktu pemuatan halaman.

Jika Anda pernah melakukan pengecekan kecepatan blog di situs seperti GTmetrix dan PageSpeed Insights, gambar dan iklan yang tidak teroptimasi dengan sempurna akan menyebabkan waktu pemuatan halaman menjadi lebih lambat dan lemot.

Nah, jika Anda memiliki masalah yang serupa dengan topik pembahasan kali ini, maka lazy load menjadi solusi yang bisa diterapkan di blog Anda.

Namun, penerapan lazy load pada platform Blogger harus dilakukan secara manual. Tidak seperti pengguna WordPress yang bisa dengan mudah menggunakan plugin. Tapi jangan risau, tutorial tentang lazy load sekarang ini sudah banyak dibagikan.

Pengertian Lazy Load

Lazy Load atau yang bisa disebut dengan Lazy Loading adalah metode optimasi gambar dan iklan yang hanya akan melakukan pemuatan setelah pengguna melakukan aksi tertentu.

Pada dasarnya, ada dua jenis lazy load yang banyak digunakan saat ini, yaitu lazy load gambar dan iklan Google AdSense.

Template yang tidak menggunakan lazy load akan memuat suatu gambar dan iklan bersamaan dengan elemen yang lainnya. Nah dengan lazy loading tersebut, proses pemuatan gambar dan iklan akan dilakukan belakangan setelah pengguna menggeser atau melakukan scroll halaman.

Apakah perlu menggunakan lazy load di Blogger?

Jawabannya tergantung. Jika di dalam tulisan banyak menggunakan gambar atau iklan, maka lazy load tersebut akan sangat membantu dalam menekan proses waktu pemuatan.

Cara Memasang Lazy Load Gambar

Untuk memasang lazy load gambar di Blogger, Anda hanya perlu menambahkan skrip di bagian yang telah ditentukan. Caranya?

Buka BLOGGER
Pilih TEMA
Pilih EDIT HTML
Tempel di atas </body>:

<script type='text/javascript'> 
//<![CDATA[
// Lazy Load Image by HanaFash
(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://1.bp.blogspot.com/-Ge7CuMYvGd4/Xo0_-_5w16I/AAAAAAAABn8/uPmMqvND6W0sPa1TKhxLtlK4GkgmDC4_gCLcBGAsYHQ/s1600/bisablog-loading.png",effect:"fadeIn",threshold:"-50"})}); 
//]]>
</script>

Pilih SIMPAN
Selesai.

Cara Memasang Lazy Load Iklan Google AdSense

Buka BLOGGER
Pilih TEMA
Pilih EDIT HTML
Tempel di atas </body>:

<script type='text/javascript'>
//<![CDATA[
// Lazy Load Google AdSense by HanaFash
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/dewaplokis/block@master/dewablock.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>

Pilih SIMPAN
Selesai.

Bagaimana progres setelah melakukan pemasangan?

Agar lebih yakin, berikut adalah perbandingannya:

Sebelum pemasangan:

Setelah pemasangan:

Bagaimana? Sangat berpengaruh bukan?

Akhir Kata

Seperti yang telah saya katakan sebelumnya, apabila menggunakan banyak gambar dan iklan dalam tulisan, maka lazy load menjadi solusi yang sangat bisa membantu.

Di zaman sekarang ini, Google selaku raja internet dunia mulai memprioritaskan blog-blog dan tulisan yang dapat dimuat dengan lebih cepat. Buktinya adalah perilisan proyek AMP dan algoritma Mobile First Index (Mobilegeddon).

Demikian artikel tentang Tutorial Cara Memasang Lazy Load di Blogspot atau Blogger ini, semoga bermanfaat.