Cara Membuat Blog Fast Loaded Di Blogger

Cara Membuat Blog Fast Loaded - Halo, kali ini saya akan menjelaskan bagaimana cara membuat blog loadingnya cepat, penyebab loading blog ada beberapa faktor yaitu bisa jadi pengaruh dari gambar terlalu banyak atau besar, host gambar dari pihak ketiga, adanya host Javascript atau CSS dari pihak ketiga, terlalu banyak CSS dan javascript juga bisa berpengaruh. Loading sebuah blog sangat berpengaruh dengan visitor, kenapa? mungkin dikarenakan visitor tidak merasa nyaman dengan yang namanya menunggu apalagi blog yang loadingnya butuh beberapa detik/menit pasti merasa jengkel, Jadi disini saya akan membagikan tips agar blog sobat bisa jadi lebih enteng alias fast load.

Silahkan BACKUP Template terlebih dahulu agar tidak terjadi hal yang tidak diinginkan

• Ok kita mulai saya pertama-tama Buka Blogger > Template > Edit HTML, Cari Script seperti dibawah ini (yang mirip atau beda versi)

<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

• Jika sudah Silahkan edit seperti dibawah ini, gunanya agar tidak di index yang nantinya berpengaruh dengan loading setiap kali berpindah page

<!--  [ CSS ] 
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> -->

• Jika langkah diatas selesai, tambahkan javascript dibawah ini dan letakkan di atas </head>, Ubah LINK HOST (Step Sebelumnya)

<script type='text/javascript'>
//<![CDATA[
//CSS 
(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("LINK HOST.CSS");
loadCSS("LINK HOST.CSS");
loadCSS("LINK HOST.CSS");
//Javascript 
function loadScript(src) {var element = document.createElement("script");element.src = src;document.body.appendChild(element);}function downloadJSAtOnload() {
loadScript("LINK HOST.js");
loadScript("LINK HOST.js"); 
loadScript("LINK HOST.js"); 
}
if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;
</script>

Tips Berikutnya Yaitu Minifer CSS

Jika Kalian menyimpan CSS diatas ]]></b:skin> silahkan kalian Compress menggunakan CSS MINIFER Klik Disini, Jika sudah pindahkan Diatas </style>

Tips Berikutnya Seleksi CSS Dan Javascript

Menggunakan <b:if> gunanya untuk menampilkan pada page tertentu,
Pertama Silahkan kalian Cari CSS /* Komentar */  Pindahkan ke notepad
Lalu Tambahkan Tag HTML seperti dibawah ini, Lalu pindahkan Di atas </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
<!-- ISI CSS dibawah ini -->

</style>
</b:if>

Kedua, Javascript, kalian harus tau beberapa javascript ada yang hanya dibutuhkan di Homepage yaitu bagian thumbnail atau yang lainnya dan ada yang dibutuhkan di dalam page atau post saja, Jadi Silahkan kalian pisahkan. Jika Sudah Gunakan Tag HTML dibawah ini agar sesuai dengan page tempat javascript tersebut di butuhkan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Hanya Untuk Di Dalam Postingan Saja -->
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<!-- Hanyak Akan Tampil di HOMEPAGE dan Static Page -->

</b:if>
</b:if>

Ok dari sekian banyaknya Tips diatas pasti adanya kesalahan atau error yang mungkin terjadi, jika hal tersebut menerpa sobat silahkan kalian restore dari ulang lalu mulai lagi dari awal dengan HATI-HATI & TELITI.