Apa Itu Lazy Loading? Teknik yang Membantu Website Memuat Konten Lebih Efisien

Website dengan banyak gambar, video, dan konten visual dapat membutuhkan waktu lebih lama untuk dimuat. Semakin banyak aset yang harus diunduh browser ketika halaman pertama kali dibuka, semakin besar pula penggunaan bandwidth dan beban proses pada perangkat pengguna.

Salah satu teknik yang dapat digunakan untuk mengatasi masalah tersebut adalah lazy loading. Teknik ini memungkinkan browser menunda pemuatan aset yang belum dibutuhkan dan memuatnya ketika pengguna hampir melihat atau membutuhkannya. Lalu, apa itu lazy loading? Bagaimana cara kerjanya, apa manfaatnya untuk website, dan bagaimana cara menerapkannya dengan benar?

Apa Itu Lazy Loading?

Lazy loading adalah teknik yang menunda proses pemuatan resource website hingga resource tersebut benar-benar dibutuhkan. Pada halaman web, teknik ini paling sering digunakan untuk gambar, iframe, video, dan elemen lain yang berada di luar area tampilan awal.

Sebagai contoh, sebuah artikel memiliki 20 gambar. Ketika pengunjung pertama kali membuka artikel, hanya beberapa gambar yang terlihat pada layar. Dengan lazy loading, gambar yang berada jauh di bawah halaman tidak harus langsung dimuat. Browser dapat menundanya hingga pengguna melakukan scroll dan gambar tersebut mendekati area yang akan terlihat.

Pendekatan ini membantu mengurangi resource yang harus diproses pada saat awal halaman dimuat dan dapat menghemat penggunaan bandwidth, terutama ketika tidak semua konten akhirnya dilihat oleh pengguna.

Bagaimana Cara Kerja Lazy Loading?

Pada pemuatan biasa atau eager loading, resource dapat diminta browser ketika elemen tersebut diproses dalam halaman. Artinya, gambar yang berada jauh di bagian bawah halaman tetap berpotensi ikut diunduh meskipun pengguna belum pernah melihatnya. Lazy loading bekerja dengan menunda permintaan terhadap resource yang belum diperlukan.

Gambaran sederhananya:
Halaman dibuka → Konten penting dimuat → Resource di luar viewport ditunda → Pengguna scroll → Resource mendekati viewport → Resource mulai dimuat

Browser modern dapat menangani lazy loading secara native menggunakan atribut HTML seperti loading="lazy". Untuk gambar dan iframe, browser akan menentukan kapan resource tersebut perlu dimuat berdasarkan jaraknya terhadap viewport. Dengan mekanisme ini, developer tidak selalu perlu membuat sistem lazy loading menggunakan JavaScript dari awal.

Contoh Lazy Loading pada Gambar

Lazy loading gambar dapat diterapkan menggunakan atribut loading pada elemen <img>. Contohnya:

<img 
  src="gambar.jpg" 
  alt="Ilustrasi website" 
  loading="lazy"
>

Atribut loading="lazy" memberikan petunjuk kepada browser untuk menunda pemuatan gambar sampai gambar tersebut mendekati area viewport. Sementara itu, loading="eager" digunakan untuk menunjukkan bahwa gambar sebaiknya dimuat segera. Nilai eager merupakan perilaku default pada elemen <img>.

Lazy Loading Tidak Hanya untuk Gambar

Meskipun paling sering dikaitkan dengan gambar, konsep lazy loading dapat diterapkan pada berbagai jenis resource. Beberapa contohnya adalah:

Apa Manfaat Lazy Loading?

Penerapan lazy loading yang tepat dapat memberikan beberapa manfaat bagi website.

1. Membantu Mempercepat Loading Awal

Ketika resource yang belum diperlukan tidak langsung dimuat, browser dapat memusatkan proses pada konten yang lebih penting untuk tampilan awal. Hal ini dapat membantu mempercepat proses awal halaman, terutama pada halaman dengan banyak gambar atau media.

2. Mengurangi Penggunaan Bandwidth

Tidak semua pengunjung akan membaca halaman sampai bagian paling bawah. Jika gambar di bagian bawah langsung dimuat sejak awal, bandwidth tetap digunakan meskipun gambar tersebut tidak pernah dilihat. Lazy loading dapat menunda pemuatan resource tersebut sampai memang dibutuhkan.

3. Mengurangi Beban Request pada Awal Halaman

Halaman dengan banyak aset dapat menghasilkan banyak permintaan resource ketika pertama kali dibuka. Dengan menunda sebagian resource, jumlah pekerjaan yang harus dilakukan browser pada tahap awal dapat dikurangi.

4. Membantu Pengalaman Pengguna

Pengunjung dapat lebih cepat melihat dan menggunakan bagian utama halaman tanpa harus menunggu seluruh aset selesai dimuat. Konsep ini berkaitan dengan perceived performance, yaitu bagaimana cepat atau lambat sebuah website terasa bagi pengguna.

5. Bermanfaat untuk Website dengan Banyak Media

Website seperti portal berita, blog, toko online, katalog produk, dan website fotografi biasanya memiliki banyak gambar. Lazy loading dapat membantu menghindari pemuatan seluruh gambar sekaligus.

Apa Kekurangan Lazy Loading?

Lazy loading bukan berarti semua resource harus ditunda. Jika diterapkan secara berlebihan, teknik ini justru dapat menimbulkan masalah. Beberapa hal yang perlu diperhatikan antara lain:

1. Elemen Penting Bisa Terlambat Dimuat

Gambar yang terlihat langsung ketika halaman dibuka biasanya tidak sebaiknya diperlakukan sama seperti gambar yang berada jauh di bawah halaman. Jika elemen penting pada viewport awal ditunda, pengguna justru dapat melihat konten utama muncul lebih lambat.

2. Dapat Menimbulkan Layout Shift

Gambar yang tidak memiliki dimensi yang jelas dapat menyebabkan ruang halaman berubah ketika gambar selesai dimuat. Kondisi ini dapat membuat konten terlihat bergeser. Karena itu, atribut width dan height atau pendekatan aspect-ratio penting untuk membantu browser menyediakan ruang bagi gambar sebelum resource selesai dimuat.

3. Tidak Selalu Dibutuhkan pada Semua Elemen

Tidak semua gambar atau resource harus menggunakan lazy loading. Elemen yang sangat penting untuk tampilan awal sebaiknya mendapatkan prioritas pemuatan yang sesuai. Dengan kata lain, tujuan lazy loading bukan membuat semuanya lambat dimuat, melainkan memprioritaskan resource yang benar-benar dibutuhkan terlebih dahulu.

Perbedaan Lazy Loading vs Eager Loading

Keduanya merupakan pendekatan berbeda dalam menentukan kapan resource dimuat.

Kapan Sebaiknya Menggunakan Lazy Loading?

Lazy loading paling cocok digunakan untuk resource yang tidak langsung dibutuhkan ketika halaman pertama kali dibuka. Contohnya:

• gambar di bawah fold;
• gambar galeri;
• thumbnail yang berada jauh di bawah halaman;
• iframe video;
• iframe peta;
• konten multimedia tambahan;
• resource yang hanya dibutuhkan setelah interaksi tertentu.

Misalnya sebuah artikel memiliki 15 gambar. Jika hanya dua gambar yang terlihat pada viewport awal, gambar lainnya dapat dipertimbangkan untuk menggunakan lazy loading. Dengan demikian, browser dapat memprioritaskan resource yang berkaitan dengan tampilan awal halaman.

Kapan Lazy Loading Sebaiknya Tidak Digunakan?

Lazy loading sebaiknya tidak diterapkan secara membabi buta. Untuk gambar utama yang langsung terlihat ketika halaman dibuka, pemuatan terlalu lambat dapat berdampak negatif terhadap pengalaman pengguna dan performa halaman.

Hal ini juga penting untuk elemen yang menjadi bagian utama dari tampilan awal atau berpotensi menjadi Largest Contentful Paint (LCP). MDN merekomendasikan agar gambar utama tidak diperlakukan sama dengan gambar yang berada jauh di bawah viewport, sementara gambar non-kritis di bawah viewport dapat ditunda.

Sebagai contoh, gambar hero pada bagian paling atas halaman biasanya perlu mendapatkan prioritas lebih tinggi dibandingkan gambar yang berada di akhir artikel.

Cara Menerapkan Lazy Loading pada Website

Ada beberapa cara untuk menerapkan lazy loading, tergantung teknologi website yang digunakan.

Menggunakan HTML Native

Cara paling sederhana adalah menggunakan atribut loading="lazy". Contohnya:

<img 
  src="gambar-produk.webp" 
  alt="Produk terbaru" 
  width="800" 
  height="600" 
  loading="lazy"
>

Cara ini tidak membutuhkan library JavaScript khusus dan sudah didukung secara luas oleh browser modern.

Menggunakan Lazy Loading pada Iframe

Iframe juga dapat menggunakan atribut yang sama. Contohnya:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  loading="lazy"
  title="Konten tambahan">
</iframe>

Pendekatan ini dapat berguna untuk konten seperti video embed atau elemen pihak ketiga yang berada di luar viewport awal.

Menggunakan JavaScript

Sebelum dukungan native browser semakin luas, lazy loading sering dibuat menggunakan JavaScript. Salah satu pendekatan yang dapat digunakan adalah Intersection Observer API. API tersebut memungkinkan developer mendeteksi ketika sebuah elemen masuk atau keluar dari viewport sehingga resource dapat dimuat ketika dibutuhkan.

Pendekatan JavaScript dapat memberikan kontrol yang lebih besar, tetapi untuk kebutuhan sederhana, native lazy loading biasanya lebih praktis.

Lazy Loading pada WordPress

WordPress memudahkan penerapan lazy loading karena pengelolaan gambar dapat dilakukan melalui sistem dan plugin yang tersedia. Pada banyak kasus, developer atau pemilik website tidak perlu menambahkan atribut loading="lazy" secara manual pada setiap gambar.

Namun, tetap penting untuk memeriksa bagaimana website menangani gambar utama, gambar dalam konten, iframe, dan elemen lainnya. Penggunaan plugin optimasi yang terlalu agresif juga perlu diperhatikan agar tidak membuat resource penting justru terlambat dimuat. Selain lazy loading, optimasi gambar sebaiknya tetap mencakup:

• kompresi gambar;
• pemilihan format yang sesuai;
• penggunaan ukuran gambar yang tepat;
• responsive images;
• penentuan dimensi gambar;
• penggunaan CDN bila diperlukan.

Lazy loading hanya merupakan salah satu bagian dari strategi optimasi performa website.

Apakah Lazy Loading Berpengaruh terhadap SEO?

Lazy loading dapat membantu performa website, dan performa merupakan salah satu aspek yang berkaitan dengan pengalaman pengguna. Namun, lazy loading bukan teknik SEO yang secara otomatis membuat halaman mendapatkan peringkat lebih tinggi di Google. Penerapannya harus tetap memperhatikan aksesibilitas, performa, dan kemampuan mesin pencari untuk menemukan konten yang diperlukan.

Untuk gambar HTML, penggunaan elemen <img> dengan atribut src yang benar merupakan pendekatan yang lebih aman dibandingkan hanya menyimpan URL gambar di atribut data khusus yang membutuhkan JavaScript untuk menampilkannya. MDN juga mengingatkan bahwa konten yang dimuat secara dinamis perlu memiliki strategi yang tepat agar tetap dapat ditemukan oleh mesin pencari.

Lazy Loading dan Core Web Vitals

Lazy loading dapat berhubungan dengan metrik performa seperti Largest Contentful Paint (LCP), terutama ketika digunakan untuk mengurangi persaingan bandwidth dengan resource yang lebih penting. Misalnya, sebuah halaman memiliki satu gambar utama yang menjadi elemen LCP dan banyak gambar lain di bawah halaman.

Menunda gambar-gambar yang tidak penting dapat mengurangi persaingan penggunaan bandwidth sehingga resource utama memiliki kesempatan untuk dimuat lebih cepat. Namun, jika gambar LCP justru diberi lazy loading, hasilnya dapat berlawanan. Oleh sebab itu, strategi pemuatan harus mempertimbangkan posisi dan fungsi setiap gambar.

