GSC: Bagaimana menggunakan Lazy Loading di blog agar blog fast respon

Membahas lazy loading + Script

GSC: Bagaimana menggunakan Lazy Loading di blog agar blog fast respon- Teknik Lazy Loading adalah teknik pemrograman web yang memungkinkan gambar dan konten lainnya dimuat hanya saat dibutuhkan. Dengan menggunakan teknik ini, halaman web dapat memuat lebih cepat karena tidak perlu memuat semua gambar dan konten sekaligus. Teknik ini sangat berguna bagi blogger yang ingin meningkatkan kecepatan dan kinerja situs web mereka. Berikut ini adalah solusi, tutorial, dan tips untuk mengimplementasikan teknik Lazy Loading pada blog Anda.

Solusi untuk Implementasi Teknik Lazy Loading

1. Gunakan Plugin: Salah satu cara termudah untuk mengaktifkan teknik lazy loading pada blog Anda adalah dengan menggunakan plugin. Ada banyak plugin yang tersedia untuk platform blog seperti WordPress, Blogger, dan Wix. Beberapa plugin populer untuk WordPress termasuk WP Rocket, Lazy Load XT, dan BJ Lazy Load.

2. Implementasi Manual: Jika Anda lebih suka mengimplementasikan teknik lazy loading secara manual, Anda dapat melakukannya dengan menggunakan JavaScript atau CSS. Ini mungkin memerlukan beberapa pengetahuan tentang kode HTML dan CSS, tetapi banyak sumber daya online tersedia untuk membantu Anda.

Tutorial Implementasi Teknik Lazy Loading

1. Langkah pertama adalah memilih plugin lazy loading atau membuat script Anda sendiri. Untuk menginstal plugin, cari plugin lazy loading di bagian pengaturan plugin pada platform blog Anda dan pasang. Jika Anda memilih untuk membuat script sendiri, gunakan kode JavaScript atau CSS dan tambahkan ke dalam file HTML Anda.

2. Setelah menambahkan plugin atau script, pastikan bahwa konfigurasi benar dengan memeriksa pengaturan plugin atau script untuk melihat apakah ada opsi untuk mengonfigurasi teknik lazy loading.

3. Selanjutnya, uji situs web Anda dengan menggunakan alat pengujian kecepatan seperti Google PageSpeed Insights atau GTmetrix. Periksa apakah semua gambar dan konten dimuat dengan benar sesuai yang diinginkan.

Tips Implementasi Teknik Lazy Loading

1. Pastikan untuk memilih plugin yang cocok dengan platform blog Anda. Beberapa plugin mungkin tidak kompatibel dengan beberapa platform blog.

2. Jika Anda memilih untuk membuat script sendiri, pastikan untuk mengetahui kode JavaScript atau CSS dengan baik untuk menghindari kesalahan dalam implementasi.

3. Uji situs web Anda dengan menggunakan alat pengujian kecepatan seperti Google PageSpeed Insights atau GTmetrix untuk memastikan teknik lazy loading telah diimplementasikan dengan benar.

4. Jangan gunakan teknik lazy loading pada gambar yang ukurannya kecil karena proses ini malah akan memperburuk performa halaman web.

Dengan mengikuti solusi, tutorial, dan tips di atas, Anda dapat mengimplementasikan teknik Lazy Loading pada blog Anda dengan mudah. Hal ini akan meningkatkan kecepatan halaman web dan memperbaiki skor Lighthouse Core Web Vitals pada elemen LCP serta meningkatkan pengalaman pengguna yang lebih baik.

ada banyak script JavaScript yang tersedia untuk mengimplementasikan teknik lazy loading pada gambar dan konten lainnya. Berikut beberapa contoh script untuk teknik lazy loading:

1. Lazy Load:

Lazy Load adalah script lazy loading yang ringan dan mudah digunakan. Script ini memuat gambar dan konten hanya ketika mereka muncul dalam pandangan pengguna. Anda dapat menginstal plugin Lazy Load atau menggunakan kode JavaScript langsung ke file HTML Anda.

2. Unveil.js:

Unveil.js adalah script JavaScript open source yang memuat gambar dan konten secara dinamis saat mereka muncul dalam pandangan pengguna. Script ini bekerja dengan cepat dan efisien tanpa mempengaruhi kinerja halaman web. Anda dapat menambahkan script ini ke situs web Anda dengan menggunakan tag script di bagian head dari file HTML Anda.

3. LazyLoadXT:

LazyLoadXT adalah script lazy loading yang mendukung banyak jenis gambar dan format konten lainnya, termasuk video dan iframe. Script ini juga dapat dikonfigurasi untuk berfungsi dengan platform blog dan CMS populer seperti WordPress dan Drupal.

4. Echo.js:

Echo.js adalah script JavaScript yang memuat gambar dan konten secara lazy loading melalui data-echo atribut pada tag img. Script ini mendukung pembatasan jarak tampilan, toleransi jaringan, dan proxy server, serta dapat disesuaikan dengan konfigurasi situs web Anda.

Ada banyak script lazy loading lainnya yang tersedia di luar sana, dan pilihan terbaik akan tergantung pada kebutuhan khusus situs web Anda. Pastikan untuk membaca dokumentasi dan ulasan sebelum memilih script lazy loading untuk situs web Anda.

Berikut ini adalah contoh kode JavaScript untuk mengimplementasikan teknik lazy loading pada gambar di blog Anda:

javascript

document.addEventListener("DOMContentLoaded", function() {

  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {

    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

      entries.forEach(function(entry) {

        if (entry.isIntersecting) {

          let lazyImage = entry.target;

          lazyImage.src = lazyImage.dataset.src;

          lazyImage.classList.remove("lazy");

          lazyImageObserver.unobserve(lazyImage);

        }

      });

    });

    lazyImages.forEach(function(lazyImage) {

      lazyImageObserver.observe(lazyImage);

    });

  } else {

    // Fallback for browsers that don't support IntersectionObserver

    let lazyloadThrottleTimeout;

    LazyLoad();

    function LazyLoad() {

      if (lazyloadThrottleTimeout) {

        clearTimeout(lazyloadThrottleTimeout);

      }

      lazyloadThrottleTimeout = setTimeout(function() {

        let scrollTop = window.pageYOffset;

        lazyImages.forEach(function(lazyImage) {

          if (lazyImage.offsetTop < (window.innerHeight + scrollTop)) {

            lazyImage.src = lazyImage.dataset.src;

            lazyImage.classList.remove('lazy');

          }

        });

        if (lazyImages.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);

  }

});

Penjelasan singkat dari kode di atas adalah sebagai berikut:

- Pertama-tama, kode tersebut menyeleksi semua elemen gambar dengan class "lazy".

- Kemudian, kode tersebut menguji apakah browser yang digunakan mendukung IntersectionObserver. Jika iya, maka kode akan menggunakan IntersectionObserver untuk memuat gambar secara lazy loading.

- Jika browser tidak mendukung IntersectionObserver, maka kode akan menggunakan teknik fallback dengan menambahkan event listener untuk scroll dan resize sehingga gambar dimuat ketika pengguna melakukan scroll atau resize pada halaman.

Untuk menggunakan kode tersebut di blog Anda, pastikan untuk menambahkan class "lazy" pada tag img yang ingin Anda muat secara lazy loading. Misalnya:

html

<img class="lazy" data-src="gambar1.jpg" alt="Gambar 1">

Dengan menggunakan script lazy loading seperti ini, blog Anda akan menjadi lebih ringan karena hanya memuat gambar ketika dibutuhkan dan tidak membebani kinerja situs web secara keseluruhan.

Berbagi :