Cara Mempercepat Loading Blog Hingga 100


Teknik jitu Cara Mempercepat Loading Blog Sampai Skor 100 - cara membuat loading blog cepat dan ringan saat di muat, merupakan salah satu hal penting yang perlu anda perhatikan dalam mengembangkan sebuah blog.Tapi sangat banyak para blogger yang tidak peduli akan kecepatan akses blog mereka, dan hal kecil ini yang membuat jengkel pengunjung blog anda bahkan bisa saja tak mau kembali ke blog anda lagi bahkan bisa selamanya, karena itulah kecepatan muat pada situs juga termasuk salah satu teknik seo ...!!!
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.
Mempercepat Loading Blog
Sumber: www.google.co.id/search?q=web+blog+loading
Berikut ini adalah solusi bagi anda yang mencari cara mempercepat loading blog anda (khususnya blogger.com):
Cara Mempercepat Loading Blog
Inilah bukti hasilnya
Hal pertama yang harus anda lakukan adalah cek kecepatan blog anda di test dengan tool PageSpeed Insight salah satu tools dari Google Webmasters yang berguna untuk menilai kecepatan loading blog dan kamu akan di berikan saran untuk mempermudah masalah anda atau tool lainya yaitu gtmetrix.com, jangan kaget apabila skor di tiap kedua tool tersebut berbeda.

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' />
<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 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.
Cari kode dibawah ini:
<b:skin><![CDATA[
Silakan 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 dibawah ini:
]]></b:skin>
Silakan ganti dengan kode dibawah ini
/*]]>*/ </style>
Tambahan, cari kode dibawah ini:
<head>
Silakan ganti dengan kode dibawah ini:
&lt;head&gt;
Cari juga kode dibawah ini:
</head>
Silakan ganti dengan kode dibawah ini:
&lt;/head&gt;&lt;!--<head/>--&gt;
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>
<script type="text/javascript" src="https://apis.google.com/js/plusone.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:
</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
&lt;!--</body>--&gt;&lt;/body&gt;
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>
//<![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 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--> ");

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("//fonts.googleapis.com/css?family=Open+Sans+Condensed:700");
loadCSS("//www.blogger.com/static/v1/widgets/1691512649-css_bundle_v2.css");
//]]>
</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.
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'>
//<![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 internal ada pemisah dengan menggunakan ; agar tidak tercampur fungsinya. Saya sarankan diletakan diatas kode </body>

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 {
    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;}
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;}
Apabila, jika anda tidak mau repot" mengubahnya, saya sarankan hanya menghapus http: menjadi seperti  yang diwarnai ini.
#nav {
    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;}
Anda bisa bandingkan loadnya cepat mana..?? http atau base64:
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'>
//<![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.

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"