Jika blog anda terasa berat saat anda refresh saya mempunyai cara ampuh untuk mempercepat loading blog anda, Tapi sebelum ke tutorial saya ingin menjelaskan dulu 'apa penyebab blog terasa berat saat kita refresh?' Biasanya faktor utama yaitu pada gambar dengan ukuran besar dan template blog yang mempunyai banyak pernak pernik contohnya seperti template blog dengan desain yang di sisipi gambar bervariasi.
Terkadang memiliki tampilan template yang elegant dan terlihat cantik akan sangat enak jika kita lihat Apalagi jika blog tersebut juga dilengkapi dengan fitur slider. Tapi jelas-jelas beban loading blog juga akan bertambah ketika terdapat beberapa URL gambar dimasukan kedalam slider tersebut untuk di tampilkan.
Oke langsung saja bagaimana cara meringankan loading blog anda? Kali ini saya akan menggunakan jQuery Lazy Load, Dengan memanfaatkan jQuery Lazy Load untuk meningkatkan loading blog agar proses load image bisa semaksimal mungkin ini merupakan salah satu usaha yang cukup untuk membantu halaman blog tampil lebih cepat dari sebelumnya,karena sudah saya bilang diatas bahwa yang memberatkan blog anda bisa jadi dari gambar dengan ukuran besar.
Waktu yang biasanya digunakan untuk menunggu proses loading untuk memuat gambar yang biasanya tampil lebih lama, maka setidaknya jQuery Lazy Load bisa meminimalisir kemungkinan tersebut untuk memunculkan gambar yang terlihat pada halaman blog akan nampak lebih awal sedangkan load gambar yang lainnya akan bekerja apabila pada halaman tersebut kita scroll. Sehingga pada dasarnya jQuery Lazy Load memiliki cara kerja untuk menayangkan bagian gambar yang terlihat dari halaman blog terlebih dahulu untuk meningkatkan page load.
Berikut tutorialnya untuk cara Mempercepat Loading Blog Dengan jQuery Lazy Load?
1. Pertama silakan login ke blog anda
2. Masuk ke template
3. Selanjutnya anda copy kode dibawah ini lalu simpan diatas kode </head>
<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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgakGEeQxIK104AgwNhFH88wybXUxAerwCu4V-IEcEVKgTdYpH1hyphenhyphenB-0fgGPUj_JdcE6VDobW37B1sxUdKfk9_tQCkSobjm8t7sd3cwTPUwnFEthtydJ4esJhh0X6zWf9HNGbDl2geLAVw/h120/lazy+image.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
Sekarang rasakan beban load image menjadi lebih ringan dan waktu page load juga meningkat, sekian tutorial cara Mempercepat Loading Blog Dengan jQuery Lazy Load.
No comments:
Post a Comment