Ditulis oleh: Ditulis pada: 7/30/2020
Kini Browser Mendukung Lazyload Image dan Iframe - Semakin meningkatnya penggunaan smartphone dan meningkatnya akses internet dengan smartphone, maka konsumsi bandwidth untuk meminimalkan penggunaan data semakin diperhatikan, khususnya oleh para pengembang browser.
Kabar baiknya, Google melalui web.dev telah mengumumkan bahwa mulai Chrome 76 sudah mendukung lazyload untuk gambar secara default. Begitu pun untuk semua browser yang berbasis Chromium seperti Edge dan Opera. Kemudian Firefox pun ikut mendukung lazy load image ini, sementara untuk Safari masih dalam progres.
Kemudian baru-baru ini dukungan untuk iframe juga menyusul ditambahkan, sehingga kini sudah mendukung lazyload untuk keduanya baik image maupun iframe.
Lazyload Image dan Iframe
Seperti kita ketahui bahwa gambar adalah jenis aset yang paling banyak diminta dalam sebuah halaman oleh sebagian besar situs web dan biasanya memakan lebih banyak bandwidth daripada sumber daya lainnya. Begitupun dengan iframe yang memuat sumber dari pihak lain.
Dengan lazyload, browser akan memuat gambar atau iframe yang benar-benar terlihat oleh pengunjung terlebih dahulu, sementara untuk gambar atau iframe lainnya yang tidak terlihat akan dimuat ketika pengunjung menggulung layar ketika gambar atau iframe mendekati daerah terlihat.
Sehingga dengan lazyload ini akan menghemat data, mempercepat pemuatan bagian lain halaman, dan juga mengurangi penggunaan memori.
Sebelumnya kita juga sudah mengenal lazyload image dan iframe ini dengan menggunakan perpustakaan eksternal seperti Lazysizes.js atau menggunakan intersection observer API.
Dengan dukungan browser untuk lazyload ini, maka kita tidak akan memerlukan bantuan perpustakaan pihak ketiga lagi, sehingga akan lebih menghemat penggunaan sumber daya pihak lain.
Untuk mendapatkan dukungan lazyload dari browser ini, kita harus menambahkan atribut loading="lazy" pada HTML image dan iframe seperti berikut ini.
<img src="image.png" loading="lazy" alt="…" width="200" height="200"><iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>Menambahkan Atribut dengan Javascript
Jika Anda malas untuk menambahkan atribut loading="lazy" pada image, Anda bisa menggunakan javascript berikut ini, simpan di atas </body>
<script>
//<![CDATA[
var imageslazy = document.querySelectorAll("img");
for (var i = 0; i < imageslazy.length; i++) {
imageslazy[i].setAttribute("loading","lazy");
};
//]]>
</script>Sementara untuk iframe saya rasa tidak semua halaman menggunakannya, jadi bisa ditambahkan secara manual. Namun jika ternyata iframe ada di semua halaman, Anda bisa menggunakan javascript juga jika malas untuk menambahkan secara manual.
<script>
//<![CDATA[
var iframeslazy = document.querySelectorAll("iframe");
for (var i = 0; i < iframeslazy.length; i++) {
iframeslazy[i].setAttribute("loading","lazy");
};
//]]>
</script>Sudah Menggunakan Lazyload Pihak Ketiga
Untuk Anda yang sudah menggunakan lazyload dengan perpustakaan pihak ketiga, penambahan atribut loading="lazy" pada image dan iframe tidak akan bentrok dan mengganggunya sehingga bisa menggunakan keduanya.
Justru ini akan bagus, sehingga untuk browser yang belum mendukung loading="lazy" akan tetap mendapatkan lazyload dengan perpustakaan pihak ketiga tersebut.
Referensi
Untuk membaca lebih jelas mengenai informasi dukungan browser untuk lazyload image dan iframe ini, silahkan simak langsung di halaman https://web.dev/iframe-lazy-loading/
Semoga bermanfaat.
UPDATE:
Saya coba pasang di tema Kompi Flexible makin cakep nih, coba saja cek Kompi Flexible style Grid dan Kompi Flexible style List.
Jika ingin menggabungkan javascript untuk menambahkan atribut loading="lazy" sekaligus paga image dan iframe, bisa gunakan kode berikut:
for(var imgifrlazy=document.querySelectorAll("img,iframe"),i=0;i<imgifrlazy.length;i++)imgifrlazy[i].setAttribute("loading","lazy");