15 Cara dan Trik Paling Ampuh Untuk Mempercepat Loading Blog Terbaru

komputerdia.com - Loading blog atau kecepatan untuk merespon halaman suatu blog merupakan salah satu faktor yang cukup utama agar blog yang kita kelola bisa menjadi blog yang yang SEO dan user friendly. Kecepatan loading blog juga menjadi salah satu faktor yang sangat mempengaruhi akan hadirnya visitor.

Jika respon loading yang diberikan blog kita sangat buruk, maka tentu juga hasil yang didapatkan juga akan buruk. Untuk itu, kecepatan loading suatu blog itu sangatlah penting.

Dalam tutorial kali ini saya akan menjelaskan beberapa point penting agar kecepatan loading kalian  menjai lebih maksimal, dan tentunya akan dapat menarik visitor-visitor baru serta dapat membuat pengunjung menjadi betah berlama-lama di blog kalian untuk melakukan ekplorasi isi konten yang sudah kalian buat

Baca Juga Artikel Lainnya :

• Cara Membuat Multi Tab Sidebar Responsive Di Blogger
• Cara Memasang Kode Agar Konten atau Artikel Blog Tidak Bisa Di Copy Paste
• Cara Direct atau Meneruskan Page Not Found 404 Ke Halaman Lain

Langkah Dasar Mempercepat Loading Blog

• Sebelum kalian melakukan "operasi" blog agar lebih ringan dalam hal loading, silahkan kalian cek nilai kecepatan blog kalian di GTmetrix, atau juga di Google Page insight jika hasilnya masih buruk silahkan kalian lakukan langkah - langkah dibawah ini
• Langkah pertama (1) yang bisa kalian lakukan adalah dengan memasang script LazyLoad, silahkan copy dan tempelkan kode dibawah ini tepat diatas kode </body>

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-M_wa4P0PpXT33kaHmqXRMBqURn3JaOEY8DdaHRLlObiK6tF3CU8YbiZz-wfW7sLkg7KI0AbggTZBP51TgA8Y8spqQYo2tsOo9WTZY4N_d0Lq7el3k_VAhwh4NYGkwLIp0VC2ih1SSKTP/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

• Langkah ke dua (2), silahkan kalian cari kode <b:template-skin> atau kode <b:template-skin><![CDATA[ .Jika di dalam template blog kalian tidak terdapat kode seperti itu, silahkan lewati langkah kedua ini.
• Jika terdapat kode tersebut diatas, silahkan kalian copy kode yang terdapat didalam tag tersebut sampai batas ]]></b:template-skin>, kemudian tempelkan kode yang di kopi tersebut diatas kode ]]></b:skin> atau </style>. 
• Setelah kode tersebut dipindahkan, silahkan kalian hapus kode <b:template-skin><![CDATA[ dan kode ]]></b:template-skin>. Ilustrasi gambar bisa kalian lihat seperti dibawah ini

• Langkah Ke tiga (3), silahkan ganti kode <head> dengan kode dibawah ini

<head>

• Langkah ke empat (4), silahkan kalian ganti kode </head> dengan kode dibawah ini

&lt;/head&gt;&lt;!--<head/>--&gt;

• Langkah ke lima (5), silahkan kalian ganti kode <html> atau <html . . . . . . . . .> dengan kode dibawah ini

<HTML expr:dir='data:blog.languageDirection'>

• Langkah ke enam (6), silahkan kalian ganti kode </html> dengan kode dibawah ini

</HTML>

• Langkah Ke tujuh (7) jika kalian menggunakan widget facebook fanpage, silahkan kalian hapus widget tersebut
• Langkah Ke delapan (8) jika kalian menggunakan widget Histats, silahkan kalian hapus widget histats tersebut
• Langkah ke sembilan (9) jika kalian menggunakan widget DMCA Protected, silahkan kalian hapus widget tersebut
• Langkah ke sepuluh (10) silahkan kalian cari kode <script type="text/javascript"....../> , kemudian kalian sisipkan kode async='async' disetiap baris kode yang dicari diatas, sehingga format kode tersebut menjadi seperti dibawah ini

<script async='async' type="text/javascript" src=" . . . . . . . "/>

• Langkah Ke sebelas (11) kalian hapus fitur widget post by label, karena fitur ini menggunakan script pemanggilan feed yang akan memberatkan loading blog. Contoh fitur widget post by label ini adalah seperti berikut

• Langkah Ke duabelas (12) silahkan kalian copy dan tempelkan kode dibawah ini tepat diatas kode </head> atau &lt;head&gt; 

<!-- Cache --> <meta content='public' http-equiv='Cache-control'/> <meta content='private' http-equiv='Cache-control'/> <meta content='no-cache' http-equiv='Cache-control'/> <meta content='no-store' http-equiv='Cache-control'/> <!-- Cache --> <include expiration='7d' path='*.css'/> <include expiration='7d' path='*.js'/> <include expiration='7d' path='*.gif'/> <include expiration='7d' path='*.jpeg'/> <include expiration='7d' path='*.jpg'/> <include expiration='7d' path='*.png'/> <meta content='sat, 01 mar 2100 00:00:00 GMT' http-equiv='expires'/>

• Langkah Ke tigabelas (13) silahkan kalian copy dan tempelkan kode dibawah ini tepat diatas kode </head> atau &lt;head&gt; 

<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>

• Berikut ini adalah hasil test page speed situs komputerdia.com di dua versi situs

Hasil Test Dari GTmetrix

Hasil Test Dari Google Page Insight

Mempercepat Blog Dengan Lazy Load Adsense

Hal paling utama yang memperngaruhi loading blog atau situs menjadi lama yakni dengan adanya script dari iklan adsense. Jika pada situs atau blog kalian sudah terpasang iklan adsense, maka sebaiknya kalian gunakan optimasi loading berikut ini.

• Lagkah pertama silahkan kalian masuk ke menu Edit HTML, kemudian cari kode dibawah ini dengan cara menekan tombol CTRL+F

 </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

• Setelah kode diatas di temukan, langkah selanjutnya silahkan kalian copy kode dibawah ini dan letakkan sebelum kode diatas ( </body>)

 <script type='text/javascript'>
//<![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://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script> 

• Langkah selanjutnya silahkan kalian hapus semua kode berikut ini 

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

• Tahap ini sudah selesai

Mempercepat Blog Dengan Lazy Load Script

• Silahkan kalian masuk ke akun blogger kalian, kemudian masuk ke menu Tema dan pilih Edit Html
• Cari kode </body>, dan silahkan copy kode dibawah ini dan simpan tepat diatas kode body

 <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-M_wa4P0PpXT33kaHmqXRMBqURn3JaOEY8DdaHRLlObiK6tF3CU8YbiZz-wfW7sLkg7KI0AbggTZBP51TgA8Y8spqQYo2tsOo9WTZY4N_d0Lq7el3k_VAhwh4NYGkwLIp0VC2ih1SSKTP/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

• Selesai, dan semoga bermanfaat untuk kalian semuanya

Share this post