Ads 720 x 90

Fiksioner Free Blogger Theme Download

Optimasi Loading Blog Super Fast dengan Lazy Load

B-KREATIF - Ketika kita membuat sebuah blog tentunya kita harus tau cara untuk optimasi blog kita agar fast loading. apa sih fungsi fast loading untuk blog kita ? ketika kita akan bertarung di mesin pencarian. setidaknya kita harus memiliki sebuah halaman blog yang memiliki kecepatan loading yang cepat.


Oleh karna itu  pada kesempatan hari ini saya akan membagikan beberapa tips untuk mempercepat blog kamu agar dapat memaksimalkan SEO ON PAGE.

Mempercepat Loading Blog Dengan Lazy Load

Apa sih penyebab Blog kita semakin lambat ? beberapa masalah pelambatan loading blog diakibatkan karna beberapa hal yaitu, Script & Css External, Google Adense dan Image. Salah satu contoh ketika kita memasang sebuah font awesome dari botstrap. Tanpa sadar, Hal tersebut mengakibatkan blog kita semakin lambat. Lalu bagaimana cara mengatasinya ? Kita bisa menggunakan Lazy load.

Lazy Load berfungsi sebagai penyumbunyi file tersebut. Ketika blog baru dimuat website, Css, Script dan gambar tidak akan di load terlebih dahulu sampai pengguna menscrool halaman blog.

Untuk mempersingkat waktu kita langsung saja ke cara optimasi blog dengan Lazy Load. ada 3 hal yang nantinya kita akan optimasi.

1. Optimasi Gambar Blog

Ada beberapa jenis gambar yang kita kenal Seperti Jpeg, Png dll. Untuk memaksimalkan loading blog kita harus mengkompres gambar menjadi kecil agar saat di load, website akan terasa ringan. Ada satu jenis foto yang sangat disarankan oleh google yaitu jenis webp. 

Jika kita suda terlanjur dan tidak mungkin untuk mengganti ke format tersebut, kita bisa memanfaatkan optimasi gambar menggunakan lazy load. Berikut ini caranya :
  1. Silahkan Buka blog kamu.
  2. Masuk ke menu template dan pilih Edit HTML.
  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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
    //]]>
    </script>
    
  4. Jika sudah silahkan masukan script Lazy Load untuk Gambar berikut tepat di atas </body>
  5. Dan save

Fungsi lazy load gambar ini adalah menyembunyikan gambar ketika awal di load sampai kamu menscrool halaman blog kamu.

2. Optimasi Iklan Adsense

Selain Gambar, Script dan Css external ikut berperan dalam kecepatan blog kamu.  Semakin banyak Script dan External kamu maka akan semakin lambat pula kecepatan blog kamu. dan untuk atasi hal terebut kita bisa menggunakan cara berikut ini.
  1. Silahkan Buka blog kamu.
  2. Masuk ke menu template dan pilih Edit HTML.
  3. Jika sudah silahkan masukan script Lazy Load untuk Script berikut tepat di atas </body>
  4.  
    <script type='text/javascript'>
    //<![CDATA[
    // Lazy Load Script
    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://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
    //]]>
    </script>
    
  5. Dan save
Jangan Lupa untuk menghapus Script adsense dibawah ini. Pastikan seluruh script sudah dihapus di tiap2 iklan.

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

3. Optimasi CSS & Script External.

Untuk Mengoptimasi CSS External kita juga bisa menggunakan script Iklan adsense akan tetapi harus ada beberapa yang dirubah, agar anda tidak bingung cukup copy script yang udah saya berikan.dibwah ini dan untuk langkah-langkahnya. dan berikut caranya.:

A. Lazy Load Script External

  1. Masuk Ke Akun Blog.
  2. Silahkan Pilih Template dan Edit HTML
  3. Jika sudah, Copy Script di bawah ini. Dan taruh tepat diatas tag </body>
  4. <script type='text/javascript'>
    //<![CDATA[
    // Lazy Load Script External
    var lazyscript=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyscript||0!=document.body.scrollTop&&!1===lazyscript)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyscript=!0)},!0);
    //]]>
    </script> 
  5. Ganti //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js dengan Link Script external.
  6. Save

B. Lazy Load Script CSS External

  1. Masuk Ke Akun Blog.
  2. Silahkan Pilih Template dan Edit HTML
  3. Jika sudah, Copy Script di bawah ini. Dan taruh tepat diatas tag </head>
  4. <script type='text/javascript'>
    //<![CDATA[
    // Lazy Load css
    var lazycss=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazycss||0!=document.body.scrollTop&&!1===lazycss)&&(!function(){var e=document.createElement("link");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazycss=!0)},!0);
    //]]>
    </script>
  5. Ganti //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js dengan Link Script external.
  6. Save

Jika sudah semua silahkan masuk Ke Google Page Speed Insight dan lihat perbedaan yang dihasilkan menggunakan script lazy load ini. Jika ada lebih dari 1 Script External. Kamu bisa menggunakan script diatas berulang. akan tetapi kamu harus mengganti nama variabel tiap-tiap script agar tidak mengalami collapse dan eror.
Nanda Krisbianto
Be a person who is useful to the world, Never sink with limitations.

Related Posts

Subscribe Our Newsletter