Cara Memasang script lazy load image untuk percepat loading blog

Diantara fungsi lazy load adalah untuk mempercepat loading blog adalah dengan cara memasang lazy load di blog untuk mengoptimasi loading blog sehingga tidak memberatkan browser saat halaman web page atau homepage kita dibuka. Di wordpress kita bisa memasang plugin, Lazy load jquery ini bekerja ketika halaman mulai di scroll ke bawah secara otomatis image load.
Cara Memasang script lazy load image untuk percepat loading blog
Pastikan juga sebelum mengupload gambar ke website anda :

- Kompres image
Hal yang perlu diperhatikan saat mengunggah sebuah gambar ke blog untuk selalu mengompres gambar kita supaya ukuran gambar menjadi kecil sehingga tidak memberatkan blog saat di load di browser.

- Tambahkan alt image
Menambahkan alt image sangat penting untuk optimasi seo, sehingga googlebot mengerti image yang ditautkan ke halaman webpages kita

- Index images
Fetch as google baik untuk homepage Url maupun post page kita agar image terindex di search engines google web.

Cara memasang cript lazy load
Login ke blogger di dashboard blogger piling theme kalu edit html Dan pastekan mode dibawah ini diantara <head> scriot lazy load </head> stay diatas </body>
Jangan lupa pasang jquery script di blogger agar lazy load js bekerja di blog sobat.

<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.leftobegin((this, c)) {}else if(!a.belowthefold(this,c) &&! a.rightoffold(this.c)){a(this).trigger("apper")} else{if(e++>c.failurelimit){return false}}}) ;var f=a.grep(d,function(d,function(a) return!a.loaded}) ;d=a(f)})} this.each(function(){var b=this;if(undefined==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.lefttobegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if,c.placeholder){a(b).attr("src",c.placeholder)} elss{a(b).removeAttr("src")}b.loaded=false} else{loaded=true} a(b).one("appear", function() {if(!this.loaded){a("<img/>").bind("load",function(){a(b).hide().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.thresold};a.rightfold=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=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(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, containet:window}}", "above-the-fold":"!$belowthefold(a, {threshold:0, container:window})", "right-of-fold" :"$.rightoffold(a, {threshold:0, container:window})", "left-to-fold":"!$.rightoffold(a, {threshold:0, container:window})"})}) (jQuery);$(function() {$("img"). lazyload({placeholder:"https://", effect:"fadeIn, threshold:" - 50"})});
//]] >
</script>

Ikuti https:// dengan url image sobat setelah placeholder.

Belum ada Komentar untuk "Cara Memasang script lazy load image untuk percepat loading blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel