Cara Membuat Lazyload Gambar di Blogger

Daftar Isi

Memasang Lazyload Gambar di Blogger - Gambar merupakan elemen penting untuk membuat konten artikel di blogger, akan tetapi dengan menggunakan gambar yang ukuran size nya terlalu besar dan banyak, maka loading blog akan terlalu lama.

Menambahkan atribut lazyload gambar dapat membantu meningkat loading yang terlalu lambat menjadi cepat saat pra-muat halaman.

Menggunakan lazyload gambar termasuk dalam optimasi gambar di postingan blogger. Gambar dengan ukuran besar dapat menyebabkan waktu muat halaman yang lambat. Dengan mengoptimasi gambar, menggunakan lazyload ini dapat mengurangi loading yang lambat.

Kamu dapat membaca di postingan ini :

• Optimasi Gambar di Postingan Blogger

Untuk mengoptimasi gambar pada postingan Blogger, kamu dapat melakukan beberapa tindakan. Seperti mengubah ukuran gambar, mengompres gambar, dan menggunakan format gambar yang tepat menjadi webp. Selain itu, menghindari pramuat gambar saat loading diawal yang menguras kuota internet si pengunjung blog, kamu dapat memasang lazyload gambar.

Pengertian Lazyload Gambar

Lazy Loading Gambar merupakan serangkaian cara optimasi untuk meningkatkan performa kecepatan situs dengan menunda pemuatan gambar secara bertahap ketika diperlukan.

Ketika mau mengunjungi halaman web mana pun, saat terjadi pemuatan gambar yang terlalu lama, itu akan membuat jengkel. Nah, situlah peran lazyload untuk mengoptimalkan kecepatan situs web.

Sebenarnya cara kerja lazyload ini menunda pemuatan gambar ketika ada aktivitas scrolling. Jika pengunjung tidak pernah menggulirkan halaman, maka gambar akan tidak terlihat dan tidak akan pernah dimuat.

Manfaat Memasang Lazyload Gambar

Menambahkan atribut lazyload ini mempunyai beberapa kelebihan antara lain;

1. Waktu loading halaman akan lebih cepat, karena gambar akan dimuat ketika adanya aktivitas scroll dari si pembaca.
2. Lazyload gambar dapat mengurangi jumlah data yang perlu diunduh, sehingga dapat membantu pengunjung membuka situs dengan kuota data sedikit ataupun koneksi internet yang lambat.
3. Waktu pra-muat halaman yang lebih cepat, postingan tersebut akan lebih mudah muncul di pencarian google.
4. Pengalaman pengguna yang lebih baik, karena dengan lazyload ini memberikan pengalaman pengguna yang lebih cepat dan lebih responsif.
5. Waktu pemuatan halaman yang lebih cepat dan pengalaman pengguna yang lebih baik dapat mengurangi bounce rate dan meningkatkan jumlah waktu yang dihabiskan pengguna di situs web.

Gimana kamu tertarik untuk memasang lazyload gambar ini. Silahkan ikuti tata cara memasang lazyload dibawah ini.

Cara Memasang Script Lazyload di Blogger

1. Silahkan masuk ke menu Tema dan pilih Edit HTML.
2. Salin javascript dibawah ini, dan tempelkan diatas kode /body.

   <script type='text/javascript'>//<![CDATA[
   document.addEventListener("DOMContentLoaded",function(){var lazyloadImages = document.querySelectorAll("img.lazy");var lazyloadThrottleTimeout;function lazyload (){if(lazyloadThrottleTimeout){clearTimeout(lazyloadThrottleTimeout)}
   lazyloadThrottleTimeout = setTimeout(function(){var scrollTop = window.pageYOffset;lazyloadImages.forEach(function(img){if(img.offsetTop < (window.innerHeight + scrollTop)){img.src = img.dataset.src;img.classList.remove('lazy')}}
   );if(lazyloadImages.length == 0){document.removeEventListener("scroll",lazyload);window.removeEventListener("resize",lazyload);window.removeEventListener("orientationChange",lazyload)}}
   ,20)}
   document.addEventListener("scroll",lazyload);window.addEventListener("resize",lazyload);window.addEventListener("orientationChange",lazyload)}
   );//]]></script>
   

3. Setelah memasang kode javascript tersebut, silahkan buat postingan pada tampilan HTML. Tambahkan gambar dengan kode tag class='lazy' seperti dibawah ini.

   <div class='separator'>
     <img class='lazy' alt='teks_alternatif' title='teks_judul' width='isi_lebar' height='isi_tinggi'
   data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
     <noscript><img alt='teks_judul' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
   </div>
   

Silahkan sesuaikan sendiri kode yang perlu diganti.

Gambar dengan lazyload akan menyebabkan thumbnail akan blank atau tidak muncul apabila kamu menerapkan semua gambar menggunakan lazyload. Kerena browser menggunakan atribut tag src untuk memicu pemuatan gambar.

Sedangkan kita mencantumkan gambar <img src='data:image/png;base64,R0l.....CADs='/> sehingga mengakibatkan gambar thumbnail menjadi tidak muncul. Jadi buat postingan dengan satu gambar tidak memakai atribut lazyload.

Gambar tersebut fungsinya sebagai gambar yang akan muncul saat awal pemuatan halaman, sehingga menjadi placeholder gambar utamanya. Bentuk gambar ini sangat kecil, seperti "harapanku kepada si dia yang bertepuk sebelah tangan, ihiks...". Ukuran gambar ini sekitar 58 b atau 0.058 kb jadi sangat ringan.

Apabila tidak memakai src='data:image/png;base64,R0lG.....AACADs=' maka akan muncul seperti gambar crack atau pecah saat awal pra-muat halaman. Kedua gambar tersebut saling tumpang tindih, ketika awal loading tanpa scroll akan muncul gambar convert-an base64 tersebut dan yang telah dimuat akan muncul gambar utamanya. Jadi, sebenarnya ini adalah cara mengakali pagespeed insight atau GTmetrix agar skornya 90.

Gambar dengan lazyload tidak muncul ketika pengguna menonaktifkan javascript di browsernya. Jadi tambahkan kode <noscript> seperti contoh diatas.

Dibawah ini merupakan contoh cara kerja lazyload pada gambar.

Lazyload Gambar di Setelan Blogger

Cara membuat lazyload gambar otomatis di blogger dengan menggunakan setelan blogger. Penerapannya, silahkan masuk ke setelan > klik pada gambar pemuatan lambat. Maka akan otomatis setiap gambar sudah menerapkan lazyload.

Demikian tentang penerapan lazyload gambar di blogger, kamu dapat mencoba dan menerapkan di blogmu. Cek kecepatan postingan blogmu setelah menerapkan lazyload diatas ke pagespeed insight atau GTmetrix.

Pada template blogger premium sekarang banyak yang sudah terdapat script lazyload gambar, silahkan cek apakah sudah terpasang lazyload atau belum. Kalaupun sudah terpasang silahkan tambahkan kode pemanggil tag class=lazy, mungkin kodenya berbeda-beda setiap templatenya. Jadi tidak perlu menambahkan kode javascript diatas. Nah, paling tidak kamu sudah memahami cara kerja lazyload gambar ini.

Terima kasih telah berkunjung dan membaca di blog saya.