Tips Optimasi Kecepatan Blogger Dengan Mudah

Banyak sekali blog memiliki kecepatan yang cukup lambat maupun sangat kencang sangat di load ada kalanya blog yang kita punya pasti memiliki kecepatan lambat waktu di load bahkan akan membuat pengunjung menjadi malas untuk berkunjung ke blog kita, selain itu juga dengan load yang lambat dapat membuat pengunjung tidak betah karena mereka pasti ingin cepat dalam membaca berita maupun sekedar berkunjung saja.

Tips Optimasi Kecepatan Blogger Dengan Mudah

Tapi tenang saja karena Kang Iyan akan membagikan Tipsnya, tips ini tidak terlalu banyak kok cukup simple dan mudah untuk dilakukan asal jangan dibawah ribet aja hehehe. Untuk mempercepat blog pastinya akan sedikit menyulitkan apalagi ada beberapa gambar yang harus kita optimasi atau ukuran yang terlalu besar. Dari pada saya nanti bahas menjadi panjang lebar langsung saja ke Tipsnya :)

Tips Optimasi Kecepatan Blogger Dengan Mudah

Tips ini saya ambil dari penggalaman sendiri jadi kalau tidak work mungkin harus di optimasi lagi oleh kamu sendiri..

1. Optimasi Gambar

Kenapa gambar dapat memperlambat loading blog? yah pastinya gambar akan berat jika kualitasnya besar berbeda jika kualitas kecil waktu di load pun tidak akan berat malah akan kencang dan membuat pengunjung betah.

Sebenarnya kita bisa saja menghilangkan gambar tersebut tapi jika blog kita tidak menggunakan gambar pastinya akan terjadi seperti ini.

A: Wah kayaknya bagus nih artikel apalagi gambarnya juga bagus

B: Artikel apaan ini gambar aja enggak jelas

Nah bisa kita simpulkan jika tidak menggunakan gambar pasti tidak akan jelas bahkan membuat pengunjung binggung sendiri loh. Lantas bagaimana cara optimasinya kang ?

Kita bisa menggunakan gambar yang berformat PNG agar lebih ringan dan juga menggecilkan kualitasnya, bila kamu tidak tahu cara untuk menggecilkan kualitas gambar bisa ke situs commpresspng disana kamu pasti akan lebih mudah untuk melakukan Compress gambar atau bisa juga menggunakan software seperti Photoshop.

Jangan lupa untuk menambahkan alt pada image agar gambar waktu di klik ada alt atau penelusurannya

Kesimpulan:

Gunakan gambar berformat PNG
Compress gambar agar lebih kecil
 2. Hilangkan Javascript yang tidak digunakan

Bagi kamu yang asal pasang javascript segerahlah copot beberapa javascript yang tidak digunakan. Kenapa javascript juga berpengaruh? yah karena waktu load blog pasti terdapat beberapa javascript yang mengharuskan blog meloadnya jadi kalau ada javascript yang enggak digunakan atau nganggur hapus saja dari pada memperlambat blog kita.

3. Terjadinya Duplicate Javascript

Ini juga bisa terjadi loh karena jika Duplicate Javascript pastinya akan menggakibatkan load menjadi Double atau ganda pastinya akan berat.

Contoh javascript yang sering terjadi Duplicate :

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

nah jika kode diatas sudah pernah terdapat di blog kamu jangan pasang lagi karena Jquery cukup satu saja di blog tidak perlu banyak-banyak.

4. Minify CS

Nah kalau yang ini akan membantu bagi kamu, kenapa saya harus Minify dan apa itu Minify? menurut saya sendiri Minify itu lebih menyatukan kode agar tidak terlalu banyak white space nya dan juga lebih indah tampilan nya kalau sudah di Minify.

