13 Cara dan Trik Paling Ampuh Untuk Mempercepat Loading Blog - Komputerdia | Berbagi Tutorial

13 Cara dan Trik Paling Ampuh Untuk Mempercepat Loading Blog

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 Terbaru dan Paling Ampuh Untuk Mempercepat Loading Blog

Cara Terbaik 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 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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
  • Langkah kedua, 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
Cara Terbaru dan Paling Ampuh Untuk Mempercepat Loading Blog
  • Langkah Ketiga, silahkan ganti kode <head> dengan kode dibawah ini
&lt;head&gt;
  • Langkah keempat, silahkan kalian ganti kode </head> dengan kode dibawah ini
&lt;/head&gt;&lt;!--<head/>--&gt;
  • Langkah kelima, silahkan kalian ganti kode <html> atau <html . . . . . . . . .> dengan kode dibawah ini
<HTML expr:dir='data:blog.languageDirection'>
  • Langkah keenam, silahkan kalian ganti kode </html> dengan kode dibawah ini
</HTML>
  • Langkah Ketujuh jika kalian menggunakan widget facebook fanpage, silahkan kalian hapus widget tersebut
  • Langkah Kedelapan jika kalian menggunakan widget Histats, silahkan kalian hapus widget histats tersebut
  • Langkah kesembilan jika kalian menggunakan widget DMCA Protected, silahkan kalian hapus widget tersebut
  • Langkah kesepuluh 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 Kesebelas 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
Cara Terbaru dan Paling Ampuh Untuk Mempercepat Loading Blog
  • Langkah Keduabelas 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 Ketigabelas 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
  • Selesai dan semoga bermanfaat untuk kalian semuanya
.
.
.
.

Berlangganan Artikel terbaru (free):

Post a Comment