cara Defer Offscreen Images menggunakan Javascript di blogger

Imej
apabila test di google page speed insight dan suggestion dari google supaya  Defer Offscreen Images kita boleh menggunakan Javascript. Ia akan mempercepatkan loading blog anda, mesti dicuba kod ini. sebelum tu backup template jika ada kesalahan anda nanti boleh upload kembali dan menggunakan template lama anda. langkah Defer Offscreen Images menggunakan Javascript di blogger  pergi ke theme--->edit html dan cari kod </body> pastekan kod java dibawah diatasnya. simpan dan test lagi di google page speed insight dan lihat hasilnya. <script> //<![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(&

Cara lazyloading semua gambar di blogger supaya laju

 Dibawah adalah kod lazyloading untuk membuatkan blog loading lebih laju lalu untuk mendapat score lebih tinggi di Google PageSpeed Insights. Cara memasangnya adalah seperti berikut

1. Copy kod dibawah

<script>
//<![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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXJK5wILO3GfzXKLLBtbrK3Y1_IU9bphrQTYDgpmRByDJUoBrLdWvtSLUUfHGyl8nSk11Dxxke-CwGStqQfW4HPOhVITuszCMhv1GzCyzNA5hZR9TTdIKPdLtzmh7RJhZeVvVaN-lSK9k/s10/loadingku.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>


2. Pergi ke blogger dashboard-tema-edit Html-jump to widget-blog dan cari kod /body

pastekan kod lazy load diatas sebelumnya


Ini akan membuatkan semua image pada blog mempunyai tag lazy loading. jika ingin Memasang secara manual kod dibawah dimasukkan pada setiap html gambar

<img loading="lazy" src="#" alt="image alt tag"" />

Ulasan

Catatan popular daripada blog ini

Cara buang Featured Image Generate Press theme

Cara konfirmasi pemilik blog di webmaster

cara tampilkan iklan Adsense dibawah konten post blogger