Jadi Arif Perlu Diperhatikan Cara Menggabungkan Javascript Untuk Di Defer

Sebelumnya aku sudah share ihwal cara mempercepat loading blog dengan tag kondisional, sebetulnya pada artikel tersebut sudah sangat terperinci sekali dalam mengakali instruksi blog sesuai peruntukannya masing-masing, menyerupai instruksi untuk postingan, homepage, halaman statis, dll. Sehingga ketika browser mengakses halaman postingan, maka instruksi untuk homepage tidak diakses.

Fungsi defer javascript yaitu untuk mempercepat dan tidak mempengaruhi loading blog, ada yang berinisiatif untuk menggabungkan file js yang dihosting untuk di defer agar browser tidak perlu mengakses beberapa file js. Namun yang perlu diperhatikan dalam menggabungkan file js yaitu fungsi script itu sendiri, kalau file js untuk postpage jangan digabung dengan file js khusus homepage.

Coba perhatikan script untuk men-defer file js berikut ini:

Kode js khusus postingan

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 function downloadJSAtOnload(){var d=document.createElement("script");d.src="url-file1.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
 //]]>
 </script>
 </b:if>

Kode khusus selain postingan

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 function downloadJSAtOnload(){var d=document.createElement("script");d.src="url-file2.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
 //]]>
 </script>
 </b:if>

Jika kedua file js diatas digabung menjadi satu (1 url hosting), maka harus menghilangkan tag kondisional.

 <script type='text/javascript'>
 //<![CDATA[
 function downloadJSAtOnload(){var d=document.createElement("script");d.src="url-file1.js" , "url-file2.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
 //]]>
 </script>

Namun perlu diingat bahwa hal tersebut akan mempengaruhi loading blog alasannya yaitu ketika browser mengakses halaman postingan, instruksi / file js khusus selain postingan menyerupai homepage juga akan diakses dan itu sangat tidak diinginkan.

Cara menggabungkan javascript untuk di defer

Sekedar referensi saja untuk memudahkan anda, kita akan menggabungkan isi file.js untuk halaman postingan:

Isi file1.js untuk tombol share

 (function() {
    var dr = document.createElement('script');
    dr.type = 'text/javascript'; dr.async = true;
    dr.src = '//share.donreach.com/buttons.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
  })();

Isi file2.js untuk navigasi dibawah postingan

 (function($){
    var newerLink = $('a.blog-pager-newer-link');
    var olderLink = $('a.blog-pager-older-link');
    $.get(newerLink.attr('href'), function (data) {
    newerLink.html($(data).find('.post h1.post-title').text());
    },"html");
    $.get(olderLink.attr('href'), function (data2) {
    olderLink.html($(data2).find('.post h1.post-title').text());
    },"html");
 })(jQuery);

Lalu kita satukan (copas) kedua javascript diatas ke notepad menyerupai ini:

 (function() {
    var dr = document.createElement('script');
    dr.type = 'text/javascript'; dr.async = true;
    dr.src = '//share.donreach.com/buttons.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
  })();
 
 (function($){
    var newerLink = $('a.blog-pager-newer-link');
    var olderLink = $('a.blog-pager-older-link');
    $.get(newerLink.attr('href'), function (data) {
    newerLink.html($(data).find('.post h1.post-title').text());
    },"html");
    $.get(olderLink.attr('href'), function (data2) {
    olderLink.html($(data2).find('.post h1.post-title').text());
    },"html");
  })(jQuery);

dan simpan dengan nama file.js, lalu dihosting. Saya sendiri menghostingnya di https://github.com/, maka akan mendapat url hosting https://cdn.rawgit.com/NomIfrod/js/master/file.js. Sehingga kalau kita aplikasikan untuk di defer menjadi menyerupai ini:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/NomIfrod/js/master/file.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
 //]]>
 </script>
 </b:if>

Jadi, kalau anda ingin menggabungkan file.js maka harus diperhatikan fungsinya. Jika sama-sama script untuk postingan tidak masalah, menyerupai script komentar, tombol share, syntax, dll.

Praktis sekali kan? Selamat mencoba...