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.<\/p>\n
Salah satu teknik yang dapat digunakan untuk mengatasi masalah tersebut adalah lazy loading<\/strong>. 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?<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n Pada pemuatan biasa atau eager loading<\/em>, 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.<\/p>\n Gambaran sederhananya: Browser modern dapat menangani lazy loading secara native menggunakan atribut HTML seperti Lazy loading gambar dapat diterapkan menggunakan atribut Atribut Meskipun paling sering dikaitkan dengan gambar, konsep lazy loading dapat diterapkan pada berbagai jenis resource. Beberapa contohnya adalah:<\/p>\n Penerapan lazy loading yang tepat dapat memberikan beberapa manfaat bagi website.<\/p>\n 1. Membantu Mempercepat Loading Awal<\/span><\/p>\n 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.<\/p>\n 2. Mengurangi Penggunaan Bandwidth<\/span><\/p>\n 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.<\/p>\n 3. Mengurangi Beban Request pada Awal Halaman<\/span><\/p>\n 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.<\/p>\n 4. Membantu Pengalaman Pengguna<\/span><\/p>\n Pengunjung dapat lebih cepat melihat dan menggunakan bagian utama halaman tanpa harus menunggu seluruh aset selesai dimuat. Konsep ini berkaitan dengan perceived performance,<\/em> yaitu bagaimana cepat atau lambat sebuah website terasa bagi pengguna.<\/p>\n 5. Bermanfaat untuk Website dengan Banyak Media<\/span><\/p>\n 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.<\/p>\n 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:<\/p>\n 1. Elemen Penting Bisa Terlambat Dimuat<\/span><\/p>\n 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.<\/p>\n 2. Dapat Menimbulkan Layout Shift<\/span><\/p>\n 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 3. Tidak Selalu Dibutuhkan pada Semua Elemen<\/span><\/p>\n 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.<\/p>\n Keduanya merupakan pendekatan berbeda dalam menentukan kapan resource dimuat.<\/p>\n Lazy loading paling cocok digunakan untuk resource yang tidak langsung dibutuhkan ketika halaman pertama kali dibuka. Contohnya:<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n Sebagai contoh, gambar hero pada bagian paling atas halaman biasanya perlu mendapatkan prioritas lebih tinggi dibandingkan gambar yang berada di akhir artikel.<\/p>\n Ada beberapa cara untuk menerapkan lazy loading, tergantung teknologi website yang digunakan.<\/p>\n Menggunakan HTML Native<\/strong><\/p>\n Cara paling sederhana adalah menggunakan atribut Cara ini tidak membutuhkan library JavaScript khusus dan sudah didukung secara luas oleh browser modern.<\/p>\n Menggunakan Lazy Loading pada Iframe<\/strong><\/p>\n Iframe juga dapat menggunakan atribut yang sama. Contohnya:<\/p>\n Pendekatan ini dapat berguna untuk konten seperti video embed atau elemen pihak ketiga yang berada di luar viewport awal.<\/p>\n Menggunakan JavaScript<\/strong><\/p>\n Sebelum dukungan native browser semakin luas, lazy loading sering dibuat menggunakan JavaScript. Salah satu pendekatan yang dapat digunakan adalah Intersection Observer API. <\/em>API tersebut memungkinkan developer mendeteksi ketika sebuah elemen masuk atau keluar dari viewport sehingga resource dapat dimuat ketika dibutuhkan.<\/p>\n Pendekatan JavaScript dapat memberikan kontrol yang lebih besar, tetapi untuk kebutuhan sederhana, native lazy loading biasanya lebih praktis.<\/p>\n 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 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:<\/p>\n Lazy loading hanya merupakan salah satu bagian dari strategi optimasi performa website.<\/p>\n 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.<\/p>\n Untuk gambar HTML, penggunaan elemen 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n Jika sebuah gambar berukuran 2 MB, lazy loading tidak mengubah ukuran file tersebut menjadi lebih kecil. Browser hanya menunda kapan gambar tersebut diminta.<\/p>\n 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.<\/p>\n Agar penerapannya memberikan manfaat tanpa menimbulkan masalah baru, beberapa hal berikut dapat diperhatikan.<\/p>\n Bayangkan sebuah artikel tutorial memiliki 10 gambar. Pada saat halaman dibuka, pengunjung hanya melihat:<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n Untuk mendapatkan informasi lainnya seputar website, hosting, SEO, digital marketing, cloud, dan teknologi digital, kunjungi Blog Hosteko.<\/em><\/a> Anda juga dapat menggunakan Hosteko Hosting Indonesia<\/em><\/a> untuk mendukung kebutuhan domain dan hosting website.<\/p>\n\n\nApa Itu Lazy Loading?<\/h2>\n
Bagaimana Cara Kerja Lazy Loading?<\/h2>\n
\nHalaman dibuka \u2192 Konten penting dimuat \u2192 Resource di luar viewport ditunda \u2192 Pengguna scroll \u2192 Resource mendekati viewport \u2192 Resource mulai dimuat<\/strong><\/em><\/p>\nloading=\"lazy\"<\/code>. 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.<\/p>\nContoh Lazy Loading pada Gambar<\/h2>\n
loading<\/code> pada elemen <img><\/code>. Contohnya:<\/p>\n<img \r\n src=\"gambar.jpg\" \r\n alt=\"Ilustrasi website\" \r\n loading=\"lazy\"\r\n>\r\n<\/code><\/pre>\nloading=\"lazy\"<\/code> memberikan petunjuk kepada browser untuk menunda pemuatan gambar sampai gambar tersebut mendekati area viewport. Sementara itu, loading=\"eager\"<\/code> digunakan untuk menunjukkan bahwa gambar sebaiknya dimuat segera. Nilai eager<\/code> merupakan perilaku default pada elemen <img><\/code>.<\/p>\nLazy Loading Tidak Hanya untuk Gambar<\/h2>\n
\n\n
\n \nResource<\/th>\n Contoh Penggunaan<\/th>\n<\/tr>\n<\/thead>\n \n Gambar<\/td>\n Foto artikel, thumbnail, galeri<\/td>\n<\/tr>\n \n Iframe<\/td>\n Video embed, peta, konten pihak ketiga<\/td>\n<\/tr>\n \n Video<\/td>\n Video yang berada di bagian bawah halaman<\/td>\n<\/tr>\n \n Audio<\/td>\n Konten audio yang tidak langsung digunakan<\/td>\n<\/tr>\n \n JavaScript<\/td>\n Modul atau fitur yang baru diperlukan saat interaksi tertentu<\/td>\n<\/tr>\n \n Konten dinamis<\/td>\n Data yang baru diperlukan ketika pengguna membuka bagian tertentu<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Apa Manfaat Lazy Loading?<\/h2>\n
Apa Kekurangan Lazy Loading?<\/h2>\n
width<\/code> dan height<\/code> atau pendekatan aspect-ratio<\/code> penting untuk membantu browser menyediakan ruang bagi gambar sebelum resource selesai dimuat.<\/p>\nPerbedaan Lazy Loading vs Eager Loading<\/h2>\n
\n\n
\n \nAspek<\/th>\n Lazy Loading<\/th>\n Eager Loading<\/th>\n<\/tr>\n<\/thead>\n \n Waktu pemuatan<\/td>\n Ditunda hingga dibutuhkan<\/td>\n Dimuat segera<\/td>\n<\/tr>\n \n Prioritas<\/td>\n Resource non-kritis<\/td>\n Resource penting<\/td>\n<\/tr>\n \n Cocok untuk<\/td>\n Konten di bawah viewport<\/td>\n Konten utama<\/td>\n<\/tr>\n \n Penggunaan bandwidth awal<\/td>\n Cenderung lebih rendah<\/td>\n Cenderung lebih tinggi<\/td>\n<\/tr>\n \n Contoh<\/td>\n Gambar artikel bagian bawah<\/td>\n Gambar utama yang tampil pertama<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Kapan Sebaiknya Menggunakan Lazy Loading?<\/h2>\n
\n
Kapan Lazy Loading Sebaiknya Tidak Digunakan?<\/h2>\n
Cara Menerapkan Lazy Loading pada Website<\/h2>\n
loading=\"lazy\"<\/code>. Contohnya:<\/p>\n<img \r\n src=\"gambar-produk.webp\" \r\n alt=\"Produk terbaru\" \r\n width=\"800\" \r\n height=\"600\" \r\n loading=\"lazy\"\r\n>\r\n<\/code><\/pre>\n<iframe\r\n src=\"https:\/\/example.com\"\r\n width=\"600\"\r\n height=\"400\"\r\n loading=\"lazy\"\r\n title=\"Konten tambahan\">\r\n<\/iframe>\r\n<\/code><\/pre>\nLazy Loading pada WordPress<\/h2>\n
loading=\"lazy\"<\/code> secara manual pada setiap gambar.<\/p>\n\n
Apakah Lazy Loading Berpengaruh terhadap SEO?<\/h2>\n
<img><\/code> dengan atribut src<\/code> 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.<\/p>\nLazy Loading dan Core Web Vitals<\/h2>\n
Lazy Loading Bukan Pengganti Kompresi Gambar<\/h2>\n
Tips Menerapkan Lazy Loading dengan Benar<\/h2>\n
\n
width<\/code> dan height<\/code> atau teknik layout yang sesuai untuk membantu mencegah layout shift.<\/li>\nContoh Penerapan Lazy Loading pada Artikel<\/h2>\n
\n
Kesimpulan<\/h2>\n