Cara Mempercepat Loading Blog Anda

Cara Mempercepat Loading Blog Anda - Loading blog anda merupakan hal penting yang perlu anda perhatikan dalam membangun sebuah blog. Tapi faktanya tidak sedikit blogger yang belum peka dan tidak peduli akan kecepatan akses blog mereka, mereka lebih cenderung menyalahkan kecepatan akses internet pengunjungnya. Padahal hal ini tentunya salah besar, karena pada kenyataannya di indonesia ini yang namanya internet kecepatan aksesnya belum bisa dikatakan layak jadi kita sebagai seorang blogger haruslah pintar-pintar dalam mengakali blog yang kita punya agar tetap fast loading ketika dikunjungi oleh pengunjung manapun.

Tentunya blog dengan kecepatan akses loading yang cepat jauh lebih bersabahat dengan user dan membuat usernya betah berlama-lama diblog tersebut, dan tidak ada yang namanya pengunjung menutup tab browser blog anda karena loadingnya yang gak selesai-selesai. Selain dari segi kenyamanan pengunjung, blog dengan kecepatan loading blog juga berpengaruh terhadap proses perayapan/pengindexan blog anda oleh search engine seperti google. Hal ini tentunya juga berpengaruh terhadap peringkat blog anda.

Berikut cara yang wajib anda coba untuk bisa mempercepat loading blog anda (blogger.com):
Yang pertama harus anda lakukan adalah mencek skor kecepatan loading blog anda di PageSpeed Insight salah satu tools dari Google Webmasters yang berguna untuk skor nilai kecepatan loading berserta saran yang diberikan.
Silakan dibuka webnya dan lakukan analisis terhadap blog anda, langkah ini hanya untuk membedakan loading blog anda sebelum dan sesudah mencoba tutotorial mempercepat loading blog dari saya.

Masuk ke editor template blogger dulu untuk mengeksekusi tutorial dibawah ini.

