Script Defer Lebih Dari Satu JS (Multiple)

Table of Contents

Salah satu hal yang wajib kita optimasi untuk template blog yang di modifikasi sendiri adalah mengoptimalkan load JS Eksternal dengan cara di Defer. Saya mendapati cara dan tips ini pada blog kang adhy yaitu KompiAjaib, artikel ini saya buat untuk berjaga bila suatu hari blog kang adhy tidak dapat di akses lagi

Karena setahu saya blog kang adhy sudah tidak lagi di miliki oleh beliau dan sudah berpindah tangan ke orang lain. Balik ke artikel kali ini, Defer itu sendiri secara sederhana adalah proses pemuatan JS dilakukan di latar belakang browser ketika halaman diakses dan dieksekusi setelah seluruh halaman berhasil dimuat. Dengan begitu, pemuatan JS tidak mengganggu pemuatan halaman. Sehingga saat ini defer sangat membantu dalam membuat loading halaman menjadi lebih ringan.

1. Kanga adhy Saya perhatikan sering membagikan script defer untuk single JS seperti berikut:

   function downloadJSAtOnload(){var d=document.createElement("script");d.src="script.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

2. Nah, jika kamu berniat untuk mendefer beberapa JS, Kamu bisa menggunakan kode script defer multiple JS berikut:

   function loadDeferScript(o) {
     var d = document.createElement("script");
     d.src = o, document.body.appendChild(d)
   }
   
   function downloadJSAtOnload() {
     loadDeferScript("script1.js"), loadDeferScript("script2.js")
   }
   window.addEventListener ? window.addEventListener("load", downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent("onload", downloadJSAtOnload) : window.onload = downloadJSAtOnload;

3. Silahkan tambahkan ,loadDeferScript("script3.js") dan seterusnya jika ada, di belakang kode yang sudah ada seperti berikut:

   function loadDeferScript(o) {
     var d = document.createElement("script");
     d.src = o, document.body.appendChild(d)
   }
   
   function downloadJSAtOnload() {
     loadDeferScript("script1.js"), loadDeferScript("script2.js"), loadDeferScript("script3.js")
   }
   window.addEventListener ? window.addEventListener("load", downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent("onload", downloadJSAtOnload) : window.onload = downloadJSAtOnload;

4. Atau jika di-minify akan seperti berikut:

   function loadDeferScript(o){var d=document.createElement("script");d.src=o,document.body.appendChild(d)}function downloadJSAtOnload(){loadDeferScript("script1.js"),loadDeferScript("script2.js"),loadDeferScript("script3.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

5. Atau jika di tulis didalam template blogger jangan lupa juga tambahan kan tag script seperti berikut:

   <script>
   //<![CDATA[	
   function loadDeferScript(o){var d=document.createElement("script");d.src=o,document.body.appendChild(d)}function downloadJSAtOnload(){loadDeferScript("script1.js"),loadDeferScript("script2.js"),loadDeferScript("script3.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;			
   //]]>		  
   </script>

Kurang lebih seperti itulah cara mendefer beberapa JS pada template blogger dengan sangat mudah, jika nanti ada cara yang lebih efektif akan saya share kembali. Semoga bermanfaat.

Referensi:

1. https://www.kompiajaib.com......................