MULTI DEFER JAVASCRIPT UNTUK OPTIMASI LOADING BLOG

Multi Defer Javascript Untuk Optimasi Loading Blog
Multi Defer Javascript Untuk Optimasi Loading Blog


Bagi anda yang mempunyai blog dan merasa loadingnya lambat karena banyak penggunaanJavascript di template, sebaiknya mencoba menerapkan Cara Optimasi Loading Blog dengan menggunakan Multi Defer Javascript ini agar pagespeed blog anda semakin lebih cepat. 

Fungsi Defer Javascript

Untuk fungsi atau cara kerja defer javascript itu sendiri adalah untuk menunda Http Request atau menunda pemanggilan link yang belum diperlukan. sehingga loading blog semakin lebih cepat dan cara ini sudah jadi bagian salah satuoptimasi Seo sebagai prioritas dalam menentukan posisi halaman di hasil pencarian selain konten yang berkualitas.

Biasanya Defer Javascript diterapkan pada script yang dianggap berat atau jarang dipergunakan seperti salah satu contoh Javascript 3 System Komentar Blogger, Disqus, Facebook yang sekarang saya terapkan di blog zaputra.com ini atau yang lagi trend dipasang di template-template premium saat ini.

Cara Memasang Defer Javascript

Gabungkan javascript anda jadi satu lalu upload di self hosting  hingga file javascript anda berbentuk.Js.
bagi anda yang belum tahu cara upload javascript di self hosting bisa mengunjungi artikel dibawah ini:

Cara Simpan atau Upload File Javascript di Github Terbaru
Cara Simpan atau Upload File Javascript di Google Drive Terbaru


Kalo anda biasa berkunjung di blognya mas adhy atau Kompi Ajaib pasti anda menjumpai Script Defer ini pada tutorial tutorialnya.

Default Atau Single Defer Javascript

<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "HOSTING SCRIPT.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script> 


Kita juga bisa membuat Multi Defer Loading Javascript Blog dengan menggabungkan beberapa file ekternal script secara langsung, sebagai contohnya seperti dibawah ini :

Multi Defer Javascript 1

<script type='text/javascript'>
(function() {
function getScript(url, success) {
var script = document.createElement('script');
script.src = url;
var head = document.getElementsByTagName('head')[0],
done = false;
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
if (success && getScript.call(success) == '[object Function]') {
success();
}
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript('Kode script hosting', function() {
getScript('Kode script hosting');
getScript('Kode script hosting');
});
})();
</script>

Multi Defer Javascript 2

<script type="text/javascript">
function loadScript(src) {
var element = document.createElement("script");
element.src = src;
document.body.appendChild(element);
}
// Add a script element as a child of the body
function downloadJSAtOnload() {
loadScript("KODE SCRIPT 1.js");
loadScript("KODE SCRIPT 2.js");
loadScript("KODE SCRIPT 3.js");
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Multi Defer Javascript 3

<script type="text/javascript">
function downloadJSAtOnload() {
(function(scripts) {
var i = 0,
l = scripts.length;
for (; i<l; ++i ){
var element = document.createElement("script");
element.src = scripts[i];
document.body.appendChild(element);
}
})(['KODE SCRIPT 1.js','KODE SCRIPT 2.js']);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>


SHARE THIS

0 Response to " "

Post a Comment