Menyembunyikan CSS Reset Bawaan Blogger
CSS Reset atau CSS tambahan yang diberikan blogger pada blog anda, kurang lebih kodenya seperti ini jika dilihat dari page source (ctrl + u pada laman blog anda).
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/2761160889-widget_css_bundle.css' />
<link type="text/css" rel="stylesheet" href="//www.blogger.com/dyn-css/authorization.css?targetBlogID=5187131679737497634&zx=3763bd4d-298d-41d6-9a30-9b4bd68ba958"/>
Kode link css diatas tidaklah terlalu penting, hanya membuat loading blog anda berat dan juga masalah error pada validasi HTML5. Untuk mengatasi masalah ini anda tidak bisa langsung begitu saja menghapus kode diatas dari editor template blogger, anda caripun tidak akan ketemu, berikut trik untuk menyembunyikan CSS reset blogger.
Cari kode berikut:
<b:skin><![CDATA[
Silakan dihapus ganti dengan kode dibawah ini:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
/*<![CDATA[*/
Cari juga kode berikut:
]]></b:skin>
Hapus dan ganti dengan kode dibawah ini:
/*]]>*/
</style>
Tambahan, cari kode dibawah ini:
<head>
Silakan ganti dengan:
&lt;head&gt;
Cari kode:
</head>
Ganti dengan kode:
&lt;/head&gt;&lt;!--<head/>--&gt;
Lalu silakan di simpan template.
Menyembunyikan Javascript Widget Blogger dan Google Plus
Sama seperti CSS reset, javascript widget blogger dan google plus ini juga bisa dikatakan kode siluman karena bila dicari dieditor template blogger tidak ada tapi coba kalau anda view source (ctrl+u) maka akan terlihat kodenya tepat diatas
</body>
kode ini merupakan masalah dalam loading blog anda. Cukup berat karena menyumbang 2 javascript eksternal (widget js dan juga google+) yang dimuat secara sikron atau langsung dan tentunya menyebabkan render blocking javascript pada PageSpeed Insights.
Cari kode berikut:
</body>
Silakan dihapus ganti dengan kode dibawah ini
&lt;!--</body>--&gt;&lt;/body&gt;
Simpan template.
Asingkron Loading CSS Eksternal
Terkadang dalam sebuah template blog ada sebuah css eksternal yang harus dipanggil seperti misalnya: font sangat penting untuk blog, kita tidak bisa menghilangkannya atau menyembunyikannya baik font untuk tampilan tulisan ataupun font icon seperti font awesome karena akan berpengaruh terhadap tampilan blog anda. Disisi lain CSS font ini merupakan CSS eksternal yang harus dipanggil dan tentunya menyebabkan masalah render blocking css pada PageSpeed Insight, berikut solusi mengatasinya yaitu dengan menggunakan script javascript yang bisa menload css eksternal blog anda seperti google font, dan font awesome secara asingkron sehingga tidak membebani loading blog. Silakan simpan diatas 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("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
//]]>
</script>
Anda bisa menganti link css eksternalnya diatas
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
dan kalau lebih dari satu css yang mau diload secara asingkron tinggal tambahkan lagi loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
maka 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("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
//]]>
</script>
Asingkron Loading Javascript Eksternal dan Mengabung Javascript Eksternal
Javascript sangatlah menyumbang loading blog kita, sebenarnya banyak cara untuk membuat blog anda tetap ringan meskipun banyak javascript. Ya saran saya sebisa mungkin dikurangi penggunaan javascript yang tidak penting, akan tetapi kalau tinggal yang penting tapi masih berat loadingnya dan terdapat masalah render blocking js maka bisa dicoba cara mudah dibawah ini.
Untuk Javascript Eksternal, misal kodenya:
<script type="text/javascript" src="https://cdn.rawgit.com/masarifid/file/gh-pages/allin.js"></script>
Maka cukup tambahkan async="async" sehingga kodenya menjadi seperti ini
<script type="text/javascript" async="async" src="https://cdn.rawgit.com/masarifid/file/gh-pages/allin.js"></script>
Bisa anda terapkan untuk semua javascript eksternal kecuali jquery (ada caranya nanti berbeda), selain itu letakan juga kode javascript eksternal dibagian bawah sendiri atau diatas kode </body>
Untuk Javascript Internal, blog anda pasti memiliki banyak javascript eksternal walaupun tidak begitu memberatkan tetapi agar loading blog lebih ringan saya sarankan untuk mengabungnya menjadi satu saja. Contoh:
JS 1:
<script type='text/javascript'>
//<![CDATA[
$("img").each(function(){$(this).attr("data-src",$(this).attr("src"));$(this).attr("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=")});
function init(){var e=document.getElementsByTagName("img");for(var t=0;t<e.length;t++){if(e[t].getAttribute("data-src")){e[t].setAttribute("src",e[t].getAttribute("data-src"))}}}window.onload=init;
//]]>
</script>
JS 2:
<script>
//<![CDATA[
function resetScroller(e){var o=window.pageYOffset,n=document.getElementById(e).offsetTop,r=setTimeout("resetScroller('"+e+"')",speed);o>n?(scrollY=o-distance,window.scroll(0,scrollY)):clearTimeout(r)}var appended=!1,bookmark2=document.createElement("div");bookmark2.id="backtotop",bookmark2.innerHTML='<span class="ani-dur ani-name" onclick="return false;" onmousedown="resetScroller(&quot;header-wrapper&quot;);"><i class="fa fa-chevron-circle-up fa-3x"></i></span>',onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>600?appended||(document.body.appendChild(bookmark2),appended=!0):appended&&(document.body.removeChild(bookmark2),appended=!1)};var scrollY=0,distance=40,speed=24;
//]]>
</script>
Maka bisa anda gabung menjadi satu, mejadi seperti ini:
<script>
//<![CDATA[
$("img").each(function(){$(this).attr("data-src",$(this).attr("src"));$(this).attr("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=")});
function init(){var e=document.getElementsByTagName("img");for(var t=0;t<e.length;t++){if(e[t].getAttribute("data-src")){e[t].setAttribute("src",e[t].getAttribute("data-src"))}}}window.onload=init;
function resetScroller(e){var o=window.pageYOffset,n=document.getElementById(e).offsetTop,r=setTimeout("resetScroller('"+e+"')",speed);o>n?(scrollY=o-distance,window.scroll(0,scrollY)):clearTimeout(r)}var appended=!1,bookmark2=document.createElement("div");bookmark2.id="backtotop",bookmark2.innerHTML='<span class="ani-dur ani-name" onclick="return false;" onmousedown="resetScroller(&quot;header-wrapper&quot;);"><i class="fa fa-chevron-circle-up fa-3x"></i></span>',onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>600?appended||(document.body.appendChild(bookmark2),appended=!0):appended&&(document.body.removeChild(bookmark2),appended=!1)};var scrollY=0,distance=40,speed=24;
//]]>
</script>
Setiap kelompok js ada pemisah ; agar tidak tercampur fungsinya. Sama seperti javascript eksternal saya sarankan diletakan diatas kode </body>.
Mengatasi Render Blocking Jquery Library
Javascript dari jquery library ini teryata menyumbang masalah render blocking js pada PageSpeed Insights, hal ini tentunya membuat blog anda berat. Akan tetapi cara penangannya berbeda dengan javascript eksternal yang sudah saya terangkan diatas tinggal tambahkan async="async" masalah selesai, bila diterapkan di javascript jquery library maka jquery blog anda tidak akan berfungsi. Berikut cara mengatasi render blocking dari javascript jquery library:
Silakan hapus kode jquery blog anda, dari (tergantung versi jquery blog anda masing-masing):
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'/>
Ganti menjadi seperti ini:
<script type='text/javascript'>
//<![CDATA[
if(typeof(jQuery)=="undefined"){document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"><\/script>')}
//]]>
</script>
Simpan template.
Menganti Gambar Pada CSS dengan Base64
Dalam css blog anda pasti ada yang menggunakan url gambar baik digunakan untuk background, ataupun icon. Dengan menggunakan url tersebut menambah permintaan http blog anda sehingga waktu loadnya menjadi agak lama. Solusinya adalah dengan mengubah link gambar pada css dengan base64, misal:
#nav {
    font: bold normal 11px Arial, sans-serif;
    background: #333 url(http://2.bp.blogspot.com/-lqUfhYdJt_U/U7gGFr_ojMI/AAAAAAAAAW0/yz6DrC0_A80/s1600/hiasan.png) no-repeat bottom center;
    margin: 0 auto;
    padding: 0 0;
    text-transform: uppercase;
    height: 36px;
}
Maka saya ganti menjadi base64 menjadi berikut:
#nav {
    font: bold normal 11px Arial, sans-serif;
    background: #333 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7EAAAACCAYAAACOlVsfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABN0RVh0U29mdHdhcmUAUGhvdG9TY2FwZYB1kb8AAAGDSURBVFhH7di9S0JhFMfx50JrtAmFexBBFGq6hk1B/4BJ0OjQJjUUWfSKonJJIhDKxJauiEtLEGINgUpDWZQVqeUShuXLo3LvPT3+Ec+9DWf4cfbv9jlEkEqA06BBvAwk8QkkXpQHwvnqrCv5sWMLtA7HvXBg9sO+BcerQcgSgJBVBNHsk0MjK9/HxoXKicHRig3OwemQE2I4bg2irG2EdZaM85AddkFtwg1d8zK0TEvQxHFrQFlbylrXJ9yNun3zpbt49NRdkxqwkQBYlwA8ZzhuDRKges6h7Yl22tuOr3awn410VJEAiAKOZ4OgAHJAUGlYkOmFoCg51vuWrXezON4NaE5Qy/dEfnwgSuGZwFsBx7NB8ZXAO2t8l++jyYyh6k+NNrdSVmU3bYO99CSOYwPftQm8qTF19XLmx3kVKU3fVGpTGarYcxTs2TrbL06DBgQBqwFge48CRKxuUEfE6gd1RKw+WEfE6ol0RKxuWEfE6op1RKy2aEfE6gd1ROz/QPof/xJz8oYz+iAAAAAASUVORK5CYII=') no-repeat bottom center;
    margin: 0 auto;
    padding: 0 0;
    text-transform: uppercase;
    height: 36px;
}
Bisa anda bandingkan loadinya cepat mana ? http (biasa) dengan

 base64:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7EAAAACCAYAAACOlVsfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABN0RVh0U29mdHdhcmUAUGhvdG9TY2FwZYB1kb8AAAGDSURBVFhH7di9S0JhFMfx50JrtAmFexBBFGq6hk1B/4BJ0OjQJjUUWfSKonJJIhDKxJauiEtLEGINgUpDWZQVqeUShuXLo3LvPT3+Ec+9DWf4cfbv9jlEkEqA06BBvAwk8QkkXpQHwvnqrCv5sWMLtA7HvXBg9sO+BcerQcgSgJBVBNHsk0MjK9/HxoXKicHRig3OwemQE2I4bg2irG2EdZaM85AddkFtwg1d8zK0TEvQxHFrQFlbylrXJ9yNun3zpbt49NRdkxqwkQBYlwA8ZzhuDRKges6h7Yl22tuOr3awn410VJEAiAKOZ4OgAHJAUGlYkOmFoCg51vuWrXezON4NaE5Qy/dEfnwgSuGZwFsBx7NB8ZXAO2t8l++jyYyh6k+NNrdSVmU3bYO99CSOYwPftQm8qTF19XLmx3kVKU3fVGpTGarYcxTs2TrbL06DBgQBqwFge48CRKxuUEfE6gd1RKw+WEfE6ol0RKxuWEfE6op1RKy2aEfE6gd1ROz/QPof/xJz8oYz+iAAAAAASUVORK5CYII=
 copy di address bar lalu tekan enter, cepat mana loadingnya.
