Lazy load adalah praktik menunda pemuatan atau inisialisasi sumber daya atau objek hingga benar-benar dibutuhkan untuk meningkatkan kinerja dan menghemat sumber daya sistem.
Lazy load atau lazy-loading ini dapat berkontribusi pada efisiensi jika digunakan dengan benar dan tepat. Teknik ini ideal untuk meminimalisir konten dan waktu inisialisasi, seperti pada halaman web.
Misalnya, menunda pemuatan gambar di halaman web hingga dibutuhkan dapat membuat tampilan awal halaman web lebih cepat.
CATATAN : Harus diingat bahwa teknik lazy load ini merupakan teknik umum yang dapat diterapkan diberbagai platform seperti website, mobile dan lainnya. Serta dapat diterapkan untuk berbagai asset seperti gambar, iframe dan lain-lain.
Jadi Anda tidak perlu bingung jika ada artikel atau pun video yang menjelaskan teknik ini namun untuk aset ataupun platform yang berbeda yang mungkin tidak pernah Anda duga.
Apa Itu Lazy Load?
Lazy loading adalah strategi untuk mengidentifikasi resource sebagai non-blocking (non-critical) dan memuatnya hanya saat dibutuhkan. Ini adalah cara untuk mempersingkat critical rendering path, yang berarti pengurangan waktu muat halaman.
Pengertian lazy load di atas saya ambil dari developer.mozilla.org.
Ada dua hal penting yang perlu Anda pahami di sini yaitu istilah Critical Rendering Path dan Above The Fold. Simak penjelasan berikut secara seksama.
Critical Rendering Path
Critical Rendering Path adalah urutan langkah yang harus dilalui browser untuk mengubah HTML, CSS, dan Javascript terpenting menjadi piksel sebenarnya di layar.
Ini juga berarti tidak memuat semuanya sekaligus, tetapi memprioritaskan membuat bagian visual terpenting dari situs dimuat terlebih dahulu.
Untuk menyiapkan Critical Rendering Path yang sesuai, maka istilah penting yang perlu Anda pahami berikutnya adalah Above The Fold dan Below The Fold.
Above The Fold
Above The Fold adalah tampilan awal yang didapat pengguna di layar mereka ketika mereka mengunjungi situs web, tanpa harus menggulir ke bawah atau scroll.
Istilah above the fold sebenarnya berasal dari koran. Coba bayangkan tentang koran ketika baru saja dibeli. Biasanya koran tersebut terlipat, dan judul utama yang paling penting akan terlihat di atas. Inilah asal mula istilah above the fold.
Segala sesuatu yang lain akan muncul di bagian bawah atau Below The Fold. Seluruh bagian below the fold akan terungkap setelah Anda membeli dan membuka koran tersebut.
Berikut ini merupakan contoh bagian above the fold dari salah satu artikel Projasaweb, yang saya dapatkan langsung dari alat ujicoba PageSpeed Insight.
Perilaku halaman web dan browser juga mirip seperti itu. Browser harus mengunduh, mengurai, dan merender konten pada above the fold, tapi browser tidak perlu merender konten pada below the fold.
Dengan berfokus pada pemuatan konten untuk tampilan awal/Above the Fold, halaman dengan ratusan file CSS dan Javascript dapat dimuat dalam waktu kurang dari satu detik.
Di sinilah Critical Rendering Path mulai berlaku; mengaturnya secara efektif membantu Anda memuat halaman lebih cepat dan meningkatkan kinerja.
Manfaat Lazy Load
Ada beberapa manfaat yang dapat Anda rasakan saat menerapkan lazy load
Mengurangi Initial Load Time
Lazy loading halaman web mengurangi berat halaman, memungkinkan waktu untuk membuka halaman lebih cepat.
Lebih Cepat
Efek utama dari berkurangnya initial load time adalah Anda akan merasakan halaman website Anda menjadi jauh lebih cepat.
Hemat Bandwidth
Lazy loading menghemat bandwidth dengan mengirimkan konten ke pengguna hanya jika diminta. Ini berefek baik untuk Anda dan pengunjung.
Pengunjung tidak memerlukan paket data yang besar setiap kali mengunjungi website Anda. Meskipun terlihat kecil, hal ini akan sangat terasa jika pengunjung Anda sudah cukup banyak dan konten pada halaman website Anda berupa video dan gambar.
Hemat Sumber Daya Sistem
Lazy load menghemat sumber daya server dan pengunjung, karena hanya menggunakan beberapa gambar, JavaScript, dan kode lain yang benar-benar perlu dirender atau dieksekusi.
Tanpa lazy load ada banyak hal yang akan terbuang sia-sia, seperti waktu pemrosesan, baterai, dan sumber daya sistem lainnya. Setelah sumber daya media diunduh, browser harus mendekodekannya dan merender kontennya di viewport.
Cara Menerapkan Lazy Load Pada Website
Terdapat beberapa teknik untuk menerapkan lazy load pada website, Nah berikut ini cara menggunakan lazy load pada website.
Native Lazy Load
Salah satu metode penerapan lazy load yang dianjurkan adalah dengan teknik Native Lazy load atau jika kita menggunakan istilah dari Google, browser-level lazy-loading.
Teknik ini dirilis oleh Google sekitar tanggal 6 Agustus 2019. Kenapa disebut native? Karena memang secara native tersedia pada browser Chrome 76+. Tapi jangan khawatir, hampir semua browser sudah mendukung teknik ini, jadi tidak hanya Crhome.
Pada browser-level lazy-loading, sesuai dengan namanya, Anda tidak perlu menambahkan script tambahan seperti javascript atau CSS karena semua sudah tersedia pada browser.
Anda cukup menambahkan markup atau kode html biasa pada image atau iframe yang diinginkan. Berikut ini contoh yang diberikan oleh Google pada situs web.dev. Perhatikan code yang ditebalkan.
<img src="image.png" loading="lazy" alt="…" width="200" height="200">Jika Anda amati, yang ditambahkan hanya atribut HTML “loading”. Atribut ini memiliki beberapa nilai yang dapat Anda tentukan.
- lazy: mengaktifkan lazy load, menunda pemuatan sumber daya hingga mencapai jarak yang dihitung dari viewport.
- eager: memuat konten dengan segera, di mana pun konten itu berada di halaman.
- auto: browser yang menentukan apakah menggunakan lazy load atau tidak.
Jadi jika Anda ingin menerapkan lazy load, pastikan atribut loadingnya berisi nilai lazy seperti berikut ini :
loading="lazy"Tapi jika Anda ingin konten tersebut langsung dimuat tanpa lazy load, maka pastikan valuenya “eager” seperti contoh berikut ini :
loading="eager"Menerapkan lazy load dengan browser-level lazy-loading merupakan cara terbaik yang bisa jadi pilihan Anda. Cara ini jauh lebih mudah dan sederhana serta didukung oleh banyak browser.
Javascript Library
Cara kedua yang bisa Anda coba adalah dengan menggunakan javascript library yang banyak tersedia secara gratis saat ini.
Cara ini termasuk mudah dan cepat karena Library Javascript melakukan sebagian besar pekerjaan untuk mengimplementasikan Lazy load pada website, jadi Anda tidak perlu repot.
Tapi ingat, dengan teknik ini, Anda memerlukan script tambahan yang harus Anda muat sebelum Anda dapat menerapkan lazy load. Berikut ini beberapa library yang dapat Anda gunakan.
Lozad.js
Lozad adalah library lazy load yang ringan, dan dapat dikonfigurasi dengan mudah dan dalam JavaScript murni tanpa adanya ketergantungan. Kamu dapat menggunakan library ini untuk menerapkan lazy load pada gambar, video, iframe, dan lainnya, dan library ini menggunakan Intersection Observer API.
Pada situsnya, disebutkan bahwa lozad.js ini bahkan pernah masuk dalam salah satu dokumentasi Google untuk lazy load. tapi sayangnya, ketika saya cek ternyata sudah dihapus oleh Google.
Lazysizes
Lazysizes adalah lazyloader yang cepat, SEO-friendly dan self-inisialisasi. Library ini juga mampu memprioritaskan konten paling penting dalam tampilan dan konten yang dekat dengan above the fols.
Lazysizes dapat secara otomatis menghitung atribut dimensi untuk gambar responsif Anda. Hal ini membuat pengintegrasian gambar responsif menjadi mudah dan sangat sederhana.
Dan yang paling penting Lazysizes merupakan library yang dijadikan bahan pembanding saat Google melakukan pengukuran untuk Native Lazy Load yang mereka rilis.
Seperti yang dapat Anda lihat, Google menyebut Lazysizes sebagai library populer, dan menggunakannya sebagai pembanding saat menerapkan threshold baru untuk native lazy load.
Plugin WordPress
Jika Anda pengguna WordPress, maka mulai daro WordPress versi 5.5, native lazy load sudah diterapkan secara default. Artinya Anda tidak perlu melakukan apapun.
Tapi bagi beberapa pengguna WordPress mungkin penerapan secara default ini memiliki beberapa kekurangan (hal ini akan saya bahas di akhir tulisan ini). Untuk itulah, ada alternatif penerapan dengan menggunakan plugin.
Caranya tentu sangat mudah, seperti menginstall plugin WordPress biasa. Berikut ini beberapa Plugin Lazy Load yang bisa kamu gunakan:
A3 Lazy Load
a3 Lazy Load mengklaim bahwan mereka adalah plugin yang berorientasi seluler, sangat mudah digunakan dan akan mempercepat pemuatan halaman situs.
Mereka bahkan memberikan contoh halaman web yang memiliki 1000 image di dalamnya, sebagai demo atau pembuktikan dari kinerja plugin mereka.
Smush
Smush merupakan plugin lazy load dengan download terbanyak pada repository plugin WordPress. Ketika artikel ini ditulis, telah ada lebih dari 1 juta pengguna aktif dari plugin ini.
Smush melakukan banyak hal, tidak hanya lazy load saja. Mengoptimalkan gambar, mengubah ukuran dan mengkompres. Plugin ini dibuat oleh developer yang cukup dikenal dikomunitas WordPress yaitu WPMU DEV.
Dan masih banyak lagi plugin yang dapat Anda gunakan untuk mengaktifkan lazy load pada WordPress.
Sertakan Atribut Dimensi
Salah satu hal yang menjadi catatan penting pada dokumentasi Google adalah mengenai atribut dimensi pada gambar yang menggunakan lazy load.
Saat browser memuat gambar, browser tidak segera mengetahui dimensi gambar, kecuali jika dimensinya ditentukan secara jelas. Oleh karena itu disarankan agar semua tag gambar menyertakan atribut lebar dan tinggi.
Tanpa dimensi yang ditentukan, pergeseran tata letak dapat terjadi dan hal ini akan berpengaruh besar pada laporan PageSpeed Insight. Khususnya pada bagian CLSnya atau Culumative Layout Shift.
Demikianlah artikel mengenai lazy load, semoga bermanfaat.
