5 Cara Ampuh Mempercepat Loading Blog Agar Lebih SEO Friendly

December 14, 2017
5 Cara Ampuh Mempercepat Loading Blog Agar Lebih SEO Friendly
Cara Mempercepat Loading Blog - Mengatasi Blog Lambat Agar Lebih SEO Friendly.

KECEPATAN (Speed) merupakan faktor penting SEO Blog --membuat blog mudah dan cepat terindeks Google.

Dua elemen utama yang membuat loading blog lambat adalah kode javascript dan ukuran gambar. Salah satu script yang ada di blog adalah jQuery.

Link ke font Google juga mempengaruhi loading karena harus memanggil kode huruf ke situs lain. Kode CSS termasuk faktor yang mempengaruhi loading blog jika tidak dikompress.

Dengan demikian, Cara Mempercepat Loading Blog Agar Lebih SEO Friendly di antaranya dengan lima cara berikut ini:
  1. Kompress Kode CSS
  2. Kode Script untuk Link ke Font Google
  3. Pasang kode Lazy Load
  4. Hapus Bundle CSS Bawaan Blogger
  5. Optimalkan Gambar

Cara Ampuh Mempercepat Loading Blog Agar Lebih SEO Friendly

#1. Mempercepat Loading Blog dengan Memperkecil CSS

Dengan kode CSS yang dikompres, blog akan lebih ringan. Memperkecil CSS bisa dilakukan secara manual atau dengan otomatis.

Kode CSS yaitu semua kode yang ada di antara kode ]]><b:skin> dan ]]></b:skin> atau <style> dan <style>

Semua kode CSS tersebut bisa dikompress secara online di situs-situs berikut ini:

Contoh, kode CSS tadinya begini:

body {
  font-size:14px;
  font-family:Arial;
}
h1 {
  font-size:14px;
  font-family:Arial;
}

Setelah dikompress akan menjadi begini:

body{font-size:14px;font-family:Arial}h1{font-size:14px;font-family:Arial}

atau begini:

body{font-size:14px;font-family:Arial}
h1{font-size:14px;font-family:Arial}


#2. Mempercepat Loading Blog dengan Optimalisasi Ukuran Gambar


Ukuran gambar memainkan peran utama dalam loading blog. Makin besar ukuran gambar, makin lambat tampilan blog. Demikian sebaliknya.

Gambar atau foto yang akan diupload sebagai pelengkap atau ilustrsi postingan bisa lebih  dulu dioptimalkan di situs ini: Image Optimizer.

#3. Memasang Javascript lazyload
Kode Lazy Load merupakan "primadona" untuk mengatur tampilan gambar di blog. Kode Lazy Load ini akan menyembunyikan gambar yang belum muncul di layar sehingga blog tampil ringan.

Simpan kode Lazy Load berikut ini di atas kode </body>

<script type='text/javascript'>//<![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://lh5.googleusercontent.com/-20YhsQ_Xw9Y/UjHQlUIi0UI/AAAAAAAAGIo/6_etIYcweEQ/h120/lazy+image.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

#4.  Kode Script untuk Link ke Font Google


Jika Anda menggunakan font Google, maka biasanya ada kode link seperti ini:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Demikian pula link ke Font Awesome:

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

Kedua link tersebut mempelambat loading blog. Untuk mempercepatnya, pindahkan kedua link tersebut ke dalam kode berikut ini.

Pasang kode berikut ini di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i|Roboto+Condensed:700");
loadCSS("https://fonts.googleapis.com/css?family=Oswald:300,400,500,600");
loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

#5. Hapus CSS Bundle Bawaan Blogger

CSS Bundle bawaan blogger itu kodenya seperti ini:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/763856997-widget_css_bundle.css' />

Ini langkah populer di kalangan blogger, namun hanya berlaku di template yang bukan bawaan blogger. Untuk template bawaan blogger, akan terjadi error. Namun, coba saja, siapa tahu cocok di template Anda.

Caranya:

  1. Ganti <head> dengan &lt;head&gt;
  2. Ganti </head> dengan &lt;/head&gt;&lt;!--<head/>--&gt;
  3. Ganti </body> dengan &lt;!--</body>--&gt;&lt;/body&gt;

Silakan dicoba 5 Cara Ampuh Mempercepat Loading Blog Agar Lebih SEO Friendly di atas. Semoga cocok buat blog Anda saat ini. (bloggerbandung.net).*

Thanks for reading 5 Cara Ampuh Mempercepat Loading Blog Agar Lebih SEO Friendly

Related Posts

Next Article
« Prev Post
Previous Article
Next Post »
Your Comments

No SPAM, Please...!