Contoh CSS sebelum Minify
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{
display:block;
overflow:hidden;
max-height:180px;
margin-bottom:10px;
}
.PopularPosts img{
padding:0
}
.PopularPosts .widget-content ul li{
padding:10px 0;
margin:0
}
Contoh CSS sesudah Minify
.PopularPosts .widget-content ul{padding:0;margin-top:-10px}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;}
.PopularPosts .item-title a:hover{color:#ff2d2d}
.PopularPosts .item-snippet{font-size:12px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px dashed #e3e3e3}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:180px;margin-bottom:10px;}
.PopularPosts img{padding:0}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}

5. Menghapus Widget Bundle Internal Blog

Pasti ini akan terjadi waktu saat melakukan penggecekan di Google Page Speed, widget ini pasti akan terus bermasalah selama kita tidak melakukan Optimasi secara manual untuk melakukan Optimasinya kita hanya perlu merubah Tampilan kode <head> dan </head>kita hanya perlu merubahnya menjadi seperti ini..

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

Jika itu sudah dilakukan coba kamu cek kembali di Google Page Speed dan lihat perubahan nya

6. Menghosting File CSS dan Javascript

Langkah ini dapat kamu coba sebagai Alternatifnya jika langkah diatas tidak bekerja, yang pastinya langkah diatas pasti bekerja lah :v sebelum itu apakah kamu punya Hosting? belum punya Hosting, kamu bisa menggunakan Github sebagai Hosting kamu sendiri disana pastinya server kencang jangan takut down karena sudah banyak para blogger menggunakan Github.

7. Optimasi Font Awesome

Nah ini pasti akan terjadi masalah waktu kamu cek page speed, kenapa bisa bermasalah? karena kita belum mengoptimasinya karena ini berbeda dengan Javascript sedangkan ini CSS maka dari itu kita hanya perlu mengganti Font Awesome yang biasanya menjadi seperti ini
<script>
//<![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("//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
//]]>
</script>
Ganti saja kode Font Awesome yang biasanya di taruh di kode <head> ke kode </body> dengan kode baru diatas dan hapus kode Font Awesome yang lama di blog kamu.

8. Menambahkan Async pada Javascript

Untuk menambahkan kode ini cukup cari saja kode yang mirip seperti ini
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Lalu kamu tambahkan kode Async nya seperti ini
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

9. Menggunakan Javascript Lazy Load

Dengan menambahkan kode Lazy Load ini dapat membuat blog kita menjadi ngebut tapi untuk meload gambar agak lama ataupun blank dulu baru keluar gambarnya meski begitu blog kita pasti akan ngebut dan kencang.

Untuk memasang Javascript Lazy Load ini cukup taruh kode berikut 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://1.bp.blogspot.com/-nexBjYukT1M/Wb35_cGZm-I/AAAAAAAAAF0/AA2nRi52RhEPx5clALDhBSSBbYDXYz6JACLcBGAs/s1600/Kang%2Biyan.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

10. Gunakan Widget Pada Blog Seperlunya

Seperti di blog ini pasti kamu sudah lihat sidebarnya cukup sedikit dan tidak terlalu banyak, kenapa saya tidak menggunakan banyak sidebar, karena itu dapat menggurangi waktu load pada blog saya maka dari itu saya cukup seperlu nya saja memasang widget dan tidak terlalu banyak juga cukup Populart Post sama Fanspage.

Kesimpulannya :

Pasti jangan gunakan terlalu banyak gambar pada blog, lakukan optimasi seperti cara diatas yang pastinya akan membuat blog kamu menjadi lebih cepat.

Oke Terima Kasih dah mau baca di blog ini :) Ada yang mau ditanyakan ke Kang Iyan? bisa di komentar pastinya akan saya bales dengan cepet ;)


Show comments
Hide comments

4 Responses to "Tips Optimasi Kecepatan Blogger Dengan Mudah"

  1. nice info min, cocok buat ane yg newbie ini.. sering sih ane klo upload foto yg full HD , trnyata pengaruh juga ya.. oke lah,

    ReplyDelete
    Replies
    1. Iya kalau gambar berkualitas HD sangat berpengaruh sekali buat blog

      Delete

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