Cara Lengkap! Bagaimana Mempercepat Loading Blog yang Jarang Dibocorkan Oleh Para Master Blogger!!
Situs yang cepat meningkatkan kepuasan pengguna dan meningkatkan kualitas keseluruhan dari web. Jika webnya memiliki kecepatan load yang baik, tentunya pengunjung juga merasa betah membuka web sobat. Sehingga dengan demikian diharapkan pengunjung dapat betah dan menjelajahi web sobat secara menyuluruh tanpa takut lelet. Dan ini akan berdampak baik dimata search engine.
Untuk cara optimasi pagespeed ini, sebetulnya bisa dibilang mudah-mudah sulit, tapi ya enggak sulit-sulit banget.
Pada umumnya faktor yang paling berpengaruh dalam masalah ini adalah pada penggunaan dan penempatan javascript yang kurang tepat dan efisien. Disini tentunya penggunaan js yang berlebihan dapat meningkatkan waktu load (berat) laman. Waktu load laman ini bisa berbeda-beda, seperti laman home page, laman postingan, laman statis laman error dan sebagainya. Semakin kecil atribut atau script yang digunakan maka akan semakin ringan. Semakin sedikit baris script yang digunakan juga akan semakin ringan. Begitu pula sebaliknya.
Untuk mengatasi masalah ini tentunya kita harus bijak dalam menggunakannya, misalnya penggunaan fiture yang sekiranya tidak diperluka sebaiknya kita hindari. Seperti penggunaan widget jam, recent post by label dan sebagainya apa lagi yang menggunakan scrip pihak ketiga.
Cara lainnya adalah dengan melakukan defer js yang panjang. biasanya cara ini digunakan pada fiture yang memiliki scrip yang panjang, misalnya slider, adblock atau css sekalipun.
Cara Membuat Multi Defer Loading Javascript :
Menggabungkan beberapa script menjadi satu dan simpan di self hosting kemudian kita defer menggunakan javascript. Secara default untuk script defernya adalah seperti dibawah ini :<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "HOSTING SCRIPT.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>Kita juga bisa membuat multi defer loading javascript blog dengan menggabungkan beberapa file ekternal script secara langsung, sebagai contohnya seperti dibawah ini :
<script type="text/javascript">
function downloadJSAtOnload() {
(function(scripts) {
var i = 0,
l = scripts.length;
for (; i<l; ++i ){
var element = document.createElement("script");
element.src = scripts[i];
document.body.appendChild(element);
}
})(['HOSTING SCRIPT 1.js','HOSTING SCRIPT 2.js']);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script><script type="text/javascript">
function loadScript(src) {
var element = document.createElement("script");
element.src = src;
document.body.appendChild(element);
}
// Add a script element as a child of the body
function downloadJSAtOnload() {
loadScript("HOSTING SCRIPT 1.js");
loadScript("HOSTING SCRIPT 2.js");
loadScript("HOSTING SCRIPT 3.js");
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Untuk hosting js ini bisa gunakan tempat hosting yang gratisan aja, apalagi blogger macam saya 😆. seperti yourjavascrip, atau github
Silakan pilih salah satu kode diatas untuk mengoptimalkan pemanggilan kode script yang membutuhkan penundaan pemuatan agar blog menjadi lebih cepat dan ringan.
Cara lainya adalah melakukan kompress css atau javascrip.
Cara ini adalah yang saya gunakan karena memang saya gak begitu suka menggunakan script external. Saran saya untuk melakukan kompresi javascrip atau css silahkan dibackup terlebih dahulu, karena tak jarang pula ada beberapa script yang tidak dapat bekerja jika di kompres. Jika saya hanya mengkompress pada bagian yang bukan frameblog/ kerangka blognya. Dalam artian hanya css dan js pendukung saja yang saya kompres. Misalkan property CSS seperti:
header (header kanan, header kiri), menu, popularpost, label, post-body. post-body img, tabel, credit, widget, dsb..
Cara selanjutnya adalah dengan menggunakan tag kondisional
Cara ini terbukti ampuh untuk meringankan load blog. Seperti yang sudah saya jelaskan di atas bahwa load laman blog berbeda-beda, misal pada home page, laman statis, dsb..
Nah disinilah peran tag kondisional dapat kita terapkan untuk memanipulasinya, Misalkan kita menggunakan widget artikel terkait dibah postingan. Umumnya widget ini diterapkan pada laman postingan bukan? nah jika begitu sobat awb bisa menerapkan/ meletakkan css dan javascriptnya pada tag kondisional laman postpage, contoh lainya meletakan css blocquote, pre, post-body bla... blaa.., dsb yang hanya dignakan pada laman posting maka bisa kita letakkan pada tag kondisional postpage.
Dan begitu pula untuk laman home page, statis, arcive, label dan sebagainya.
Tips selanjutnya
Untuk tips ini adalah dengan melakukan beberapa solusi yang umum digunakan dalam meningkatkan kecepatan blog. Misalnya melakukan kompress gambar postingan, cara ini selalu saya gunakan untuk menekan size yang memang terkadang bisa mencapai 3 sampai 5 mb sendiri, untuk gambarnya 😆, dan ada baiknya dikombinasikan dengan menggunakan script lazyload img. Agar gambar yang dimuat dapat ditunda dan ditampilkan saat pegunjung melakukan scrollling. Cara ini saya sebut sebagai memprioritaskan paruh konten atas. Berikut script lazyloadnya;
Selain itu biasanya juaga bisa melakukan parse pada widget css.bundle, misalnya seperti pada markup <head>, </head>.
Untuk masalah jquery bisa menambahkan markup <script type='text/javascript'>//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>Selain itu biasanya juaga bisa melakukan parse pada widget css.bundle, misalnya seperti pada markup <head>, </head>.
async='async', Misalkan:dari script
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/><script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
//output the script (load it from google api)
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script><b:includable id='comments' var='post'> dan letakkan dibawah nya, sebelum penutup </b:includable>Perlu sobat awb ingat, pada umumnya yang paling baik dalam peletakan javascript adalaah diatas markup
</body>. Namun ada pula pada beberapa javascript yang harus diletakan diatas markup </head>, karena jika tidak maka javascript tersebut tidak akan berfungsi.Tips selanjutnya yang dapat sobat gunakan untuk mempercepat loading blog adalah dengan mengekstrak font. Yap cara ini memang tak pernah dibahas sebelumnya, font apasaja yang bisa di extrak? yap, semua jenis font yang kalian gunakan di web bahkan font awesome sobat bisa di extrak dengan format woff. Cara extrak font ini bertujuan untuk mengotimasi font web sobat.
Cara Selanjutnya akan saya bahas pada thread berikutnya ya, dikarenakan udah lelah ngetik 😏. Sekian semoga thread ini dapat bermanfaat jika ada yang kurang atau salah silahkan ditambahkan.
Alhamdulillah blog saya sudah mulai lebih cepat loading nya
ReplyDeletealhamdulillah ^-^
Delete