Mempercepat Loading Blog Dengan Lazy Load

Sumber : http://www.blog.jonico.org/

IdnTorial - Bagi sebagian besar pemilik blog atau situs web, kecepatan loading sebuah halaman blog menjadi hal yang perlu dipertimbangkan dan diprioritaskan. Karena hal ini terkadang sanggup mempengaruhi berapa usang visitor atau pengunjung betah di halaman situs kita. Seperti pola ketika kita akan mencari suatu sumber informasi, dan mengharuskan mencari disebuah laman blog. Dan dikala kita mengunjunginya membutuhkan waktu usang untuk menampilkan gosip atau konten tersebut. Maka sebagian besar pengunjung akan menentukan meninggalkan laman tersebut dan mencari sumber gosip yang lain. Untuk mengatasi hal tersebut, maka penggunaan script plugin Lazy Load yaitu solusinya. Berikut ini aku share ihwal penggunaan Lazy Load untuk mempercepat loading blog.

Lazy Load yaitu sebuah script JQuery yang digunkan untuk membantu mempercepat konten dari sebuah laman blog.  Cara kerja script ini cukup simple, yakni script akan menampilkan konten text (tulisan) terlebih dahulu, sehingga para pengunjung akan mendapat klarifikasi konten lebih cepat. Setelah konten text sudah sepenuhnya ditampilkan, maka selanjutnya akan menampilkan konten gambar (img) secara berurutan dari atas hingga bawah. hal ini akan sangat membantu dalam proses loading dibanding harus memuat seluruh gambar secara bersamaan.

MENGGUNAKAN SCRIPT LAZY LOAD UNTUK MEMPERCEPAT LOADING BLOG

Dalam penggunaannya, script ini sangatlah mudah. Kita hanya akan menempatkan script JQuery di bab instruksi template blog kita. untur mempersingkat waktu, maka akan aku berikan tutorialnya saja. Karena aku yakin dikala ini banyak orang (mungkin anda salah satunya) yang suka praktik pribadi dibanding banyak teori (ini prinsip anak Sekolah Menengah kejuruan hehehehe..)

1. Silahkan copy script yang ada di bawah ini.

<script type='text/javascript'>//<![CDATA[
// Lazy Load by IdnTorial
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);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/AVvXsEgtIwdHGAk2RIuQfnTX-bwBDCScdVBAOUm1hwbnwtDFByhuJv6vs27xrkIrd2ZApfoXIEoVQXq4ZZAuRWcXl3X4kiu8sh-HgM3mxbjKrVhyphenhyphen8v3Honr8ljkbn0UX2e0pRT0TFiXtPrHFpvdI/s1600/banner.png",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

2. Buka Blogger > Tema > Edit HTML

3. Cari instruksi </body> dan paste instruksi ini diatas instruksi tersebut.

4. Save template dan coba cek dengan membukanya di perangkat lain. Jika tidak memungkinkan anda sanggup melaksanakan cek pada situs GTMatrix

Dengan begitu, halaman yang akan dikunjungi akan lebih cepat memuat konten text yang dibutuhkan. Walau lebih cepat dan lebih bermanfaat, bukan berarti tidak mempunyai imbas samping. Untuk dampak penggunaan script Lazy Load ini akan aku bahas di artikel selanjutnya.

4.

Sumber https://prazmedia.blogspot.com/

Share this post