Meningkatkan Kecepatan Blog (Blogger) Dengan Image Lazy Load Script !

Meningkatkan Kecepatan Blog (Blogger) dengan Image Lazy Load Script !



www.mediatronika.com - Meningkatkan Kecepatan Blog (Blogger) dengan Image Lazy Load Script !


Banyak Blogger yang ingin Meningkatkan Kecepatan Blog / Web alasannya ialah pengguna internet lebih menyukai Web Tertentu yang Loadingnya Lebih Cepat. Kaprikornus Anda Harus Bersaing dengan Website yang lain, Jadi, Anda harus melaksanakan beberapa Perubahan pada Blog Anda untuk Meningkatkan Kecepatan loading blog Anda. Dalam Hal Ini, Kita sanggup berguru Sedikit Trik ini. Ini ialah Skrip Kecil yang Dapat Anda Temukan dengan Praktis di Internet yang Disebut "Image Lazy Load Script" juga Tersedia untuk Pengguna WordPress dalam Bentuk Plugin.

Pengguna Internet Memiliki Website Berkualitas Tinggi tetapi mempunyai Kecepatan Loading (Pemuatan) yang Buruk Karena Lalu Lintas Tinggi Kaprikornus Anda harus Memperbaiki dan Mengoptimalkan Script, Gambar dan Hal Lain dari Blog Anda. 90% Pengunjung tidak tiba lagi ke blog Anda Jika blog Anda membutuhkan waktu loading 1-2 menit. Orang lebih Tertarik ke blog yang loadingnya Lebih Cepat alasannya ialah ini sanggup menghemat Waktu Pengunjung.

 Web alasannya ialah pengguna internet lebih menyukai Web Tertentu yang Loadingnya Lebih Cepat Meningkatkan Kecepatan Blog (Blogger) dengan Image Lazy Load Script !
Meningkatkan Kecepatan Blog (Blogger) dengan Image Lazy Load Script !

Langkah-langkah untuk Menambahkan  Image Lazy Load Script di Blogger:

  • Login ke akun Blogger Anda dan Pilih Blog mana yang Anda ingin gunakan Image Lazy Load Script.
  • Kemudian pilih "Template" Option yang Anda temukan di sisi kiri Anda.
  • Klik Edit HTML dan Kode Template Terbuka 
  • Cari Tag <head> dengan menekan tombol CTRL + F dan copy Image Lazy Load Script berikut  di atas Tag  <head>

script type='text/javascript'>//<![CDATA[
(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://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
  • Setelah Menambahkan Script Klik "Save Template" 

Apa yang dilakukan Image Lazy Load Script?

Script ini Hanya memungkinkan loading (pemuatan) gambar pada ketika postingan ditampilkan di Layar Browser Anda Bukan di Halaman Penuh. Kaprikornus bila Anda mempunyai Empat Gambar di Postingan Anda mungkin browser akan  menampilkan dua gambar saja. Kaprikornus Kedua Gambar lagi akan tampil ketika Anda Menggulir (menggeser scroll) Ke bawah Halaman blog Anda. 

CATATAN: Image Lazy Load Script ini hanya untuk Meningkatkan Kecepatan loading (Pemuatan) Gambar Blogger Anda Tapi Ada Satu Kerugian dari Skrip ini, ketika Anda menambahkan Script ini bila pengguna menonaktifkan Javascript di Browser mereka,  maka gambar tidak akan tampil di Postingan Blog Anda. 

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel