Meningkatkan Kecepatan Loading Halaman Blog Dengan Script Lazy Load

Cara Meningkatkan Kecepatan Loading Halaman Blog Menggunakan Script Lazy Load

Bagi Anda para pengguna patform Wordpress self hosting pasti sudah tak asing lagi atau setidaknya pernah mendengan plugin yang bernama Lazy Load. Plugin yang dipercaya dan sudah terbukti dapat meningkatkan kecepatan loading halaman website secara signifikan.

Cara kerja plugin ini sendiri cukup  sederhana, dimana dia hanya akan me-load gambar, video dan iframe yang berada di areal landing page view atau areal terlihat di awal halaman terbuka. Jadi ketiga element(gambar, video, iframe) yang berada di areal tak terlihat baru akan di load ketika pengguna melakukan scroll halaman.

Cara Meningkatkan Kecepatan Loading Speed Halaman Blog Dengan Mudah

Metode tersebut ternyata cukup ampuh untuk meningkatkan loading speed halaman website pada wordpress. Peningkatan kecepatan loading halaman dapat kita amati dengan jelas jika kita menggunakan tool pengetest kecepatan loading halaman web seperti GT-Metrix ataupun sejenisnya.
Baca Juga : Cara Membuat Iklan Melayang Disamping Halaman Blog/Wordpress
Nah, kabar gembira untuk Anda para pengguna platform Blogspot karena ternyata ada sebuah script atau kode JQuery yang memiliki kinerja hampir serupa dengan plugin Lazy Load wordpress tersebut. Lalu seperti apa dan bagaimana cara pemasangan script tersebut? Oke, langsung saja simak langkah-langkahnya:

- Pertama masuk ke dashboard blogger Anda, buka edit HTML (Tema >> Edit HTML). Selanjutnya cari kode </body> , agar lebih mudah Anda bisa memanfaatkan tool pencarian (Ctrl+F).

- Selanjutnya copy script/kode Lazy Load di bawah ini, lalu taruh kode tersebut tepat diatas kode </body>  .
<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
- Terakhir Simpan template.

Sekarang coba Anda lihat hasilnya dengan melakukan pengujian loading speed test bisa menggunakan GT-Metrix, PageSpeed Insight ataupun sejenisnya.

Itulah salah satu cara untuk meningkatkan kecepatan loading halaman blog dengan mudah menggunakan Script/kode Lazy Load.

Jika ada yang masih kurang jelas langsung saja Anda tanyakan melalui kolom komentar dibawah. Semoga bermanfaat.

loading...

0 Response to "Meningkatkan Kecepatan Loading Halaman Blog Dengan Script Lazy Load"

Terima Kasih Sudah Berkunjung.. Jika berkenan silahkan berikan komentar Anda mengenai artikel atas.. Setiap Kritik ataupun Saran yang Anda berikan sangat berguna untuk perkembangan dan kemajuan Blog ini..