Perlu Diperhatikan Cara Menggabungkan Javascript Untuk di Defer

Perlu Diperhatikan Cara Menggabungkan Javascript Untuk di Defer
Perlu Diperhatikan Cara Menggabungkan Javascript Untuk di Defer

Sebelumnya saya sudah share tentang cara mempercepat loading blog dengan tag kondisional, sebenarnya pada artikel tersebut sudah sangat jelas sekali dalam mengakali kode blog sesuai peruntukannya masing-masing, seperti kode untuk postingan, homepage, halaman statis, dll. Sehingga saat browser mengakses halaman postingan, maka kode untuk homepage tidak diakses.

Fungsi defer javascript adalah untuk mempercepat dan tidak mempengaruhi loading blog, ada yang berinisiatif untuk menggabungkan file js yang dihosting untuk di defer supaya browser tidak perlu mengakses beberapa file js. Namun yang perlu diperhatikan dalam menggabungkan file js adalah fungsi script itu sendiri, jika 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 karena ketika browser mengakses halaman postingan, kode / file js khusus selain postingan seperti homepage juga akan diakses dan itu sangat tidak diinginkan.

Cara menggabungkan javascript untuk di defer


Sekedar contoh 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 seperti 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, kemudian dihosting. Saya sendiri menghostingnya di https://github.com/, maka akan mendapatkan url hosting https://cdn.rawgit.com/NomIfrod/js/master/file.js. Sehingga jika kita aplikasikan untuk di defer menjadi seperti 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, jika anda ingin menggabungkan file.js maka harus diperhatikan fungsinya. Jika sama-sama script untuk postingan tidak masalah, seperti script komentar, tombol share, syntax, dll.

Mudah sekali kan? Selamat mencoba...
Artikel Terkait

Catatan:

File yang kami bagikan kami simpan di google drive, jika file format word dan excel dialihkan ke aplikasi google doc maka unduh / save as dulu ya. Namun jika kesulitan, silahkan baca cara downloadnya