Cara Mempercepat Loading Blog dengan Script Lazy Load

Table of Contents

Kecepatan loading halaman blog atau website menjadi faktor yang semakin penting. Kecepatan loading tidak hanya memengaruhi pengalaman pengguna, tetapi juga berpengaruh pada peringkat SEO On-Page blog Anda. Salah satu teknik efektif untuk mempercepat loading halaman adalah dengan menggunakan script lazy load gambar. Artikel ini akan membahas cara menerapkan lazy load pada Blogger untuk meningkatkan performa blog Anda.

Mengapa Kecepatan Loading Blog Penting?

Kecepatan loading halaman web sangat penting untuk berbagai alasan:

1. Pengalaman Pengguna: Pengunjung cenderung meninggalkan halaman yang memakan waktu lebih dari beberapa detik untuk dimuat.

2. SEO On-Page: Google menggunakan kecepatan halaman sebagai salah satu faktor penentu peringkat di hasil pencarian.

3. Konversi: Situs yang lebih cepat cenderung memiliki tingkat konversi yang lebih tinggi, baik itu dalam bentuk pembelian, pendaftaran, atau interaksi lainnya.

Apa Itu Lazy Load?

Lazy load adalah teknik yang menunda pemuatan gambar dan elemen non-esensial lainnya hingga elemen tersebut diperlukan, misalnya saat pengunjung menggulir halaman. Dengan cara ini, halaman dapat dimuat lebih cepat karena hanya elemen yang terlihat di layar yang dimuat terlebih dahulu.

Manfaat Script Lazy Load di Blogger

- Mengurangi Waktu Loading: Hanya elemen di viewport yang dimuat.

- Menghemat Bandwidth: Pengguna tidak perlu mengunduh gambar yang tidak mereka lihat.

- Meningkatkan Performa: Mengurangi beban server dan mempercepat waktu respon.

Cara Memasang Script Lazy Load di Blogger

Berikut adalah langkah-langkah detail untuk menerapkan lazy load pada gambar di platform Blogger:

Langkah pertama adalah menambahkan script lazy load ke dalam template Blogger Anda. Script ini akan menangani pemuatan gambar secara lazy. Langkah-langkah Cara Memasang Script Lazy Load di Blogger:

1. Buka Blogger dan masuk ke dasbor blog Anda.

2. Navigasi ke Tema dan pilih Edit HTML.

3. Temukan bagian `</body>` dalam kode HTML.

4. Tambahkan script berikut sebelum `</body>`:

<script type='text/javascript'> //<![CDATA[
// Fast 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/AVvXsEiJ8Nz7nZu7vR0B36IXyxbhgT80RtLW1z1kvplLlwv4Rqn-28-oPxzxCyEoArEdcDInec-9Wq8CZeMko7HPGL_wkd_2Kc71xwr3UOUcjOARgMeiCSG7rsb-_lcYE4eYaAzrov00umixelU/s1600/bisablog-loading.png",effect:"fadeIn",threshold:"-50"})}); //]]>
</script>

Berikut Hasil GTMetrix Menggunakan Script Lazy Load di Blogger 

Mengimplementasikan Script lazy load pada gambar di Blogger adalah langkah yang sederhana namun efektif untuk meningkatkan kecepatan loading halaman dan memperbaiki pengalaman pengguna. Dengan mengikuti langkah-langkah di atas, Anda dapat memastikan bahwa blog Anda tidak hanya terlihat menarik tetapi juga berkinerja optimal.