Cara Percepat Loading Blog Dengan Bantuan Lazy Load

Panduan blogging kali ini saya akan membagikan tentang cara percepat loading blog dengan bantuan Lazy Load. Apa itu Lazy Load? Lazy Load adalah script html tambahan yang digunakan untuk menahan render image atau gambar pada saat pra muat halaman awal sebuah blog atau website.

Dengan bahasa yang mudah dipahami, maka setiap image yang terdapat pada halaman ataupun postingan blog, entah itu cover artikel, thumbnail judul artikel, atau setiap image konten dalam sebuah artikel, tidak akan ditampilkan atau dimunculkan di dalam pra muat halaman sebelum menggulirkan tampilan halaman sampai ke dasar footer sebuah blog atau website.

Apa tujuan dan manfaatnya menggunakan Lazy Load? Dengan fungsi Lazy Load yang sudah dijelaskan di paragraf awal, Lazy Load dapat menahan render sebuah image pada suatu blog ataupun website, maka sudah pasti tujuannya untuk mempercepat loading blog, dan manfaatnya pun tidak akan jauh berbeda dengan fungsi Lazy Load tersebut, yaitu agar speed pra muat halaman pada blog dapat lebih optimal di sisi mesin pencari.

Google ataupun mesin pencari lainnya akan sangat membenci blog yang mempunyai halaman pra muat yang lambat. Di sisi dari konten yang berkualitas, maka sebuah kecepatan pra muat halaman pun akan mempengaruhi SEO blog kamu.

Sederhananya, kamu mempunyai blog dengan konten berkualitas, akan tetapi kecepatan loading blog kamu lambat, maka bukan tidak mungkin beberapa postingan pada blog kamu akan sulit untuk bertengger di halaman awal Google.

PageSpeed Insight adalah acuan google untuk menguji kecepatan setiap blog atau website yang akan mereka pilih dalam hal kecepatan loading. Meskipun Java Script ataupun CSS juga menjadi penentu skor yang dihasilkan PageSpeed Insight, akan tetapi dengan memasang Lazy Load pada blog kamu, maka akan sangat membantu menambah kecepatan dan menaikan skor blog kamu di mata PageSpeed Insight.

Untuk blog atau website yang berbasis Wordpress mungkin akan mudah memasang Lazy Load tanpa harus menyisipkan manual dengan mengandalkan plugin yang ada.

Namun bagaimanakah dengan Blogger/Blogspot yang tidak menyediakan plugin Lazy Load tersebut?

Maka dapat kamu coba dengan menyisipkan script Lazy Load ke dalam editor html blog kamu. 

Berikut adalah langkah sederhana pemasangan Lazy Load pada di Blogspot.

• Seperti biasa, kamu harus masuk ke dalam Editor HTML pada pilihan pengaturan Tema/ Template blog kamu terlebih dahulu.
• Salin script Lazy Load di bawah ini.

<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/AVvXsEgih6GCDdFmBbfcYkUN9Uilbvari75V0Ssu0QoG3PMktTwzheLC0mI2rnPSiKjV-IeskNPVKbfFZusCGqk9-4dPTkGjT5oaGv_4LkHPm_1DZzdCH1cxLblY7iD2AHM8JMjOH8ddmfl8Fw4w/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});

//]]>

</script>

• Dan tempel script Lazy Load tersebut tepat diatas tag </body>. Ctrl+F untuk permudah pencarian tag tersebut pada editor html blog kamu. Dan biasanya tag </body> terdapat di dasar script html.
• Setelahnya dapat kamu save atau simpan Editor HTML.
• Selanjutnya dapat kamu cek skor loading speed setelah pemasangan Lazy Load melalui PageSpeed Insights milik Google.

Itulah cara memasang Lazy Load pada Blogspot, agar blog kamu mendapatkan halaman pra muat yang lebih cepat dibandingkan blog lainnya.

Terlepas dari pentingnya penerapan Lazy Load pada blog, maka dapat kamu baca juga cara mengganti format Jpg menjadi format WebP untuk tiap image yang akan kamu upload ke dalam konten blog kamu.