Cara Menambahkan Lazy Loading di Blogger

Kecepatan website merupakan salah satu faktor penting dalam strategi SEO dalam menentukan peringkat diSERP. Sebagai blogger menambahkan Lazy loading dihalaman, bisa dikatakan wajib dilakukan untuk menaikkan performa kecepatan website.

Apabila Anda ingin Menambahkan Lazy Loading di Blogger? Ikuti langkah-langkah di bawah ini dengan hati-hati dan berurutan, untuk menikmati situs web yang lebih cepat.

Pertama mari kita pahami apa itu Lazy Load dan bagaimana cara meningkatkan kecepatan situs web.

Apa itu Lazy Load?

Lazy Loading adalah pola yang biasa digunakan untuk mempercepat pemuatan halaman web dengan memuat gambar dan video, setelah halaman web penuh dimuat atau digulir kebawah oleh pengguna. Jika Anda menggunakan Lazy loading di situs Anda, hanya gambar di atas yang akan dimuat, Saat pengguna menggulir halaman, baru kemudian sisa gambar akan dimuat setelahnya.

Secara teknis, Lazy loading berfungsi lebih baik menggunakan JavaScript yang menyesuaikan area pandang pengunjung Anda saat ini dan hanya memuat gambar yang terlihat oleh mereka.

Lazy load adalah skrip yang dimasukkan ke dalam kode halaman, hanya berlaku saat pengunjung mencapai gambar Anda atau mereka menggulir ke bawah halaman. Jika mereka tidak mengakses gambar, maka gambar yang berada dihalaman bawah tidak perlu dimuat.

Keuntungan dan kekurangan Lazy load

Keuntungan dari lazy load antara lain:

• Mengurangi waktu muat awal – Lambat memuat laman web mengurangi bobot laman, memungkinkan waktu muat laman lebih cepat .
• Konservasi bandwidth – Lazy loading menghemat bandwidth dengan mengirimkan konten ke pengguna hanya jika diminta.
• Konservasi sumber daya sistem – Lazy loading menghemat sumber daya server dan klien, karena hanya beberapa gambar, JavaScript, dan kode lain yang benar-benar perlu dirender atau dieksekusi.
• Lazy Loading memberikan keseimbangan antara mengoptimalkan pengiriman konten dan menyederhanakan pengalaman pengguna.
• Karena pemuatan halaman yang lebih cepat, menghasilkan konversi yang lebih baik dan pendapatan yang lebih tinggi untuk situs e-niaga.
• Penggunaan lebih sedikit bandwidth, yang berarti penghematan biaya.

Beberapa kekurangan dari Lazy Loading adalah sebagai berikut:

• Penggunaan Javascript untuk mengimplementasikan lazy loading, dikombinasikan dengan kode yang ada, membuatnya lebih rumit dan menambah memory.

• Pengindeksan konten yang tidak dimuat dengan benar terkadang dapat memengaruhi peringkat situs web di mesin telusur.

Selain itu, situs web memuat dengan sangat cepat untuk pemuatan lambat dan pada saat yang sama memberikan kepuasan kepada pelanggan. Jenis skrip pemrograman ini secara langsung membantu dalam meningkatkan kecepatan pemuatan situs web dan membuat situs web tersebut lebih memungkinkan pengguna untuk tetap berada di situs web tersebut dan akibatnya tingkat konversi meningkat.

Penggunaan script Ini akan menghemat bandwidth pengguna anda, karena mereka tidak perlu mengunduh semua gambar yang ada dihalaman Anda; Selain itu, pengguna dapat menelusuri situs Anda lebih cepat.

Lazy loading adalah cara yang bagus untuk mengoptimalkan kinerja yang dirasakan secara aktual.

Pengaruh Lazy Loading pada SEO

Google selalu menganjurkan penerbit untuk meningkatkan kecepatan situs web mereka. Mereka selalu merilis banyak alat dan artikel untuk membantu pemilik situs web meningkatkan kecepatan situs mereka. Untuk meningkatkan kecepatan situs web, Google menyarankan untuk menunda pemuatan gambar di luar layar.

Hal ini dimungkinkan dengan penggunaan Teknik Lazy Loading. Karena gambar biasanya merupakan bagian terbesar dari halaman web dan yang berdampak besar pada kecepatan dan SEO suatu situs web.

Secara umum, Google selalu mengadopsi kerahasiaan mengenai faktor peringkat. Namun, terkait kecepatan situs, Google secara terbuka menyatakan bahwa kecepatan situs merupakan faktor peringkat untuk penelusuran seluler. Teknologi pemuatan lambat adalah skrip yang berguna untuk membuat situs memuat lebih cepat di perangkat seluler.

Langkah Menambahkan Lazy Loading 

Langkah 1. Pertama, masuk ke dasbor Blogger yaitu Blogger.com .

Langkah 2. Buka Bagian Tema dan Klik Tombol Edit HTML.

Langkah 3. Salin kode Javascript 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://3.bp.blogspot.com/-xtM_7x0_cU4/XIok1BisovI/AAAAAAAAPUc/QGJpBJZ3QBM_Spkd9r3-SMurEUbRI1pOQCLcBGAs/s10/loadingku.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>

Langkah 4. Temukan tag </body> dan tempelkan kode Javascript yang telah dicopy di atasnya. 

Langkah 5.  Kemudian klik Tombol Simpan.

Sekarang Anda telah berhasil mengimplementasikan lazy loading di website blogger Anda. Anda dapat memeriksa apakah itu berfungsi atau tidak di Google Page Speed ​​Insights .

Sebelum menerapkan Lazy Loading di halaman Anda, Anda harus mempertimbangkan pro dan kontra dengan hati-hati untuk pemrograman dan pengguna situs web Anda.

Kesimpulan

Terakhir, lazy loading adalah strategi hebat yang sangat mengurangi waktu pemuatan awal aplikasi web. Namun, untuk menggunakan strategi ini, sebagai perancang web, penting untuk menyadari dengan baik efek negatifnya saat mengembangkan pemrograman apa pun.

Aplikasi yang tepat dan bermanfaat akan memastikan pengalaman pengguna yang lebih baik. Penting untuk memiliki konten web yang terorganisir dengan baik untuk pengalaman menjelajah yang baik. Teknologi Lazy Loading mempercepat pemuatan situs web, sekaligus menghemat bandwidth.

Terima kasih telah membaca