Cara Mempercepat Loading Blog
Saya akan memberikan tips sekaligus cara agar blog anda menjadi lebih cepat diakses oleh pengunjung (fast loading) sehingga membuat para pengunjung blog anda makin betah dan sayang dengan blog anda. Membuat blog fast loading juga merupakan teknik seo on page yang paling gampang, karena blog yang fast loading selain di sukai pengunjung juga lebih di utamakan di google untuk tampil di halaman pertama google, so bagi anda yang merasa blognya sedikit lambat atau lemot ketika diakses silakan baca tutorial dari blog ini.
Mengingat kecepatan koneksi internet di Indonesia ini rata-rata bisa dikatakan lemot (walaupun tidak semua) maka membuat blog fast loading merupakan hal yang penting dan kritis. Jangan sampai ada pengunjung blog anda yang komplain masalah blog anda yang lambat diakses. Dan jangan sampai juga anda menyalahkan koneksi internet pengunjung blog anda yang lemot dan tidak memperbaiki kecepatan loading blog <<< hehehe, ini blog malas namanya jangan ditiru.
Pertama-tama yang harus anda lakukan adalah menchek score kecepatan akses blog anda di PageSpeed Insights ini merupakan salah satu tools dari Google Webmasters yang fungsinya untuk menchek kecepatan loading blog kita, tinggal masukan url blog lalu klik analisis dan tunggu hasilnya keluar. Selain score akan muncul juga ringkasan saran yang harus diperbaiki agar blog jadi lebih fast loading.
Cara Mempercepat Loading Blogspot
Kita langsung saja masuk ke menu template lalu edit html untuk mengedit template blogspot anda agar bisa di optimalkan kecepatan loadingnya.
- Cari kode
<head>ubahnya menjadi<head> - Cari kode
</head>ubahnya menjadi</head><!--<head/>--> - Cari kode
</body>ubahnya menjadi<!--</body>--></body> - Cari kode
<b:skin><![CDATA[ubahnya menjadi<style type="text/css">
<!-- /*<b:skin><![CDATA[ - Cari kode
]]></b:skin>ubahnya menjadi</style>
Tutorial nomer 1-5 diatas ini untuk menyembunyikan css reset blogger dan juga menonaktifkan js widget dari blogger yang menyebabkan render blocking pada pagespeed insights.
Baca juga tips & cara dibawah ini:
- Kompress lah CSS blog anda, kalau gak tahu css yang mana ? css blog ini terletak diantar kode
<style type="text/css"><!-- /*<b:skin><![CDATA[sampai</style>. - Minimalkan pengunaan js kalau ukuran js kecil lebih baik di inline saja, dan compress js yang inline ditemplate. (saya biasanya menggunakan tools javascript-minifier.com untuk mengompres js).
- Inline CSS & JS yang pendek, pengunaan CSS & JS eksternal hanya akan membuat blog lemot dan menyebabkan render blocking pada pagespeed insights.
- Asynchronous (asingkron) kan js eksternal yang berukuran besar dan memberatkan loading blog seperti js sosial media facebook, twitter, google plus, dll.
For example:
Belum di async<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'></script>
Sudah di async<script async='async' src='http://w.sharethis.com/button/buttons.js' type='text/javascript'></script>
Ada penambahanasync='async'akan tetapi ada beberapa js yang tidak berfungsi jika di asingkron jadi lebih baik di coba-coba dulu. - Kompress gambar yang ada di blog baik di dalam template ataupun di dalam postingan (saya menggunakan jpegreducer.com untuk format .jpeg .png dan menggunakan gifreducer.com untuk format .gif).
- Mengatasi render blocking pada jquery, jquery ini seperti yang kita ketahui tidak bisa dibuat asingkron (tidak bekerja jika dibuat asingkron) maka untuk mengatasi render blockingnya cukup mengubah kode scriptnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>Ganti menjadi seperti dibawah ini.
<script type='text/javascript'> //<![CDATA[ if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");} //]]> </script> - Render blocking css yang berukuran besar, seperti yang sudah saya sebutkan diatas minimalkan css eksternal jadi kalau bisa di inline ditemplate saja itu kalau css berukuran kecil kalau besar kan kalau di-inline hanya akan membuat size blog jadi besar hal ini juga membuat blog lemot. Nah ini dia solusi render blocking pada css yang sudah pernah dibahas dan diterang di blog kompiajaib.
Caranya hapus semua css eksternal yang ada di template blog anda baik font blog, font awesome, lightbox, dll. Lalu ganti dengan kode dibawah ini (simpan di atas kode <head>).
<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("LINK CSS");
//]]>
</script>
Tinggal ganti LINK CSS dengan link css eksternal blog anda, kalau lebih dari satu tinggal tambahkan lagi kode loadCSS("LINK CSS"); sehingga menjadi seperti dibawah 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("LINK CSS 1");loadCSS("LINK CSS 2");loadCSS("LINK CSS3");
//]]>
</script>
</head><script type='text/javascript'>
//<![CDATA[
for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].removeAttribute("src"),imgEl[i].setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));console.log(document.body.innerHTML);
var imgDefer=document.getElementsByTagName("img");for(var i=0;i<imgDefer.length;i++){if(imgDefer[i].getAttribute("data-src")){imgDefer[i].setAttribute("src",imgDefer[i].getAttribute("data-src"))}};
//]]>
</script>
Cara Mempercepat Loading WordPress
Untuk wordpress sendiri hampir sama dengan blogspot, anda dapat mencoba tutorial diatas yang bagian baca juga tips & cara dibawah ini. Dan juga:
- Kurangi penggunaan plugin, kalau bisa tanpa plugin kenapa tidak. Memang wordpress menyediakan banyak plugin gratis dengan berbagai fitur yang beragam dan juga menarik. Memang penggunaan plugin ini cukup simple hanya perlu klik instal saja untuk menambah fitur atau fungsi di blog akan tetapi hal ini membuat blog menjadi lambat karena penambahan plugin sama dengan penambahan kode css dan javascript baru. So kalau bisa tanpa plugin lebih baik tidak menggunakannya.
- Gunakan plugin cache, perlu anda ketahui 70% konten web / blog merupakan file statis seperti css, js, gambar, dll yang ini artinya tidak berubah. Bila blog wordpress kita menggunakan plugin cache maka ketika ada pengunjung mendatangi blog anda akan menyimpan file statis tersebut, sehingga ketika mengunjunginya kembali, pengunjung tidak perlu menload file statis tersebut jadinya loading blog jadi lebih cepat dan juga kinerja server blog anda jadi lebih ringan. Ada beberapa rekomendasi plugin cache dari saya seperti W3 Total Cache.
Itu dia cara dan juga tips dari saya untuk mempercepat loading blog baik blogspot maupun wordpress, anda bisa mencobanya dan jangan lupa bandingan before dan afternya. Selamat mencoba.
Komentar
Posting Komentar
Silakan berkomentar dengan baik dan sopan.