Cara Mempercepat Loading Blog dengan Script Lazy Load

Cara Mempercepat Loading Blog dengan Lazy Load. (Gambar: Lepiku.id)

Lepiku.id - Mempercepat loading blog bisa menggunakan berbagai macam cara, salah satunya yaitu dengan memasang script lazy load di blog.

Sebenarnya trik ini sudah banyak yang membagikannya, kalo tidak percaya coba kamu ketik di kolom pencarian google dengan kata kunci "cara mempercepat loading blog dengan lazy load", nanti kamu akan menemukan banyak blog yang membagikan panduan seperti ini. Benerkan? hehe

Dengan memasang script lazy load, akan membuat kecepatan loading blog kamu menjadi lebih cepat, asalkan pemasangannya benar.

Jadi, nanti ketika kamu mengikuti panduan meningkatkan kecepatan loading blog dengan lazy load diusahkan teliti dan tidak salah disetiap langkah-langkahnya.

Tapi, sebelum lanjut ke topik inti.

Aku mau tanya nih, apa sih yang membuat kamu mencari tutorial meningkatkan kecepatan loading blog dengan metode pasang script lazy load?

Apa sih yang kamu kejar?

Aku tebak, pasti supaya skor Google PageSpeed Insight maupun GTmetrix jadi hijau kan?

Ya tidak salah sih, siapa juga yang mau kecepatan loading blog kita lemot kayak keong, enggak banget kan? hehe

Selain untuk meningkatkan skor PageSpeed Insights dan GTmetrix, mempercepat loading blog juga membuat pengunjung betah berlama-lama di blog kita.

Tidak hanya itu, mempercepat loading blog juga akan dinilai baik oleh Google, baik dari segi SEO maupun kualitas blog itu sendiri (berarti pemilik blog telah peduli dengan pangunjung nya, karena telah melakukan optimasi kecepatan loading blog).

Jadi, tidak hanya tampilannya saja yang bagus, akan tetapi kecepatan loading blog juga perlu ditingkatkan demi kenyamanan pengunjung.

Sekarang kita menuju ke topik inti dari artikel ini, yaitu cara mempercepat loading blog (blogspot/blogger) dengan memasang script lazy load.

Cara Mempercepat Loading Blog

Seperti yang dijelaskan diatas, meningkatkan kecepatan loding blog itu banyak caranya, salah satunya ya dengan memasang script lazy load.

Lalu bagaimana cara pasangnya? berikut tutorialnya.

Cara Memasang Script Lazy Load di Blogspot

Masuk ke Dashboard Blogger kamu terlebih dahulu.
Klik Menu Tema >> Edit HTML.
Kemudian cari kode </body>.

Copy script lazy load dibawah ini dan letakkan 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:"",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Klik Simpan.

Coba sekarang buka blog kamu, pasti kamu akan merasakan kalo kecepatan loading blog kamu jadi lebih cepat dari sebelumnya. Dan bisa dipastikan kalo skor PageSpeed Insights dan GTmetrix blog kamu jadi bertambah, bahkan bisa jadi malah jadi hijau semua.

Jika kamu mengikuti langkah-langkahnya dengan benar, pasti script lazy load itu akan berkerja semestinya. Tapi, jika kamu salah, misalnya salah meletakkan kode script nya, bisa dipastikan kalo kecepatan blog kamu malah makin lambat.

Sekian tutorial Cara Mempercepat Loading Blog dengan Script Lazy Load. Semoga bisa membantu meningkatkan kecepatan loading blog kamu. Terima kasih.

sumber kode script lazy load: https://www.adityatekno.com/2019/07/cara-mempercepat-loading-blog-blogger.html