Menggabungkan Semua Javascript Bisa Mempercepat Loading Blog Dengan Defer

Ditulis oleh: Ifrod Maksum
Ditulis pada: 8/25/2017

Termasuk salah satu untuk mempercepat loading blog adalah dengan menggabungkan semua javascript jadi satu, seperti itulah saran mas +Adhy Suryadi melalui akun facebooknya. Karena penasaran, kemudian saya langsung mencobanya dan berhasil.

Jadi semua javascript termasuk jquery, kita satukan kemudian hosting lalu untuk di html kita simpan dengan di defer. Sehingga dengan demikian browser hanya meload satu javascript saja tak perlu banyak-banyak.

Nah supaya lebih detail, saya langsung praktek disini. Simak ya sambil ngopi juga boleh.

1. Untuk melakukan hal ini sebaiknya jangan langsung di blog utama, tapi gunakan blog percobaan.

2. Kemudian silahkan copy paste javascript dan satukan di notepad. Jika ada yang berupa link seperti jquery ini:

<script type='text/javascript'>

//<![CDATA[

if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}

//]]>

</script>

atau seperti ini;

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

Silahkan akses url tersebut lalu copas isinya. Jika digabung dengan jquery, sebaiknya letakkan paling atas. Dan beri nama dengan estensi.js contoh jsanda.js, lalu upload web hosting yang anda suka. disini saya hosting di github. kemudian copy dan simpan URL hosting javascript tersebut. Jika belum tahu bagaimana cara menyimpan javascript di github, silahkan simak postingan mas adhy berikut ini:

Cara mudah hosting file js, css dan html di github

3. terakhir simpan kode untuk men-defer ini diatas </body>

<script type='text/javascript'>

//<![CDATA[

function downloadJSAtOnload(){var d=document.createElement("script");d.src="URL-HOSTING-JS", document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
document.querySelectorAll(".separator")[0].style.display= "none";

//]]>

</script>

ganti URL-HOSTING-JS yang didapat dari github tadi.

Oke itu saja tips dari saya semoga bermanfaat dan selamat mencoba ...