Skip to main content

Cara Paling Mudah Mempercepat Loading Blog dengan Lazy Load Gambar di Blogger

Cara Paling Mudah Mempercepat Loading Blog dengan Lazy Load Gambar di Blogger - Hallo sobat blogger masbisor.com, apa kabarnya pasti luar biasa dan sehatkan? Hari saya akan membagi seputar informasi tentang Cara mempercepat loading blog yang mengunakan script Lazy Load Gambar super ringan. Banyak sekali blogger pemula mengalami kebingungan dalam mengoptimasi templatenya agar super ringan dan ramah di mata google. Dan ini merupakan kebutuhan para blogger untuk meningkatkan kecepatan pada template blog. Untuk mendapatkan informasi yang lebih silahkan baca dengan cermat agar tidak salah paham yah hehe.

Cara Paling Mudah Mempercepat Loading Blog dengan Lazy Load Gambar di Blogger

Apa itu Lazy Load Gambar ?

Lazyload adalah sebuah plugin untuk menunda pemuatan gambar di halaman web yang panjang (banyak gambar dalam postingan). Cara kerja dari Lazy Load ini sangat mudah sekali, ketika anda membuka sebuah situs masbisor.com, untuk gambar tidak akan tampil sebelum anda discroll kebawah, setelah anda mengeser kebawah maka tampillah semua gambar tersebut. Hal seperti akan membantu untuk meningkatkan kecepatan halaman blog.

Baca juga : 7 Cara Untuk Mempercepat Loading Blogger Dengan Sempurna

Mengapa harus Meringankan proses loading Gambar pada Website dengan Lazyload?


Ketika anda membuka sebuah situs orang lain yang memiliki loading yang cukup lama, apakah anda akan terus-menerus menunggu sampai loading tersebut berhenti? atau mungkin blog anda memiliki hal yang sama? hal-hal seperti ini harus cepat hindari dan cobalah untuk memperbaik agar blog anda tidak mengalami kerugian yang besar seperti :

  • Visitor dulunya meningkat sekarang mulai turun dratis
  • Untuk bersaing diberanda google akan semakin sulit
  • Blog milik anda akan terlupakan dengan cepat
Dan masih banyak faktor lain yang dapat merugikan reputasi blog anda. Kecepatan pada blog sangatlah penting karena ketika seseorang visitor yang berkunjung mereka akan lebih lama membaca dan lebih senang karena blog tersebut tidak loading lama pada setiap halaman blog anda.

Baca juga : Cara Membedakan Sebuah Backlink Di Dalam Postingan dan Komentar

Seberapa Penting mengunakan Lazyload pada Blog?

Menggunakan Lazyload pada halaman blog yang panjang dan banyak sekali ukuran gambar besar membuat beban halaman lebih cepat /ringan. Browser akan berada dalam keadaan siap setelah memuat gambar terlihat. Dalam beberapa kasus juga dapat membantu untuk mengurangi beban server. Semua master blogger memberikan solusi dengan menyarankan untuk menghapus CSS dan JavaScript yang tidak penting / sama sekali tidak berguna untuk blog yang anda miliki.

Baca juga : Tanggapan Seorang Mengenai Perkembangan Blogger Vs Youtube Di Tahun Mendatang

Berikut Cara Paling Mudah Mempercepat Loading Blog dengan Lazy Load Gambar di Blogger

1. Login terlebih dahulu di situs blogger
2. Pergi ke menu Tema > Klik Edit HTML
3. Cari kode </body> dan pasang kode dibawah ini sebelum 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> 
4. Setelah selesai meletakan kode tersebut silahkan klik simpan

Ketika anda sudah memasang kode script dengan benar, coba langsung buka situs anda lihat perubahan yang terjadi. Apakah gambar loading saat dibuka sama dengan lama ada perbedaan atau memiliki perubahan yang besar. Untuk script ini sudah banyak digunakan oleh para blogger diluar sana. Mungkin sekian informasi yang dapat di bagikan tentang Cara Paling Mudah Mempercepat Loading Blog dengan Lazy Load Gambar di Blogger semoga bermanfaat dan jika masih mengalami kebingungan silahkan tinggalkan komentar di bawah ini. Terimakasih

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar