Percepat Loading Blog Dengan Memasang Lazy Load

Percepat Loading Blog Dengan Memasang Lazy Load - Dalam sebuah postingan artikel di blog, gambar mempunyai peran yang untuk mendukung isi dari artikel tersebut. Selain itu dengan hadirnya gambar pada suatu artikel bisa mempercantik tampilan blog dan artikel itu sendiri. Namun tidak jarang hal ini menimbulkan masalah yaitu loading blog menjadi lambat.

Di sini kita dihadapkan pada pilihan antara tetap memasang gambar pada postingan atau mengejar loading blog tetap ringan dan cepat. Jika pilihannya hanya itu tentu saja kita harus mengorbankan salah satunya. Namun bagaimana jika peran gambar tersebut sangatlah penting, misalnya untuk mempromosikan produk tertentu atau pada saat membuat artikel tutorial yang membutuhkan gambar sehingga pengunjung atau pembaca bisa mencerna pembahasan dengan baik?

Belum lagi jika pada blog tersebut di pasang juga iklan dari Google Adsense atau penyedia iklan lainnya yang tentu saja sedikit banyak menambah pengaruh ke loading blog. Apa yang akan kita lakukan? Melepas iklan-iklan yang terpasang? Tentu earning akan terhenti dan ini bukan solusi yang terbaik.

Sobat Cara Pemula, untuk mengatasi hal tersebut kita bisa memanfaatkan fitur Lazy Load agar loading blog tetap ringan dan cepat serta bisa tetap memasang gambar dan juga iklan. Nah apakah lazy load itu?

Lazy Load

Mungkin sobat pernah mengunjungi sebuah blog yang mana blog tersebut memuat banyak sekali gambar dan juga menayangkan iklan Adsense namun loading-nya serasa cepat sekali. Kemungkinan besar blog tersebut telah memasang script lazy load untuk mempercepat loading halaman blog.

Apakah sobat pernah mendengar atau sudah tahu tentang apa itu lazy load atau bahkan malah sudah menerapkannya pada blog? Namun jika belum tahu sobat bisa terus menyelesaikan membaca artikel ini karena kita bahas tentang lazy load gambar dan juga lazy load untuk iklan Google Adsense.

Lazy load adalah sebuah teknik penundaan pemuatan gambar pada suatu halaman blog atau website. Jadi pada saat kita membuka halaman blog, gambar dan juga iklan tidak akan terbuka semuanya secara bersamaan, namun gambar atau iklan tersebut baru akan di muat setelah kita melakukan scroll atau menggulir halaman.

Sobat bisa memperhatikan loading blog dengan mengujinya pada Google Page Speed Insight dan coba bandingkan pada saat belum memasang lazy load dan sesudah memasang nantinya. Sobat Cara Pemula, silahkan baca juga cara membuat unit iklan penelusuran bersponsor.

Cara Pasang Lazy Load Untuk Gambar

Sobat Cara Pemula biar tidak berlama-lama kita langsung saja untuk memasang lazy load untuk gambar atau image di platform Blogspot. Langkah ini cukup mudah sehingga sobat bisa menerapkannya sendiri meskipun masih awam dengan koding. Adapun langkahnya adalah sebagai berikut :

• Masuk ke dashboar Blogger
• Pilih menu tema dan klik edit HTML
• Carilah kode </body>, Jika ingin cepat bisa dengan menekan tombol CTRL+F
• Setelah Ketemu kemudian copy dan paste kode berikut tepat di atas kode </body> tersebut :

<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>

• Jika sudah klik simpan
• Selanjutnya silahkan cek dengan cara mengunjungi salah satu halaman pada blog, cobalah rasakan perbedaannya.

Memasang Lazy Load Untuk Iklan Adsense

Menayangkan iklan dari Google Adsense merupakan salah satu cara untuk mendapatkan pendapatan dari blog, dan Google Adsense ini masih merupakan favorit bagi sebagian besar Blogger dan juga Youtubers.

Untuk menayangkan iklan Adsense di blog, pada umumnya para Blogger memasang lebih dari satu unit iklan. Jadi sobat bisa bayangkan bila iklan yang dipasang banyak, maka loading blog juga akan terpengaruh dengan jumlah iklan yang di load dalam waktu yang sama. Bagaimana solusinya?

Sobat bisa mengatasinya dengan memasang script lazy load untuk iklan Adsense. Langkahnya sedikit lebih panjang bila dibandingkan dengan cara memasang lazy load untuk gambar, namun Saya yakin sobat pasti bisa melakukannya. Untuk memasang lazy load untuk iklan Adsense sobat bisa mengikuti langkah berikut ini :

• Masuk ke dashboar Blogger
• Pilih menu tema dan klik edit HTML
• Cari dan temukan kode berikut ini yang terdapat pada kode iklan Adsense :

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 

• Sehingga kode iklan Adsense nantinya hanya tinggal seperti ini :

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client="ca-pub-12345678890123"

     data-ad-slot="1234567890"

     data-ad-format="auto"

     data-full-width-responsive="true"></ins>

<script>

     (adsbygoogle = window.adsbygoogle || []).push({});

</script>

Nah setelah ketemu, hapus kode tersebut. Jika terdapat lebih dari satu maka sobat bisa menghapus semuanya. Seteleh itu langkah yang harus kita lakukan adalah sebagai berikut :

• Carilah kode </body>, Jika ingin cepat bisa dengan menekan tombol CTRL+F
• Setelah Ketemu kemudian copy dan paste kode berikut tepat di atas kode </body> tersebut :

<script>

//<![CDATA[

// Lazy Load AdSense

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>

• Jika sudah klik simpan

Selanjutnya silahkan cek cara pemuatan iklan Adsense dengan cara mengunjungi salah satu halaman pada blog, atau bisa juga dengan mengetesnya di Google Page Speed Insight. Nah seobat Cara Pemula, cukup mudah dan cepat kan cara mempercepat loading blog dengan cara memasang script lazy load. Selamat mencoba ya.