Cara mempercepat loading blog sampai skor 100 - KECEPATAN akses memuat blog termasuk salah satu dari teknik seo yang tidak andan lupakan.
Ini adalah sebuah cara yang sudah saya terapkan di blog, dan hasil nya oun sangatlah memuas kan berikut ss nya : bila ingin di tanyakan kesini aja lebih fast respon : cara mempercepat loading blog
Berikut ini adalah solusi bagi anda yang mencari cara mempercepat loading blog anda (khususnya blogger.com):
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 Blog Espedia.
# 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).
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:
Silakan ganti dengan kode dibawah ini:
Cari juga kode dibawah ini:
Silakan ganti dengan kode dibawah ini
Tambahan, cari kode dibawah ini:
Silakan ganti dengan kode dibawah ini:
Cari juga kode dibawah ini:
Silakan ganti dengan kode dibawah ini:
Simpan template.
2. Menyembunyikan Javascript Widget Blogger dan Google PlusSama CSS bawaan blogger kurang lebih nya seperti ini:
Javascript widget blogger dan google plus ini tidak 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:
Silakan ganti dengan kode dibawah ini
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> :
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:
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:
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:
JS 2:
Maka bisa anda gabung menjadi satu, mejadi seperti ini:
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:
Maka cukup tambahkan async="true" sehingga kodenya menjadi seperti ini:
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:
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>
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 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 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.
Semoga artikel ini bermanfaat, dan berhasil kamu terapkan di blogmu juga, kurang paham ayo diskusikan.
Sumber: https://blogespedia.blogspot.com
Ini adalah sebuah cara yang sudah saya terapkan di blog, dan hasil nya oun sangatlah memuas kan berikut ss nya : bila ingin di tanyakan kesini aja lebih fast respon : cara mempercepat loading blog
Berikut ini adalah solusi bagi anda yang mencari cara mempercepat loading blog anda (khususnya blogger.com):
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 Blog Espedia.
# 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).
Code:
<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 dibawah ini:
Code:
<b:skin><![CDATA[
Code:
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]></b:skin> <style type='text/css'> /*<![CDATA[*/
Code:
]]></b:skin>
Code:
/*]]>*/ </style>
Code:
<head>
Code:
<head>
Code:
</head>
Code:
</head><!--<head/>-->2. Menyembunyikan Javascript Widget Blogger dan Google PlusSama CSS bawaan blogger kurang lebih nya seperti ini:
Code:
<script type="text/javascript" src="//www,blogger.com/static/v1/widgets/916259663-widgets.js"></script>
<script type="text/javascript" src="//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:
Code:
</body>
Code:
<!--</body>--></body>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> :
Code:
<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>maka menjadi seperti ini:
Code:
<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>Untuk Javascript Eksternal, misal kodenya:
Code:
<script type="text/javascript" src="//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="//cdn,rawgit.com/masarifid/file/gh-pages/allin.js"></script>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:
Code:
<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>
Code:
<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>
Code:
<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>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:
Code:
<script type="text/javascript" src="/ajax.googleapis.com/ajax/libs/jquery/3.0,0/jquery.min.js"></script>
Code:
<script type="text/javascript" async="true" src="//ajax.googleapis.com/ajax/libs/jquery/3.0,0/jquery.min.js"></script>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:
Code:
#nav {
font: bold normal 11px Arial, sans-serif;
background: #333 url(hxxp://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;}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(//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;}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>
Code:
<script type='text/javascript'>
//<![CDATA[
for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl.getAttribute("src")&&(imgEl.setAttribute("data-src",imgEl.getAttribute("src")),imgEl.removeAttribute("src"),imgEl.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.getAttribute("data-src")){imgDefer.setAttribute("src",imgDefer.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 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 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.
Semoga artikel ini bermanfaat, dan berhasil kamu terapkan di blogmu juga, kurang paham ayo diskusikan.
Sumber: https://blogespedia.blogspot.com
Last edited by a moderator:
