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 == "item"'>
<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 != "item"'>
<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>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 == "item"'>
<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...
