Cara mengaktifkan gambar Lazyloading di halaman Blogspot

Di era kecepatan internet dan pengalaman pengguna menjadi faktor penentu, optimasi situs web sangatlah penting. Salah satu teknik optimasi yang sederhana namun efektif adalah mengaktifkan Lazyloading untuk gambar. Dalam artikel ini, saya akan memandu Anda langkah demi langkah secara terperinci tentang cara mengaktifkan Lazyloading gambar di Blogspot untuk meningkatkan pengalaman pengguna, meningkatkan kecepatan pemuatan halaman, dan membuat situs web Anda lebih profesional.

Apa itu Lazyloading?

Lazyloading adalah teknik pengoptimalan yang menunda pemuatan gambar dan konten multimedia hingga pengguna menggulir ke tempat gambar dan konten tersebut muncul. Hal ini mengurangi waktu pemuatan awal halaman, mengoptimalkan bandwidth, dan meningkatkan kecepatan keseluruhan. Saat Lazyloading diaktifkan, gambar dimuat hanya saat dibutuhkan, yaitu saat pengguna benar-benar melihatnya, alih-alih memuat seluruh gambar saat situs web dibuka.
Manfaat Lazyloading untuk Blogspot Anda

Meningkatkan kecepatan memuat halaman: Kecepatan memuat halaman yang cepat tidak hanya meningkatkan pengalaman pengguna tetapi juga meningkatkan waktu yang dihabiskan pengguna di halaman.
Optimasi SEO: Google memprioritaskan halaman dengan waktu pemuatan cepat, membantu meningkatkan peringkat pencarian.
Penghematan bandwidth: Lazyloading secara signifikan mengurangi jumlah data yang harus diunduh browser pengguna, terutama pada halaman dengan banyak gambar.
Pengalaman pengguna yang lebih baik: Tidak ada lagi jeda halaman karena memuat terlalu banyak konten sekaligus, pengguna akan merasa lebih lancar saat menjelajahi halaman.

Cara mengaktifkan Lazyloading gambar di Blogspot

Akses ke admin Blogspot

Pertama, Anda perlu masuk ke halaman admin Blogspot Anda. Di sini, kita akan mengedit kode HTML untuk mengaktifkan Lazyloading untuk gambar.
Buka Blogspot Anda.
Di sisi kiri, pilih Tema.
Klik Edit HTML untuk membuka editor kode sumber situs web.

Tambahkan kode Lazyloading ke Blogspot

Lazyloading bukanlah fitur bawaan Blogspot, tetapi kita dapat menambahkannya secara manual dengan memasukkan kode JavaScript sederhana di akhir halaman HTML.
Di editor HTML, gunakan Ctrl + F dan temukan tag </body>.
Masukkan kode JavaScript berikut tepat sebelum tag </body>:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var lazyloadImages = document.querySelectorAll("img.lazy");
    
    if ("IntersectionObserver" in window) {
      let observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            let image = entry.target;
            image.src = image.dataset.src;
            image.classList.remove("lazy");
            observer.unobserve(image);
          }
        });
      });
      lazyloadImages.forEach(function(img) {
        observer.observe(img);
      });
    } else {
      let lazyloadThrottleTimeout;
      function lazyload() {
        if (lazyloadThrottleTimeout) {
          clearTimeout(lazyloadThrottleTimeout);
        }
        lazyloadThrottleTimeout = setTimeout(function() {
          let 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>

Ubah atribut tag <img> untuk mengaktifkan Lazyloading

Sekarang Anda perlu mengedit tag gambar di postingan atau template Blogspot Anda agar berfungsi dengan Lazyloading.
Misalnya, tag <img> biasa terlihat seperti ini:

<img src="https://example.com/image.jpg" alt="Mô tả hình ảnh">

Anda perlu mengubah tag ini menjadi:

<img class="lazy" data-src="https://example.com/image.jpg" alt="Mô tả hình ảnh">

Perhatikan perbedaannya:

class="lazy": Menambahkan kelas lazy untuk menentukan bahwa ini adalah gambar yang akan menerapkan lazyloading.
data-src: Ganti atribut src dengan data-src. Ini memastikan gambar tidak akan dimuat di awal, hanya saat kode JavaScript memicu pemuatan gambar saat dibutuhkan.

Periksa Hasil Lazyloading

Setelah Anda selesai menambahkan kode JavaScript dan memperbarui tag <img>, Anda harus menguji hasilnya. Buka halaman Blogspot Anda dan coba gulir untuk melihat gambar hanya dimuat saat Anda menggulirnya.
Jika semuanya berfungsi dengan benar, Anda telah berhasil mengaktifkan Lazyloading untuk Blogspot!

Cara mengaktifkan gambar Lazyloading di halaman Blogspot

Catatan saat mengaktifkan Lazyloading untuk Blogspot

Pilih gambar untuk menerapkan Lazyloading: Lazyloading tidak boleh diterapkan ke semua gambar, terutama gambar di bagian atas halaman. Gambar utama harus segera dimuat untuk memastikan pengalaman pengguna.
Uji di beberapa perangkat: Pastikan Lazyloading berfungsi dengan baik di komputer dan perangkat seluler. Anda dapat menggunakan alat pengembang browser (DevTools) untuk memeriksa kinerja.
Optimalkan untuk SEO: Selain mengaktifkan Lazyloading, pastikan semua gambar di Blogspot Anda memiliki tag alt lengkap untuk meningkatkan pengoptimalan SEO.

Menyimpulkan

Mengaktifkan Lazyloading di Blogspot adalah cara sederhana namun efektif untuk mengoptimalkan kecepatan pemuatan halaman dan meningkatkan pengalaman pengguna. Artikel ini telah memandu Anda secara terperinci dan mudah dipahami sehingga Anda dapat langsung melakukannya tanpa harus memiliki pengetahuan mendalam tentang pemrograman. Terapkan hari ini untuk merasakan perubahan positif yang dibawa Lazyloading ke situs web Anda!

Tutorial Blog Tuan