Lazy Loading Bukan Pengganti Kompresi Gambar

Kesalahan yang cukup umum adalah menganggap lazy loading dapat menyelesaikan semua masalah gambar pada website. Padahal, lazy loading hanya mengatur kapan gambar dimuat. Teknik ini tidak secara otomatis mengurangi ukuran file gambar.

Jika sebuah gambar berukuran 2 MB, lazy loading tidak mengubah ukuran file tersebut menjadi lebih kecil. Browser hanya menunda kapan gambar tersebut diminta.

Karena itu, optimasi gambar sebaiknya dilakukan secara bersamaan melalui kompresi, pemilihan format yang sesuai, responsive images, dan penggunaan ukuran gambar yang tepat. Optimasi media tetap penting karena gambar dan video dapat menyumbang porsi besar terhadap data yang harus diunduh sebuah website.

Tips Menerapkan Lazy Loading dengan Benar

Agar penerapannya memberikan manfaat tanpa menimbulkan masalah baru, beberapa hal berikut dapat diperhatikan.

1. Gunakan lazy loading terutama pada gambar atau resource yang berada di luar viewport awal.
2. Jangan menerapkan lazy loading pada semua elemen secara otomatis tanpa melihat perannya pada halaman.
3. Tentukan ukuran gambar menggunakan atribut width dan height atau teknik layout yang sesuai untuk membantu mencegah layout shift.
4. Optimalkan ukuran dan format gambar. Lazy loading dan kompresi memiliki fungsi yang berbeda sehingga keduanya sebaiknya digunakan secara bersamaan.
5. Lakukan pengujian menggunakan tools performa website setelah optimasi. Periksa apakah waktu loading, LCP, CLS, dan pengalaman pengguna benar-benar mengalami perubahan.
6. Perhatikan gambar utama pada halaman. Jangan sampai elemen yang seharusnya menjadi prioritas justru tertunda karena konfigurasi lazy loading yang kurang tepat.

Contoh Penerapan Lazy Loading pada Artikel

Bayangkan sebuah artikel tutorial memiliki 10 gambar. Pada saat halaman dibuka, pengunjung hanya melihat:

• judul artikel
• gambar utama
• paragraf pembuka
• beberapa bagian awal artikel.

Gambar yang berada di bagian akhir artikel belum terlihat. Dalam kondisi tersebut, gambar utama dapat diprioritaskan untuk dimuat lebih awal, sedangkan gambar yang berada jauh di bawah halaman dapat menggunakan lazy loading.

Ketika pengunjung mulai melakukan scroll, browser akan memuat gambar yang sudah mendekati viewport. Dengan pendekatan tersebut, resource yang penting bagi tampilan awal tidak harus bersaing dengan seluruh gambar dalam artikel pada saat yang sama.

Kesimpulan

Lazy loading adalah teknik untuk menunda pemuatan resource website hingga resource tersebut dibutuhkan. Teknik ini paling umum digunakan pada gambar, iframe, video, dan konten lain yang berada di luar viewport awal.

Penerapan yang tepat dapat membantu mengurangi penggunaan bandwidth, mengurangi beban pemuatan awal, dan membuat halaman terasa lebih responsif. Namun, lazy loading bukan berarti semua elemen harus ditunda. Resource penting yang langsung terlihat oleh pengguna tetap perlu mendapatkan prioritas.

Untuk hasil yang optimal, lazy loading sebaiknya dikombinasikan dengan optimasi ukuran gambar, format media, responsive images, penentuan dimensi elemen, dan pengujian performa. Dengan strategi tersebut, website dapat memuat konten secara lebih efisien tanpa mengorbankan pengalaman pengguna.

Untuk mendapatkan informasi lainnya seputar website, hosting, SEO, digital marketing, cloud, dan teknologi digital, kunjungi Blog Hosteko. Anda juga dapat menggunakan Hosteko Hosting Indonesia untuk mendukung kebutuhan domain dan hosting website.