Apakah Penggunaan Library Lazy-load Gambar Masih Relevan Untuk Tema Blogger di Tahun 2024?
Bagi teman-teman pengguna platform Blogger untuk blogging mungkin ada yang pernah bertanya-tanya apakah penggunaan library lazy-load gambar masih relevan digunakan pada tema blogger di tahun 2024 ini? Ayo kita ulas bersama.
Apa itu Lazy-Load Image?
Apa itu lazy-load image? Lazy load image merupakan sebuah teknik manipulasi pemuatan gambar agar tidak terlalu membebani pemuatan halaman web secara keseluruhan.
Penggunaan gambar yang banyak bisa sangat mempengaruhi kecepatan sebuah laman web secara siginifikan. Tidak hanya gambar, tetapi media lain seperti video juga termasuk.
Penggunaan media ini akan sangat terasa membebani pemuatan. Bahkan dalam beberapa kasus setelah beberapa menit laman belum selesai memuat dan user harus merefresh laman.
Hal ini tentu berefek buruk yaitu user bisa saja memilih untuk langsung meninggalkan laman daripada menunggu.
Sebagai solusi, penggunaan teknik lazy loading sanagt diperlukan. Lazy loading bisa membantu mengatasi permasalahan tersebut dengan sangat elegan.
Media sebagai sumber non-critical bisa dimuat belakangan. Konsep dari lazy-load gambar ini adalah memuat gambar yang tidak terlihat pada layar (offscreen) hanya saat gambar tersebut terlihat pada layar (onscreen) saat user menggulir halaman.
Dalam beberapa library lazy-load, gambar offscreen dimuat setelah halaman dimuat secara keseluruhan tanpa menunggu user menggulir halaman.
Untuk bisa menggunakan teknik ini tentu kode javascript diperlukan. Kode js ini memanfaatkan Intersection Observer API milik browser.
Lazy-Load Image Library
Ada banyak lazy-loader image library yang bsia ditemukan di luar sana. Salah satu yang paling populer adalah aFarkas. Hampir semua tema blogger yang saya buat menggunakan library ini.
Tentu saja alasannya karena ringan dengan ukuran file yang cukup kecil. Ketika diimplementasikan secara langsung atau inline pada xml juga tidak akan menambah ukuran xml secara signifikan.
Selain itu library ini memiliki performa yang sangat tinggi dan SEO friendly. Tidak hanya gambar, library ini juga bisa menarget elemen lain seperti iframe.
Lazy-load Bawaan Browser
Browser sebenarnya memiliki fitur lazy loading bawaan. Fitur browser-level lazy loading ini sudah didukung oleh hampir semua browser modern.
Cara penggunaannya cukup sederhana yaitu hanya menambahkan atribut 'loading="lazy"' pada tag gambar yang ada. Tidak hanya gambar, atribut ini juga bisa ditambahkan untuk elemen lain seperti iframe.
Penggunaan
Contoh penggunaan:
<img alt="..." loading="lazy" src="..." ... />
Dukungan Browser
Hampir semua browser versi terbaru sudah mendukung atribut ini. Browser mobile seperti opera-mini tidak mendukung atribut ini sama sekali. Wajar saja, browser ini memang tidak mendukung banyak hal sih.
Browser lawas seperti Internet Explorer 11 juga tidak mendukung atribut ini sama sekali. Browser mobile Mozilla Firefox juga hanya mendukung sebagian saja (entah bagaimana maksudnya). List browser bisa kalian lihat di caniuse.
Blogger Mendukung Pemberian Atribut Loading Otomatis
Mungkin banyak pengguna platform blogging blogger yang belum menyadari bahwa platform ini sudah mendukung pemberian atribut loading secara otomatis.
Pada bagian pengaturan terdapat dua fitur baru yang ditambahkan yaitu Gambar pemuatan lambat dan Penyajian gambar WebP. Kedua fitur ini ditambahkan sejak 2023 lalu.
Ketika "gambar pemuatan lambat" diaktifkan, maka semua gambar di dalam halaman postingan akan diberi atribut loading="lazy" tanpa terkecuali.
Hal ini tentu bagus karena otomatis. Artinya kita tidak perlu lagi melakukan penambahan atribut tersebut secara manual.
Hanya saja salah satu yang menjadi perhatian adalah gambar pertama juga tidak terlepas dari pemberian atribut ini. Padahal gambar pertama yang umumnya berada pada area viewport alias terlihat harusnya dimuat secara langsung.
Fitur yang kedua adalah "Penyajian gambar WebP". Fitur ini melakukan modifikasi pada url gambar yang dihosting di blogger. Modifikasi ini berupa pemberian string "-rw" yang menunjukkan bahwa file tersebut berformat WebP.
Penggunaan Library Lazy-load Gambar Masih Relevan Untuk Tema Blogger?
Mengingat browser modern sudah mendukung native lazy-load, apakah library seperti Lazysizes masih relevan digunakan di tahun 2024?
Berdasarkan data market share dari browser-browser yang digunakan baik untuk desktop maupun mobile khusus di Indonesia per Januari 2023 - Januari 2024, lebih dari setengahnya menggunakan Chrome untuk Android.
- Chrome for Android - 54.22%
- Chrome 120.0 - 20.46%
- Safari iPhone - 6.22%
- Chrome 119.0 - 2.82%
- Edge 120 - 2.64%
- Firefox 121.0 - 1.73%
Dari daftar browser dengan versinya di atas, semuanya sudah mendukung atribut "loading". Jadi sebenarnya bisa dibilang penggunaan library tersebut sudah tidak relevan lagi.
Akhir Kata
Meskipun browser-browser saat ini sudah mendukung atribut loading yang membuat penggunaan library lazy-load gambar untuk blogger menjadi tidak relevan lagi, namun semua kembali ke kreator masing-masing.
Ada kemungkinan pengunjung yang datang masih menggunakan browser dengan versi lawas yang tidak mendukung atribut ini sehingga penggunaan library masih sangat dibutuhkan.