Untuk mengubah gambar menjadi base64 caranya cukup mudah, silakan buka http://dopiaza.org/tools/datauri/index.php lalu pilih yang Retrieve file from a URL disini anda tinggal mengopy saja url gambarnya maka otomatis menjadi bentuk base64, copy deh base64nya ganti url gambar yang ada pada css dengan gambar base64. Ada penambahan ' ' jika menggunakan base64 bisa dilihat pada kode diatas (ini-link-gambar.jpg) menjadi ('data:image/png;base64......').
Mendefer Loading Gambar Blog
Gambar-gambar diblog baik yang ada diwidget maupun postingan merupakan salah satu faktor yang menyebabkan loading blog anda berat, berikut ada trik tersendiri untuk mengakalinya agar blog anda tetap ringan meskipun menggunakan banyak gambar.
Silakan simpan kode dibawah ini diatas kode </body>
<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>
Fungsi kode diatas adalah menambahkan gambar tipuan yang hanya berukuran beberapa byte pada gambar yang ada diblog anda. Gambar tipuan tersebut diletakan di src="" dan gambar asli ditaruh pada data-src="" dimana browser nantinya mengira gambar aslinya adalah gambar tipuan, dan gambar asli baru diload setelah semua diload. Jadi loading blog jauh lebih ringan.
Mengompress Gambar Yang Ada di Blog Anda
Ini penting, saya menyarankan anda mengompress setiap gambar yang ada diblog anda baik diwidget yang berupa baner iklan, ataupun gambar yang ada dipostingan. Dengan mengompress gambar kita bisa mendapatkan gambar dengan kualitas gambar yang sama tetapi dengan ukuran yang lebih kecil. Tentunya hal ini dapat meringankan loading blog anda.
Kalau saya sendiri biasa menggunakan https://kraken.io/web-interface ada dua mode disana yaitu lossy (kompresi tingi dengan sedikit menurunkan kualitas gambar) dan lossless (kompresi ringan tanpa menurunkan kualitas gambar) yang tinggi kompresinya tentunya ukuran gambar akan menjadi lebih kecil dan lebih ringan ketika diload.
Mengompress Template Blog Yang Anda Gunakan
Dalam sebuah template pasti ada baris kosong hal ini membuat proses rendering atau pembacaan blog menjadi lebih lama, anda bisa mengompress template blog anda untuk merapatkan barisan.
Berikut caranya:
- Silakan buka template blog anda di editor template blog, copy semua kodenya.
- Buka https://htmlcompressor.com/compressor/
- Silakan pastekan kode template anda pada tab source, lalu klik tombol berwarna hijau compress. Dan bila ada munculan untuk mengubah code type menjadi blogger/xml silakan diklik change saja.
- Maka akan keluar kode yang sudah dicompress, silakan dicopy, dan pastekan di editor template blogger anda. Simpan template.

Itu dia cara yang bisa anda coba untuk mempercepat loading blog anda, selamat mencoba dan jangan lupa untuk mentestnya lagi setelah mencoba tutorial ini di PageSpeed Insights. Semoga bermanfaat.

Berikan Komentar:

Read more!