Atribut Loading="Lazy" Support Untuk Tag IMG dan IFRAME

Atribut loading="lazy" adalah manipulator proses pemuatan gambar dan iframe di situs web dengan tujuan untuk mengurangi data yang digunakan untuk memuat gambar dan iframe tersebut serta mempercepat waktu interaktif atau time to interactive (TTI).

Dukungan browser terhadap loading="lazy" attribute juga tergolong sudah cukup baik, web.dev menyebutkan loading="lazy" attribute telah didukung oleh browser chrome 77, firefox 75, edge 79, dan safari 15.4.

Besar kemungkinan di masa depan atribut loading="lazy" akan di dukung oleh semua browser modern sehingga kita dapat dengan mudah menerapkan efek lazy loading pada elemen img dan iframe di situs web.

Cara Menggunakan Attribute loading="lazy"

[ads id="ads1"] Penggunaan loading="lazy" attribute pada tag <img> dan <iframe> tergolong cukup mudah, kita hanya perlu menambahkan atribut loading="lazy" setelah atribut src="url" pada element <img> dan <iframe> seperti contoh berikut ini.

Contoh Menerapkan Lazy Loading Pada Elemen IMG

<img src="image-url"
  loading="lazy"
  height="360" 
  width="640"/>

Contoh Menerapkan Lazy Loading Pada IFRAME

<iframe src="https://contoh.com/video.mp4"
        loading="lazy"
        width="640"
        height="360"></iframe>

Sangat sederhana bukan, sisanya browser yang akan bekerja (medeteksi) semua alemen <img> dan <iframe> dengan loading="lazy" attribute, kemudian menunda pemuatan elemen tersebut hingga semua sumber daya penting (critical resources) di halaman web selesai dimuat.

Dengan demikan waktu yang dibutuhkan untuk memuat halaman web dan waktu interaktif (time to interactive) menjadi lebih cepat beberapa kibibyte (KiB) dibandingkan ketika sebelum menggunakan atribut loading="lazy".