Cara Mempercepat Loading Blog Dengan Lazy Load

Cara Mempercepat Loading Blog

Kecepatan loading juga menambah SEO sebuah blog, disini saya akan membahas cara mempercepat loading blog dengan lazy load dan cara ini akan menambah kecepatan blog hingga 99% di Google Page Speed.

Apa Itu Google Page Speed ?

Google Page Speed adalah sebuah tools yang disediakan oleh google untuk mengecek kecepatan sebuah situs.

Selain Google Page Speed ada 1 tools lagi yang sering digunakan oleh para blogger untuk mengecek kecepatan blog mereka yaitu GTmetrix.

Meskipun kedua situs di atas sama-sama berfungsi untuk mengecek kecepatan situs, namun hasil laporan kecepatannya bisa berbeda, saya pribadi lebih suka menggunakan Google Page Speed.

Cara mempercepat loading blog ini work pada semua template blogger.

Cara Mempercepat Loading Blog Blogspot

Cara mempercepat loading blog ini hanya berlaku bagi pengguna blog platform Blogspot dan tidak berlaku bagi pengguna blog WordPress.

Menambahkan Lazy Load Untuk Iklan Adsense

Kecepatan blog sebelum ada iklan dan setelah ada iklan akan berbeda, blog yang di pasang iklan kecepatannya akan berkurang hingga 50%.

Meskipun adsense dapat memperlambat loading blog, namun kode iklan harus tetap di pasang, agar bisa menghasilkan uang dari blog.

Agar iklan adsense tidak memperlambat kecepatan loading blog, maka kita perlu memasang kode lazy load untuk iklan adsense dan ini bisa digunakan pada semua template yang belum memberikan lazy load untuk iklan adsense.

Memasang Kode Lazy Load Untuk Adsense

Kode lazy load di bawah ini harus anda tempel pada template atau tema blog anda.

<script>
//<![CDATA[
var lazyadsense = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {

(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();

    lazyadsense = true;
  }
}, true)
//]]>
</script>
  1. Pada Blogger Pilih Tema
  2. Pilih Edit HTML
  3. Cari Tag </body> Dengan Cara Menekan CTRL + F
  4. Tempelkan Kode Lazy Load Adsense Di Atas Tag </body>
  5. Simpan

Cara kerja lazy load untuk iklan adsense adalah, iklan hanya ditampilkan jika pengunjung melakukan scrol ke bawah.

Menambahkan Lazy Load Untuk Gambar

Selain iklan, gambar juga dapat memperlambat loading blog, apalagi gambar tersebut tidak di kompress sebelum di posting.

Memasang Kode Lazy Load Gambar

<script async='async'>
    //<![CDATA[
(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://4.bp.blogspot.com/-oA8G9t61JXk/VtLrtkAzObI/AAAAAAAAFTY/EjT6jl2MEFM/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]>
</script>
  1. Masuk Ke Tema Blogger
  2. Pilih Edit HTML
  3. Cari Tag </body>
  4. Tempel Kode Lazy Load Gambar Di Atas Tag </body>
  5. Simpan

Setelah memasang kode lazy load iklan adsense dan kode lazy load gambar, silahkan periksa kembali kecepatan blog anda menggunakan Google Page Speed.

Selengkapnya mengenai tutorial cara mempercepat loading blog menggunakan lazy load, silahkan simak video di bawah ini.