Cara Mempercepat/Membuat Loading Blog Super Cepat Ampuh
Cara Mempercepat/Membuat Loading Blog Super Cepat Ampuh - 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).
Cari kode berikut:
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
Cari kode berikut:
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
maka menjadi seperti ini.
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:
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:
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):
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:
Untuk mengubah gambar menjadi base64 caranya cukup mudah, silakan bukahttp://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>
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.
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"/>Cari kode berikut:
<b:skin><![CDATA[ <style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
/*<![CDATA[*/
]]></b:skin>/*]]>*/
</style><head><head></head></head><!--<head/>-->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>Cari kode berikut:
</body><!--</body>--></body>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>
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.cssloadCSS("//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>
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><script type="text/javascript" async="async" src="https://cdn.rawgit.com/masarifid/file/gh-pages/allin.js"></script></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>
<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("header-wrapper");"><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><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("header-wrapper");"><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></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'/><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>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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmQIJP9WIHyVR4pco_efsMlFkY4YlM9iVT74Gx6ZEY632WlxR7-JZV6plFJVNaeWbPXnkBCCO8YVu2irvTNS98Xh9AkQi_1oS1fxIYjgcGYfiTj6E_ZHJ3v3aRIa6B74YeauG_W0q97kM/s1600/hiasan.png) no-repeat bottom center;
margin: 0 auto;
padding: 0 0;
text-transform: uppercase;
height: 36px;
}
#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;
}
base64:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7EAAAACCAYAAACOlVsfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABN0RVh0U29mdHdhcmUAUGhvdG9TY2FwZYB1kb8AAAGDSURBVFhH7di9S0JhFMfx50JrtAmFexBBFGq6hk1B/4BJ0OjQJjUUWfSKonJJIhDKxJauiEtLEGINgUpDWZQVqeUShuXLo3LvPT3+Ec+9DWf4cfbv9jlEkEqA06BBvAwk8QkkXpQHwvnqrCv5sWMLtA7HvXBg9sO+BcerQcgSgJBVBNHsk0MjK9/HxoXKicHRig3OwemQE2I4bg2irG2EdZaM85AddkFtwg1d8zK0TEvQxHFrQFlbylrXJ9yNun3zpbt49NRdkxqwkQBYlwA8ZzhuDRKges6h7Yl22tuOr3awn410VJEAiAKOZ4OgAHJAUGlYkOmFoCg51vuWrXezON4NaE5Qy/dEfnwgSuGZwFsBx7NB8ZXAO2t8l++jyYyh6k+NNrdSVmU3bYO99CSOYwPftQm8qTF19XLmx3kVKU3fVGpTGarYcxTs2TrbL06DBgQBqwFge48CRKxuUEfE6gd1RKw+WEfE6ol0RKxuWEfE6op1RKy2aEfE6gd1ROz/QPof/xJz8oYz+iAAAAAASUVORK5CYII=Untuk mengubah gambar menjadi base64 caranya cukup mudah, silakan bukahttp://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>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.
2 komentar:
Silahkan
Wah mantap ni tutorialnya 100% Full
Posting Komentar