Cara Mempercepat Loading Blog Hingga 100
Dengan kecepatan akses loading situs yang cepat, akan lebih bersabahat dengan pengunjung dan membuat pengunjung betah berlama-lama diblog anda, dan pengunjung tidak akan langsung menutup tab browser blog anda karena loadingnya yang gak selesai-selesai di muat, apabila terjadi seo blog anda akan menurun dan juga dapat kehilangan kepercayaan dari pengunjung atau bahkan robot crawl lalu semua yang di ada di dalam situs/blog anda akan jadi sia-sia saja.
Selain itu dari segi kenyamanan pengunjung, blog yang memiliki kecepatan loading juga berpengaruh terhadap proses perayapan/pengindexan blog oleh search engine/robot crawl seperti google. Hal ini tentu akan juga berpengaruh terhadap peringkat blog anda di serp, maka dari KECEPATAN satu dari 200+ faktor rangking google.
Kesimpulanya ...!!! saya akan mengembalikan pertanyaan ini pada anda.
"Apa kamu senang di suruh menunggu"..??? jawaban nya ada pada diri anda.
 |
| Sumber: www.google.co.id/search?q=web+blog+loading |
 |
| Inilah bukti hasilnya |
Lalu silakan anda dibuka webnya cek kecepatan di atas dan lakukan analisis terhadap blog anda, dengan menerapkan langkah ini untuk membedakan loading blog anda sebelum dan sesudah melakukan tutotorial mempercepat loading blog dari Blogespedia.
# Masuk ke editor HTML di blogger.
1. Inilah cara Menyembunyikan CSS Reset Bawaan BloggerCSS yang diberikan blogger pada blog anda, kurang lebih kodenya seperti ini. (jika dilihat dari page source dengan ctrl + u pada laman blog anda).
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/2761160889-widget_css_bundle.css' />Kode link css ini tidak terlalu penting, yang dapat membuat loading blog anda berat serta juga masalah error pada validasi HTML5, Untuk mengatasi masalah yang satu ini anda tidak bisa langsung begitu saja menghapus kode diatas dari editor Html blogger, apabila anda caripun tidak akan ketemu, Berikut cara untuk menyembunyikan CSS reset blogger.
<link type="text/css" rel="stylesheet" href="//www.blogger.com/dyn-css/authorization.css?targetBlogID=5187131679737497634&zx=3763bd4d-298d-41d6-9a30-9b4bd68ba958"/>
Cari kode dibawah ini:
<b:skin><![CDATA[Silakan ganti dengan kode dibawah ini:
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]></b:skin> <style type='text/css'> /*<![CDATA[*/Cari juga kode dibawah ini:
]]></b:skin>Silakan ganti dengan kode dibawah ini
/*]]>*/ </style>Tambahan, cari kode dibawah ini:
<head>Silakan ganti dengan kode dibawah ini:
<head>Cari juga kode dibawah ini:
</head>Silakan ganti dengan kode dibawah ini:
</head><!--<head/>-->Simpan template.
2. Menyembunyikan Javascript Widget Blogger dan Google PlusSama CSS bawaan blogger kurang lebih nya seperti ini:
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/916259663-widgets.js"></script>Javascript widget blogger dan google plus ini tidaka akan bisa dicari dieditor Html blogger, Tapi kalau anda view source (ctrl+u) maka akan terlihat kodenya tepat diatas kode:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</body>kode js(Javascript) external ini merupakan masalah dalam loading blog anda. karena js ini sangat berat di muat dan tentunya menyebabkan render blocking javascript pada PageSpeed Insights.
Ini cara mengatasinya.
Cari kode berikut:
</body>Silakan ganti dengan kode dibawah ini
<!--</body>--></body>Simpan template.
3. Asingkron Loading CSS Eksternal Terkadang di dalam sebuah template blog anda terdapat sebuah css eksternal yang harus dipanggil seperti misalnya jenis css: font yang 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. Serta disisi lain, CSS font ini merupakan CSS eksternal yang harus dipanggil dan tentunya menyebabkan masalah render blocking css pada PageSpeed Insight, berikut solusi cara mengatasinya yaitu dengan menggunakan script yang bisa menload css eksternal blog anda seperti google font, dan font awesome secara asingkron sehingga tidak membebani loading blog.
Silakan simpan kode berikut diatas kode </head> :
<script>Anda bisa menganti link css eksternalnya diatas yang saya warnai dengan css di blog anda, apabila terdapat lebih dari satu css yang mau diload secara asingkron tinggal tambahkan lagi kode ini loadCSS (" <!--kode css external--> ");
//<![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>
maka menjadi seperti ini:
<script>4. Asingkron Loading Javascript Eksternal dan Mengabung Javascript EksternalJavascript 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.
//<![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("//fonts.googleapis.com/css?family=Open+Sans+Condensed:700");
loadCSS("//www.blogger.com/static/v1/widgets/1691512649-css_bundle_v2.css");
//]]>
</script>
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 tidak untuk "jquery" (ada caranya nanti berbeda), selain itu letakan juga kode javascript eksternal dibagian bawah sendiri atau diatas kode </body>
Dan cara untuk Javascript Internal, karena blog anda pastinya memiliki banyak sekali javascript internal walaupun tidak begitu memberatkan, Tetapi agar loading blog dapat lebih ringan saya sarankan untuk mengabungnya menjadi satu saja. Contoh:
JS 1:
<script type='text/javascript'>JS 2:
//<![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>Maka bisa anda gabung menjadi satu, mejadi seperti ini:
//<![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>Setiap kelompok js internal ada pemisah dengan menggunakan ; agar tidak tercampur fungsinya. Saya sarankan diletakan diatas kode </body>
//<![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>
5. Cara Mengatasi Render Blocking Jquery Library.
Javascript dari jquery library ini teryata juga menjadi masalah render blocking js pada PageSpeed Insights, hal ini tentunya akan membuat blog anda berat di muat.
Berikut cara mengatasi javascript jquery library:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>Maka cukup tambahkan async="true" sehingga kodenya menjadi seperti ini:
<script type="text/javascript" async="true" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>6. Menganti Gambar Pada CSS dengan Base64.
Dalam kode css pada Html template anda pasti ada yang menggunakan url gambar, baik digunakan untuk background maupun icon.
Dengan menggunakan url tersebut akan menambah permintaan http blog anda sehingga waktu loadnya menjadi agak lama.
Ini solusinya, dengan mengubah link gambar pada css dengan base64, misal:
#nav {Maka saya ganti menjadi base64 menjadi berikut:
font: bold normal 11px Arial, sans-serif;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuJzJB14A8B_8rA7VWp1wD0btTDbhRcH8ZZyZMjQZDez2mE4ESn6LGmTTpOu7W1WJu88fr56oT-ke8TGfde5N1LdeWHK_5jGQE1mFmA98iaYIGVnw_mc-rvrJMxFREc6X_3xMBYCmY8v4/s1600/hiasan.png) no-repeat bottom center;
margin: 0 auto;
padding: 0 0;
text-transform: uppercase;
height: 36px;}
#nav {Apabila, jika anda tidak mau repot" mengubahnya, saya sarankan hanya menghapus http: menjadi seperti yang diwarnai ini.
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;}
#nav {Anda bisa bandingkan loadnya cepat mana..?? http atau base64:
font: bold normal 11px Arial, sans-serif;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuJzJB14A8B_8rA7VWp1wD0btTDbhRcH8ZZyZMjQZDez2mE4ESn6LGmTTpOu7W1WJu88fr56oT-ke8TGfde5N1LdeWHK_5jGQE1mFmA98iaYIGVnw_mc-rvrJMxFREc6X_3xMBYCmY8v4/s1600/hiasan.png) no-repeat bottom center;
margin: 0 auto;
padding: 0 0;
text-transform: uppercase;
height: 36px;}
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7EAAAACCAYAAACOlVsfAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABN0RVh0U29mdHdhcmUAUGhvdG9TY2FwZYB1kb8AAAGDSURBVFhH7di9S0JhFMfx50JrtAmFexBBFGq6hk1B/4BJ0OjQJjUUWfSKonJJIhDKxJauiEtLEGINgUpDWZQVqeUShuXLo3LvPT3+Ec+9DWf4cfbv9jlEkEqA06BBvAwk8QkkXpQHwvnqrCv5sWMLtA7HvXBg9sO+BcerQcgSgJBVBNHsk0MjK9/HxoXKicHRig3OwemQE2I4bg2irG2EdZaM85AddkFtwg1d8zK0TEvQxHFrQFlbylrXJ9yNun3zpbt49NRdkxqwkQBYlwA8ZzhuDRKges6h7Yl22tuOr3awn410VJEAiAKOZ4OgAHJAUGlYkOmFoCg51vuWrXezON4NaE5Qy/dEfnwgSuGZwFsBx7NB8ZXAO2t8l++jyYyh6k+NNrdSVmU3bYO99CSOYwPftQm8qTF19XLmx3kVKU3fVGpTGarYcxTs2TrbL06DBgQBqwFge48CRKxuUEfE6gd1RKw+WEfE6ol0RKxuWEfE6op1RKy2aEfE6gd1ROz/QPof/xJz8oYz+iAAAAAASUVORK5CYII=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......').
7. Agar loading blog bisa lebih maksimal, Gambar-gambar diblog baik yang ada diwidget maupun postingan merupakan faktor dari penyebab loading blog anda berat, berikut triknya agar blog anda tetap ringan walaupun menggunakan banyak gambar.
Silakan simpan kode dibawah ini diatas kode </body>
<script type='text/javascript'>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.
//<![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>
8. 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 http://kraken.io/web-interface ada dua mode disana yaitu lossy (kompresi tinggi 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.
9. Mengompress Template Blog Yang Anda Gunakan
Dalam sebuah template pasti ada baris kosong hal ini yang membuat proses 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 http://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.
Kesimpulan. Demikianlah beberapa tutorial cara untuk mempercepat loading blog anda, selamat mencoba dan jangan lupa untuk nge-cek lagi setelah mencoba tutorial ini di PageSpeed Insights, Terima Kasih dan Semoga bermanfaat, Apabila masih bingung tanyakan di kolom komentar.
0 Response to "Cara Mempercepat Loading Blog Hingga 100"