Lazy loading adalah teknik menunggu untuk memuat bagian tertentu dari halaman web terutama gambar sampai dibutuhkan. Alih-alih memuat semuanya sekaligus, yang dikenal sebagai pemuatan "bersemangat", browser tidak meminta sumber daya tertentu hingga pengguna berinteraksi sedemikian rupa sehingga sumber daya tersebut dibutuhkan. Jika diterapkan dengan benar, pemuatan lambat dapat mempercepat waktu pemuatan halaman. Jenis pemuatan ini disebut "lazy" karena mendorong browser web untuk menunda-nunda. Saat menampilkan halaman web yang memuat lambat, browser pada dasarnya mengatakan, "Saya akan menunggu untuk memuat gambar ini sampai saya benar-benar membutuhkannya ." Saat menampilkan halaman web yang memuat dengan bersemangat, browser mengambil sikap sebaliknya: "Saya akan segera mengurus semuanya!" Walaupun penundaan terkadang membawa konotasi negatif di dunia nyata, dalam hal ini seringkali lebih efisien. Misalnya, postingan blog mungkin memiliki gambar di bagian atas halaman dan diagram di dekat bagian bawah. Seseorang yang membaca postingan blog mungkin tidak mencapai bagian bawah teks selama beberapa menit, sehingga browser menunggu memuat diagram hingga pembaca menggulir ke bagian tersebut. Dengan cara ini, halaman dimuat lebih cepat pada awalnya, karena browser memuat satu gambar, bukan dua.
Navigasi pengguna biasanya yang memicu pemuatan gambar yang lambat. Secara khusus, saat pengguna menggulir ke bawah pada suatu halaman, itu memberi tahu browser untuk memuat gambar yang muncul di sana. Saat laman web dimuat, bagian yang dilihat pengguna disebut "paro atas", sedangkan bagian yang belum dilihat pengguna disebut "paro bawah".* Gambar yang berada di paro atas harus segera dimuat, atau pengalaman pengguna akan terpengaruh. Tetapi pengguna tidak melihat gambar di paro bawah hingga gambar tersebut digulir ke bawah. Dengan demikian, gambar paro bawah bisa menggunakan lazy loading.
Pengembang web juga dapat menggunakan kerangka kerja pemrograman untuk mengimplementasikan pemuatan lazy yang lebih canggih. Sudut umumnya digunakan untuk tujuan ini. Pustaka JavaScript React juga mendukung pemuatan lambat. Cloudflare Mirage adalah cara lain untuk menerapkan pemuatan lambat. Selain mengubah ukuran gambar secara otomatis, Mirage bertindak sebagai pemuat malas, hanya memuat gambar sesuai permintaan. Fitur Cloudflare Mirage tersedia untuk pelanggan Cloudflare pada paket swalayan Pro dan Bisnis , serta pelanggan Perusahaan .
- JavaScript: JavaScript dikenal sebagai sumber pemblokiran render artinya browser tidak dapat merender halaman hingga kode JavaScript dimuat. Kode JavaScript dapat dibagi menjadi modul yang lebih kecil yang dimuat saat diperlukan, mengurangi waktu muat halaman yang perlu menjalankan JavaScrip. - CSS: CSS juga merupakan sumber pemblokiran render. Memisahkan file CSS menjadi beberapa file yang hanya dimuat saat diperlukan dapat membantu mengurangi jumlah waktu yang diblokir browser untuk merender halaman lainnya. File CSS non-pemblokiran harus memiliki tautannya sendiri dengan mediaproperti yang ditambahkan untuk memberi tahu browser kapan harus memuatnya. - iframe: iframe digunakan untuk menyematkan konten dari sumber eksternal ke halaman web. tag iframe dapat menyertakan loadingatribut HTML yang sama yang dijelaskan di atas untuk gambar.
Memuat halaman lebih cepat: Jika semuanya sama, halaman web dengan ukuran file yang lebih kecil memuat lebih cepat. Dengan pemuatan yang lambat, halaman web dimulai dengan ukuran lebih kecil dari ukuran penuhnya sehingga memuat lebih cepat. Performa web yang cepat memiliki banyak manfaat, termasuk SEO yang lebih baik , rasio konversi yang lebih tinggi , dan pengalaman pengguna yang lebih baik. Tidak ada konten yang tidak perlu: Misalkan sebuah halaman memuat beberapa gambar paro bawah tetapi pengguna keluar dari halaman sebelum menggulir ke bawah. Dalam kasus seperti itu, bandwidth yang digunakan untuk mengirimkan gambar dan waktu yang dihabiskan browser untuk meminta dan merender gambar pada dasarnya terbuang sia-sia. Sebaliknya, pemuatan lambat memastikan bahwa gambar ini hanya dimuat bila diperlukan. Ini menghemat waktu dan daya pemrosesan, dan mungkin menghemat uang bagi pemilik situs web karena lebih sedikit bandwidth yang digunakan.
Pengguna mungkin meminta sumber daya lebih cepat dari yang diharapkan: Misalnya, jika pengguna menggulir cepat ke bawah halaman, mereka mungkin harus menunggu gambar dimuat. Ini dapat berdampak negatif pada pengalaman pengguna. Komunikasi tambahan dengan server: Alih-alih meminta semua konten halaman sekaligus, browser mungkin harus mengirimkan beberapa permintaan ke server situs web untuk konten saat pengguna berinteraksi dengan halaman. Penggunaan jaringan pengiriman konten (CDN) meminimalkan potensi kelemahan ini, karena gambar di- cache oleh CDN dan browser tidak perlu mengirim permintaan ke server asal untuk mengambilnya. Kode tambahan untuk diproses browser: Jika pengembang menambahkan beberapa baris JavaScript ke halaman web untuk memberi tahu browser cara memuat sumber daya halaman dengan malas, ini menambah jumlah kode yang harus dimuat dan diproses browser. Jika dilakukan dengan tidak efisien, sedikit tambahan waktu pemuatan dan pemrosesan ini mungkin melebihi waktu yang dihemat oleh pemuatan lambat.
Eager loading memuat semua sumber daya halaman web pada waktu yang sama, atau sesegera mungkin. Beberapa aplikasi yang menggunakan eager loading mungkin menampilkan layar "Loading". Aplikasi web yang kompleks dan berat kode, seperti game online, mungkin lebih suka menggunakan pemuatan bersemangat.
Sejumlah faktor memengaruhi kinerja web, namun ketiga langkah ini merupakan titik awal yang baik untuk membuat situs web lebih cepat: 1. Gunakan CDN: Saat konten web di-cache dalam CDN, komunikasi dengan server asal dijaga seminimal mungkin baik pemuatan lambat digunakan atau tidak. CDN juga mengirimkan konten ke pengguna lebih cepat karena biasanya lebih dekat ke pengguna daripada server asal. 2. Optimalkan gambar: Gambar yang terlalu besar akan memengaruhi kinerja meskipun pemuatan lambat digunakan. Mengurangi ukiran file gambar jika memungkinkan membantu memastikan bahwa gambar dimuat dengan cepat. 3. Perkecil kode: Minifaksi adalah proses menghapus semua karakter yang tidak diperlukan dari kode CSS dan JavaScript tanpa mengubah fungsinya. Ini termasuk menghapus spasi, komentar, dan titik koma. Minifikasi mengurangi ukuran file kode, meningkatkan kecepatan memuat.
Sementara Lazy Loading menunda inisialisasi sumber daya, Eager Loading menginisialisasi atau memuat sumber daya segera setelah kode dieksekusi. Eager loading juga melibatkan pre-loading entitas terkait yang direferensikan oleh sumber daya. Misalnya, skrip PHP dengan pernyataan penyertaan melakukan pemuatan bersemangat segera setelah dijalankan, pemuatan yang bersemangat akan menarik dan memuat sumber daya yang disertakan. Eager Loading bermanfaat ketika ada peluang atau kebutuhan untuk memuat sumber daya di latar belakang. Misalnya, beberapa situs web menampilkan layar "memuat" dan dengan penuh semangat memuat semua sumber daya yang diperlukan untuk menjalankan aplikasi web.
Ada beberapa library open source yang bisa digunakan untuk mengimplementasikan lazy loading, antara lain: - blazy.js – blazy.js adalah pustaka JavaScript yang ringan untuk pemuatan lambat dan gambar multi-tayang, iframe, video, dan sumber daya lainnya. - LazyLoad – LazyLoad adalah skrip yang secara otomatis memuat gambar saat memasuki viewport. Metode untuk menerapkan pemuatan lambat dalam kode Anda meliputi: - Lazy initialization – Metode ini menetapkan objek ke nol. Data objek dimuat hanya setelah dan kapan pun memintanya, periksa apakah null, dan jika ya, muat data objek. - Virtual proxy – saat mengakses objek, panggil objek virtual dengan antarmuka yang sama dengan objek sebenarnya. Saat objek virtual dipanggil, muat objek sebenarnya, lalu delegasikan padanya. - Ghost – memuat objek dalam keadaan sebagian, hanya menggunakan pengidentifikasi. Pertama kali properti pada objek dipanggil, muat data lengkapnya. - Value holder – buat objek generik yang menangani perilaku pemuatan malas. Objek ini akan muncul di tempat bidang data
Kesempatan lowongan magang terbaru di tahun 2024
Baca Selengkapnya..