Monday, November 30, 2015

Membuat Loading Blog Super Cepat

loading blog super cepat
Kali ini saya akan merangkum beberapa artikel sebelumnya terkait cara meningkatkan kecepatan loading blog atau website menjadi super cepat dan seo friendly. Namun sebelumnya silakan uji dulu kecepatan loading blog kalian diberbagai layanan pagespeed tester, agar nantinya kita bisa tahu point point mana yang harus kita benahi menurut standard google guidelines. Dalam pengujian ini saya menggunakan 3 tool pagespeed yang menurut saya lebih optimal dan efisien dengan penilaian skor yang hampir sama, yaitu GTMetrix.com, Google Pagespeed Insight, Dan varvy.com.

Apa Pentingnya Blog Cepat..???

Untuk saat ini google lebih memprioritaskan pada sebuah web atau situs yang mempunyai loading cepat untuk bertahan pada halaman SERP, tentunya didukung dengan konten relevan dan berkualitas.

Beberapa Faktor Utama Yang Mempengaruhi Kecepatan Loading Blogger

Dalam hal ini yang sering menjadi masalah adalah penggunaan Javascript, CSS, Image, dan HTML yang berlebihan dan kurang efisien. Untuk itu sebaiknya kita buat tampilan blog menjadi seminimal mungkin namun tetap menarik dan ramah untuk dikunjungi.

Langkah langkah membuat speed loading blog menjadi super cepat


# JAVASCRIPT

Hindari Penggunaan Javascript yang berlebihan dan memberatkan blog, dalam kasus ini yang paling sering terjadi adalah pada efek penggunaan Jquery. Dengan munculnya peringatan seperti ini :

* Remove Render Blocking Javascript
* Defer Of Loading Javascript

Jika tidak benar-benar diperlukan kita bisa menghapusnya, namun kalau memang  kita harus memakai jquery ini kita bisa mengatasinya dengan menambahkan kode asynchronous ataupun menggunakan defer javascript
Solusinya kita bisa menggunakan kode dibawah ini :

<script async='async' src='http://code.jquery.com/jquery-2.1.4.min.js' type='text/javascript'></script>
atau

<script async='true' src='http://code.jquery.com/jquery-2.1.4.min.js' type='text/javascript'></script>
atau

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

# CSS

* CSS Bundle Blogger
Untuk mengatasinya kita bisa menggunakan kode ini dibawah ini :
Cari dan ganti kode CSS

<b:skin><![CDATA[
KODE CSS BLOG
]]></b:skin>

Menjadi

&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
KODE CSS BLOG
</style>

* CSS Font Google
Menggunakan @font-face pada template untuk mengatasi render blocking css, namun dengan metode ini kita masih menyisakan satu permintaan http request dari css ekternal tersebut.

* CSS Font Awesome
Untuk Font awesome ini silakan  baca Cara mengatasi Render Blocking CSS Font Awesome

* Optimize CSS Delivery
Baca Cara optimalkan CSS Delivery Blogger

# GAMBAR

Peringatan yang sering terjadi adalah :

* Minimize HTTP Request
* Optimize Image
* Combine Image with Css Sprite

Untuk masalah gambar ini kita bisa mengatasinya dengan menggunakan metode CSS sprite Image dan Image base64 sebagai cara untuk mengurangi permintaan HTTP Request.

Baca :
Mengurangi Permintaan HTTP Request Blogger
Cara Inline Gambar Base64 di Blogger

# HTML

Untuk mengatasinya kita bisa menggunakan metode minify HTML dengan memanfaatkan tool online secara gratis. misalkan HTML Compressor CSS Compressor dan sebagainya.

Semua point point diatas hanyalah yang paling umum terjadi dan masih banyak faktor faktor lain yang mempengaruhi kecepatan laoding blog yang akan saya bahas pada kesempatan berikutnya.