Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Memasang Lazy Load di Blog + Dampak Terhadap SEO

Pada postingan sebelumnya, kita telah membahas bagaimana cara meningkatkan kecepatan website dengan langkah yang sederhana. Adapun kali ini seperti judul yang telah Anda lihat di atas, kita akan menyampaikan cara memasang lazy load di blog, sekaligus menjelaskan dampak yang ditimbulkan terhadap SEO.

cara memasang lazy load di blog
cara memasang lazy load di blog

Namun sebelum masuk ke pembahasan utama, alangkah baiknya jika kita juga mengenal secara umum, apa sih yang dimaksud dengan lazy load itu? Baik! Untuk lebih jelasnya, mari langsung saja simak penjelasan selengkapnya di bawah ini.

Apa itu Lazy Load?

Secara sederhana, lazy load adalah sebuah plugin/script yang bertugas menunda loading image pada sebuah halaman, hingga terjadinya aktivitas langsung antara image dengan layar perangkat. Intinya sih, lazy load ini berfungsi menunda pemanggilan file image/video, sehingga proses pemuatan konten pada halaman menjadi lebih cepat.

Fungsi Lazy Load?

Secara fungsi, tujuan memasang lazy load adalah untuk meningkatkan kecepatan blog atau website, sehingga memberi dampak user experience (pengalaman pengguna) yang lebih baik dan positif. Sebagaimana kita ketahui bersama, kecepatan loading website telah menjadi salah satu indikator di dalam optimasi SEO.

Cara Memasang Lazy Load di Blogspot

Anda bisa ikuti tutorial cara di bawah ini untuk aktivasi lazy load di blog. 

1. Masuk ke Menu Edit HTML

Langkah pertama yang perlu Anda lakukan untuk memasang lazy load blog adalah masuk ke menu edit HTML. Masuklah ke dashboard – pilih menu theme (tema) – ketik tanda titik tiga – pilih menu edit HTML.

2. Copy Script Lazy Load Blog

<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://1.bp.blogspot.com/-Ge7CuMYvGd4/Xo0_-_5w16I/AAAAAAAABn8/uPmMqvND6W0sPa1TKhxLtlK4GkgmDC4_gCLcBGAsYHQ/s1600/bisablog-loading.png",effect:"fadeIn",threshold:"-50"})}); //]]>
</script>
Silahkan copy script plugin di atas.

3. Masukan Tepat di atas tag </body>

Setelah mengcopy script di atas, Anda bisa memasukan script lazy load blog tepat di atas tag </body>. Gunakan pencarian halaman dengan CTRL+F untuk mencari tag tersebut. Namun umumnya, tag </body> tersebut berada di bagian bawah script template. 

4. Simpan

Setelah selesai mempaste script lazy load ke dalam tema, klik simpan. Tunggu loading hingga selesai, sampai script benar-benar berhasil disimpan.

Selesai.

Dampak Setelah Memasang Lazy Load Blogspot

Berdasarkan pengalaman saya pribadi saat mencoba memasang lazy load blog ini, terjadi penambahan kecepatan saat memuat halaman. Hanya saja, peningkatan speed yang terjadi tidak berdampak besar, melainkan hanya beberapa persen saja saat dilakukan pengecekan melalui tools uji kecepatan web. 

Memasang Lazy Load di WordPress

Bagi Anda yang menggunakan platform WordPress, tentu cara pemasangan lazy load sedikit berbeda dengan cara memasang lazy load di blogger. Bagaimana caranya?
Cara memasang lazy load di WordPress cukup mudah. Tersedia banyak plugin lazy load gratis yang bisa Anda install di website kesayangan Anda. Seperti : Lazy Load by WP Rocket, BJ Lazy Load, A3 Lazy Load, Lazy Loader, dan Zedna WP Image Lazy Load. Tentu saja, ini hanya sebagian kecil dari banyaknya jenis plugin yang menawarkan fitur lazy load. 

Dampak Lazy Load Terhadap SEO

Jika berbicara korelasi antara lazy load dengan SEO secara langsung, mungkin tidak ada hubungannya. Namun jika berbicara dampak lazy load terhadap SEO, maka hal tersebut tentu memiliki nilai SEO dari aspek peningkatan user experience. Sebagaimana kita ketahui, kecepatan loading website telah menjadi salah satu indikator dalam optimasi SEO. 

Oleh karenanya, upaya aktivasi lazy load di blog, secara tidak langsung telah mengambil andil dalam optimasi SEO. 

Kesimpulan

Memasang lazy load di blogspot atau WordPress berguna untuk meningkatkan kecepatan loading website. Cara kerjanya pun sederhana, yaitu menunda loading file image atau video pada sebuah halaman web, hingga terjadi interaksi langsung antara file image dengan layar perangkat.

Mungkin ini saja yang bisa kami hadirkan seputar cara memasang lazy load blog atau website. Semoga tulisan ini dapat bermanfaat dan membantu pembaca di mana pun Anda berada. Jangan lupa! Dukung perkembangan website SEO Kilat dengan membagikan artikel lazy load ini di sosial media Anda.Terima kasih dan sampai jumpa.

Update:
Bagi para pemula yang masih bingung, apakah mengganti template blog dapat menurunkan peringkat SEO, Anda bisa baca artikel selengkapnya di : Dampak Mengganti Template Blog Terhadap SEO
Akhbar Sanusi
Akhbar Sanusi Pendiri SEO Kilat, penulis e-book SEO Storm Resistant, desainer, dan kontributor konten SEO.