Mempercepat Blog dengan Image Lazy Loading

Lazy Loading

Ask.web.id - Berkenalan dengan lazy loading untuk mengoptimalkan web dan blog supaya loading web lebih cepat. Dengan begitu pengunjung blog tidak lagi menunggu lama untuk melihat isi konten yang akan mereka baca.

Contoh: jika suatu blog atau website menambahkan 10 gambar + 1 video saja pada artikel yang mereka buat, ditambah 6 gambar dibagian related posts, lalu gambar tadi tanpa di optimasi dan tanpa menggunakan lazy loading. Saya pastikan pengunjung blog kamu akan lebih lama menunggu dan mungkin mereka akan membatalkan untuk membaca atau malah mencari blog lain.

Nah, untuk mencegah pengunjung pada contoh di atas, kamu bisa menambahkan script lazy loading. Script ini bisa digunakan untuk "Image" dan "Iframe".

Ari Lazy Loading?

Lazy loading adalah pola desain yang umum digunakan dalam pemrograman komputer dan sebagian besar dalam desain dan pengembangan web untuk menunda inisialisasi suatu objek hingga titik di mana objek itu dibutuhkan. Ini dapat berkontribusi pada efisiensi dalam operasi program jika digunakan dengan benar dan tepat. Source: Wikipedia

Arti dan contoh sederhana-nya begini: Misalkan dalam artikel blog yang kamu buat ada 5 gambar atau lebih, sementara di layar desktop atau layar smartphone kamu yang pertama kali di tampilakan hanya 1. Nah, sisanya itu yang ditunda untuk di download oleh web browser. Nanti jika pengunjung scroll ke bawah sampai ke objek gambar yang sisa-nya tadi baru akan di download lalu di tampilkan.

Dari gambar diatas kamu bisa mengerti, dengan desain web tersebut objek images yang terlihat pertama di layar ada satu, sisa yang ada dibawah itu yang belum di ambil (download) oleh web browser. Itulah cara kerja loading="lazy".

Cara Menggunakan Lazy Loading

Cara mempercepat blog dengan lazy loading sangat mudah, kita hanya perlu menambahkan tag loading="lazy" pada objek yang akan kita lazy load. Ini cara paling baik dan optimal, dan untuk menggunakan lazy loading ini tanpa perlu tambahan javascript atau pun jquery.

Penting: kode loading=lazy tersedia untuk web browser terbaru, entah itu mozilla firefox, google chrome, atau yang lainnya. Jika kamu ingin agar lazy loading bisa untuk semua web browser, bisa coba dengan cara menggunakan lazy load dengan javascript, yang bisa dilihat caranya dibawah.

Ok, disini saya akan coba menggunakan lazy loading pada image dan iframe, agar speed blog kita lebih bagus dan optimal untuk pengunjung dan robot google, bing, dan yandex.

Image Lazy Loading

Untuk menggunakan lazy loading gambar (image) kita bisa langsung menambahkan kode lazy load pada tag html image seperti ini:

<img src="gambar.jpg" width="340" height="340" loading="lazy">

Atau bisa dengan menambahkan image base64, lihat kode berikut:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="340" height="340" srcset="gambar.jpg" loading="lazy">

Coba dengan menambahkan kode responsive media queries ini:

<picture>
	<source media="(max-width: 769px)" srcset="ukuran-gambar.jpg 1x, ukuran-gambar.jpg 2x">
	<img src="gambar.jpg" loading="lazy">
</picture>

Kamu boleh pilih 3 kode html image dengan lazy loading diatas, silakan gunakan dan sesuaikan dengan kebutuhan masing-masing.

Iframe Lazy Loading

Lazy loading untuk iframe tidak kalah penting untuk mempercepat speed blog kamu. Apabila dalam artikel yang kamu buat menambahkan sebuah iframe, bisa di coba dengan menggunakan kode lazy load.

Cara menambahkan lazy loading pada iframe bisa coba kode berikut. Contoh saya akan embed video youtube:

<iframe src="http://www.youtube.com/embed/idyt" width="561" height="316" frameborder="0" allowfullscreen loading="lazy"></iframe>

Hanya dengan menambahkan kode loading="lazy" pada image dan iframe kamu sudah memiliki web atau blog dengan speed loading yang bagus.

Ingat: saya ingatkan lagi, menggunakan loading=lazy diatas hanya untuk web browser versi terbaru. Alernative browser versi lawas bisa dengan cara dibawah ini.

JavaScript Lazy Loading

Supaya lazy loading support semua browser, kamu boleh menggunakan cara alternative ini. Caranya hampir sama, hanya saja kamu membutuhkan javascript library tambahan. Tapi tenang sob, caranya tidak sulit hanya perlu copy paste kode berikut saja.

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Kode javascript lazy loading di atas silakan copy, lalu paste-kan ke template atau tema blog kamu. Letakan kode tersebut dibagian <head>, atau bisa juga di simpan dibawah halaman template sebelum kode </body> agar tidak mengurangi kecepatan loading blog kamu.

Setelah kamu berhasil memasang kode javascript lazy load pada template atau tema web, sekarang untuk cara memasang lazy load pada image silakan gunakan kode ini.

<img data-src="gambar.jpg" loading="lazy" class="lazyload">

Lihat kode di atas, yang biasanya src ganti dengan data-src agar lazy loading berfungsi dengan baik.

Gunakan lazy loading dengan tepat agar blog kamu lebih cepat di akses oleh semua pengunjung dan robot. Coba juga setelah memasang loading lazy tes kecepatan speed blog di pagespeed instights, atau GTMetrix.

Smoga artikel Cara Mempercepat Blog dengan Lazy Loading bisa bermanfaat untuk pengujung semua, jangan lupa support dan cendolnya gan. Hehee