Apa itu pemuatan lambat dan bagaimana cara meningkatkan pengalaman pengguna?

Jika ada satu aspek situs web yang diabaikan sebagian besar pemilik situs web, itu adalah waktu pemuatan halaman. Anda menghabiskan banyak waktu dan uang untuk mendapatkan desain yang sempurna untuk situs web kami dan menambahkan berbagai jenis konten untuk membuat pengunjung tetap terlibat. Namun bagaimana jika itu tidak cukup untuk mengubah pengunjung Anda menjadi pengguna?

Studi menunjukkan bahwa setiap detik tambahan yang diperlukan situs Anda untuk dimuat, peluang mengubah pengunjung menjadi pelanggan berkurang. Menurut Portent , peluang konversi adalah 40% pada satu detik pemuatan, turun menjadi 34% pada detik berikutnya, dan 29% pada tiga detik. Anda mungkin bertanya-tanya, “Kalau begitu, apa solusinya?”

Dan di situlah konsep Lazy Loading muncul. Ini adalah cara yang lebih cepat untuk memuat situs web Anda tanpa mengorbankan kualitas konten Anda.

Dalam artikel ini, kita akan menjelajahi Lazy Loading, alasan menggunakannya, dan bagaimana cara ini dibandingkan dengan metode lain. Mari kita mulai!

Daftar isi

• Apa itu pemuatan lambat?
• Pentingnya pemuatan yang lambat
• Pemuatan yang bersemangat vs. pemuatan yang lambat
• Cara kerja pemuatan lambat
• Menerapkan pemuatan lambat

Apa itu Pemuatan Lambat?

Lazy Loading adalah salah satu cara untuk menghemat waktu dengan hanya memuat bagian website yang Anda perlukan segera. Daripada memuat semuanya sekaligus, yang mungkin lambat dan menghabiskan banyak sumber daya, metode ini memuat konten sedikit demi sedikit

Gambar atau video yang tidak langsung dimuat sering kali memiliki elemen placeholder hingga diperlukan. Misalnya, Lazy Loading tidak memuat semua gambar sekaligus. Itu hanya memuat yang dapat Anda lihat di layar Anda. Sisanya tidak akan dimuat sampai Anda menggulir ke bawah

Daripada menunggu semuanya dimuat, Anda dapat langsung melihat apa yang sudah ada di layar.

Tip Ahli: Periksa seberapa baik kinerja pemuatan lambat di berbagai browser dan perangkat.Hal ini untuk memastikan tidak ada masalah kompatibilitas.

Pentingnya Lazy Loading

Kita sudah tahu Lazy Loading dapat membantu Anda meningkatkan konversi. Tapi itu bukan satu-satunya manfaat yang dimilikinya. Berikut beberapa alasan lain mengapa Anda harus menerapkan Lazy Loading di situs web Anda.

Optimalkan kinerja

Pemuatan lambat mengurangi transfer data saat seseorang mengunjungi situs web Anda. Ini adalah kunci bagi orang-orang yang menggunakan perangkat seluler dengan internet lambat dan paket data kecil.

Mengurangi bandwidth dan beban server

Pemuatan yang lambat menghemat data dan mengurangi pekerjaan server. Hal ini menghemat biaya bagi pemilik situs web dan pengguna dengan menghentikan pemuatan konten saat tidak diperlukan.

Tingkatkan SEO

Mesin pencari seperti Google sangat memprioritaskan situs web yang memuat cepat sehingga menjadi faktor peringkat resmi. Dengan menggunakan teknik Lazy Loading, Anda dapat meningkatkan kecepatan pemuatan halaman, mengurangi rasio pentalan, dan mengarahkan situs web Anda ke peringkat yang lebih tinggi.

Apa itu Pemuatan Bersemangat?

Eager Loading adalah kebalikan dari Lazy Loading. Awalnya memuat semua sumber daya yang diperlukan sekaligus, termasuk file media, skrip, dan gaya. Ini berarti semua elemen halaman yang diperlukan segera tersedia. Jadi tidak ada pemuatan tambahan saat pengguna melakukan scroll atau berinteraksi.

Pemuatan bersemangat adalah metode konvensional yang digunakan di masa lalu, dan banyak situs web masih menggunakannya hingga saat ini.

Meskipun mudah untuk diterapkan, namun busy loading menjadi kurang relevan karena beberapa faktor, antara lain:

Peningkatan ukuran halaman web

Situs web modern menggunakan lebih banyak media kaya dan bagian interaktif. Ini berarti rata-rata halaman web jauh lebih besar dari sebelumnya. Oleh karena itu, pemuatan halaman awal yang cepat dapat menghasilkan waktu pemuatan halaman awal yang lebih lama. Khususnya bagi pengguna dengan koneksi internet yang lambat.

Dampak negatif pada kinerja

Waktu muat halaman yang lebih lama dapat mengganggu pengukuran kinerja situs web yang penting , seperti First Contentful Paint (FCP) dan Largest Contentful Paint (LCP). Ini adalah kunci untuk SEO dan pengalaman pengguna.

Bangkitnya pengguna ponsel

Dengan meluasnya penggunaan penjelajahan seluler, memuat sesuatu dengan sangat cepat sejak awal menjadi hal yang sangat penting.

Pemuatan Bersemangat vs. Pemuatan Malas

Berikut perbandingan singkat Eager Loading dan Lazy Loading:

Pemuatan lambat dan pemuatan bersemangat adalah dua metode pemuatan sumber daya yang berbeda dengan kelebihan dan kekurangannya masing-masing. Namun, dari perspektif teknologi saat ini, Pemuatan Lambat dianggap sebagai teknik pilihan untuk sebagian besar situs web modern karena efisiensi, keunggulan kinerja, dan pengalaman pengguna yang lebih baik.

Cara Kerja Pemuatan Lambat

Sekarang setelah Anda mengetahui mengapa Lazy Loading memastikan hasil yang lebih baik di antara keduanya, mari kita lihat bagaimana cara mencapai hal ini.

Navigasi dan interaksi pengguna : Pemuatan lambat bergantung pada cara pengguna menggunakan halaman web.Ini sering dimulai ketika pengguna menggulir atau menggerakkan mouse mereka. Saat mereka menggulir, browser menebak bahwa konten baru diperlukan di area yang dapat mereka lihat. Kemudian mulai memuat sumber daya tersebut. Pemuatan lambat juga dapat dimulai dengan tindakan lain, seperti mengeklik tombol atau mengarahkan kursor ke item.

Implementasi teknis untuk gambar : Lazy Loading bekerja secara berbeda untuk berbagai jenis konten.Untuk gambar yang sangat umum, Anda biasanya memulai dengan menampilkan placeholder berkualitas rendah atau ikon pemuatan sederhana. Saat pengguna menggulir ke dekat gambar asli, gambar yang jernih dan berkualitas tinggi akan dimuat. Dengan cara ini, pengguna tidak perlu menunggu gambar yang belum bisa mereka lihat.

Penerapan sumber daya web yang berbeda : Pemuatan lambat adalah metode fleksibel yang dapat digunakan untuk berbagai elemen, bukan hanya gambar.Ini berfungsi sama baiknya untuk video, iframe, dan bahkan elemen yang memerlukan banyak skrip. Memuat elemen-elemen ini hanya bila diperlukan berarti Anda dapat meningkatkan kecepatan memuat halaman secara signifikan dan mengelola sumber daya secara efisien. Hal ini sangat penting terutama untuk sumber daya berat seperti video definisi tinggi.

Menerapkan Pemuatan Lambat

Pada bagian ini, kami akan menunjukkan kepada Anda berbagai cara untuk menerapkan Lazy Loading di situs web Anda.

Metode 1 – Menerapkan Lazy Loading secara manual

Cara manual dalam menerapkan Lazy Loading bukan untuk semua orang. Ini rumit, dan Anda setidaknya harus memiliki pengetahuan pengkodean tingkat menengah.

Untuk melakukan ini, Anda sebagian besar akan menggunakan HTML dan JavaScript. Sebelum memulai, pastikan Anda memiliki akses ke file tema situs WordPress Anda dan merasa percaya diri untuk mengedit HTML dan JavaScript.

Berikut adalah panduan terperinci untuk membantu Anda melalui proses tersebut:

Langkah 1 : Cadangkan situs Anda

Selalu backup situs WordPress Anda sebelum melakukan perubahan apa pun pada file tema untuk menghindari kehilangan data jika Anda melakukan kesalahan.

Langkah 2 : Edit file function.php tema

• Akses file situs WordPress Anda (menggunakan klien FTP atau Manajer File di panel kontrol hosting Anda).
• Arahkan ke /wp-content/themes/your-theme/ dan temukan file function.php .
• Buka function.php untuk mengedit.

Langkah 3 : Tambahkan skrip Lazy Loading

Di function.php , tambahkan fungsi untuk memasukkan file JavaScript untuk Lazy Loading. Berikut ini contoh dasarnya:

fungsi add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

Kode ini mengasumsikan bahwa Anda memiliki file JavaScript bernama lazy-load.js di folder js dalam direktori tema Anda.

Langkah 4 : Buat file JavaScript

• Buat file baru bernama lazy-load.js di folder js direktori tema Anda.
• Tambahkan JavaScript untuk menangani Lazy Loading. Berikut ini contoh dasar menggunakan IntersectionObserver :

document.addEventListener("DOMContentLoaded", function() {

biarkan lambanImages = [].slice.call(document.querySelectorAll(“img.lazy”));

if (“IntersectionObserver” di jendela) {

biarkan malasImageObserver = new IntersectionObserver(fungsi(entri, pengamat) {

entri.forEach(fungsi(entri) {

if (entry.isIntersectioning) {

biarkan LazyImage = entri.target;

lazyImage.src = lazyImage.dataset.src;

lazyImage.classList.remove("malas");

malasImageObserver.unobserve(lazyImage);

}

});

});

lazyImages.forEach(fungsi(lazyImage) {

lazyImageObserver.observe(lazyImage);

});

}

});

Langkah 5 : Perbarui tag gambar Anda di WordPress

Ubah tag gambar Anda untuk mendukung Pemuatan Lambat. Di template PHP Anda atau langsung di postingan/halaman Anda, ubah tag gambar Anda sebagai berikut:

<img class=”malas” src=”placeholder-image.jpg” data-src=”original-image.jpg” alt=”deskripsi gambar”>

Ganti placeholder-image.jpg dengan gambar beresolusi rendah atau grafik pemuatan, dan original-image.jpg dengan URL gambar sebenarnya.

Tip Ahli: Gunakan placeholder responsif untuk gambar yang dimuat dengan lambat guna memastikan tata letaknya tetap stabil.

Langkah 6 : Uji perubahan Anda

• Jika Anda memasang plugin caching, pastikan untuk menghapus cache situs Anda.
• Lalu, buka situs web Anda dan gulir ke bawah ke bagian di mana gambar seharusnya dimuat dengan lambat.
• Luangkan waktu sejenak untuk melihat apakah gambar dimuat dengan lancar saat Anda menggulir.

Catatan

• Pastikan untuk selalu menguji di lingkungan pengembangan terlebih dahulu, sebelum melakukannya di situs web langsung Anda.
• Pertimbangkan untuk membuat tema anak saat melakukan ini. Pembaruan pada tema mungkin menimpa perubahan Anda.
• Untuk tipe konten lain seperti video atau iframe, pendekatan serupa dapat digunakan di mana atribut src diganti dengan atribut data-src dan dimuat melalui JavaScript saat berada di area pandang.

Teknik ini adalah cara sederhana untuk menggabungkan Lazy Loading. Jika Anda memiliki situs web yang lebih rumit atau persyaratan khusus, Anda mungkin ingin mencari solusi atau plugin yang lebih kuat.

Metode 2 – Menggunakan plugin WordPress untuk mengimplementasikan Lazy Loading

Ini adalah metode yang paling mudah dari kedua metode tersebut, karena Anda dapat menggunakan plugin WordPress untuk mengaktifkan Lazy Loading dengan aman. Beberapa plugin memungkinkan Anda melakukan ini, tetapi kami akan menggunakanWP-Optimize dalam contoh ini.WP-Optimize adalah plugin WordPress kuat yang membantu Anda meningkatkan kecepatan situs web dan meningkatkan pengalaman pengguna.

Ini menawarkan metode sederhana dan mudah untuk mengatur gambar, iframe, dan video Anda ke pemuatan lambat. Fitur Lazy Load yang ada di dalamnya secara otomatis menunda pemuatan sumber daya web hingga terlihat, sehingga menghasilkan waktu pemuatan halaman yang jauh lebih cepat. Namun ini adalah fitur premium WP-Optimize.

Untuk mengaktifkan fitur ini:

• Buka tabWP-Optimize > Gambar dari Dasbor Admin WordPress Anda
• Buka sub-tab Lazy Load Images
• Dari sini, Anda dapat mengaktifkan Pemuatan Lambat untuk Gambar dan Video/Iframe

Jika Anda perlu menonaktifkan Lazy Loading untuk gambar, gambar latar belakang, video, atau iframe tertentu, aktifkan saja dari sini. Anda juga dapat memilih untuk melewatkan kelas gambar tertentu.

Sebelum dan sesudah

Kami menguji contoh kecepatan situs web sebelum dan sesudah menerapkan Lazy Load. Websitenya sudah cukup cepat, dengan waktu muat First Contentful Paint (FCP) 1,5 detik,menurut GTMetrix.

Setelah mengaktifkan Lazy Loading, FCP menjadi 344 ms, jauh lebih cepat dibandingkan sebelumnya. Hasilnya dapat bervariasi tergantung pada seberapa banyak konten yang Anda miliki di halaman Anda, namun dalam sebagian besar kasus, skor FCP Anda akan meningkat.

Siap untuk mempercepat waktu buka halaman Anda?

Jadi ini dia! Kami berbicara tentang apa itu Lazy Loading, dan peran penting Lazy Loading untuk situs modern. Dengan menunggu untuk memuat sesuatu hingga Anda membutuhkannya, membuat halaman dimuat lebih cepat, menghemat data internet, dan membuat penjelajahan menjadi lebih lancar, terutama pada ponsel dengan data terbatas.

Kami juga telah memberikan beberapa saran berguna tentang cara menggunakan Lazy Loading di WordPress. Kami mencakup semuanya mulai dari melakukannya sendiri dengan kode hingga menggunakan plugin seperti WP-Optimize.

Coba tambahkan Pemuatan Lambat ke situs web Anda dan beri tahu kami pengaruhnya terhadap kinerja Anda. Ada pertanyaan? Jangan ragu untuk bertanya di komentar.

Pertanyaan yang Sering Diajukan

Apakah Lazy Loading itu baik atau buruk?

Lazy Loading umumnya dianggap sebagai praktik yang baik karena memiliki beberapa manfaat. Ini membantu meningkatkan waktu muat halaman web dan meningkatkan pengalaman pengguna dengan memuat konten hanya saat diperlukan.

Apa itu Pemuatan Lambat di UI?

Pemuatan Lambat di UI mengacu pada praktik memuat elemen visual seperti gambar dan video hanya ketika berada di (atau dekat) area pandang pengguna.

Apakah Lazy Loading mempengaruhi SEO?

Jika diterapkan dengan benar, Lazy Loading dapat memberikan dampak positif pada SEO dengan meningkatkan waktu muat halaman dan meningkatkan pengalaman pengguna, yang keduanya merupakan faktor peringkat yang penting.

Haruskah Anda malas memuat semua gambar?

Meskipun bermanfaat untuk memuat lambat gambar yang berada di luar layar, hal ini tidak diperlukan untuk gambar yang langsung terlihat saat memuat halaman. Memuat gambar-gambar ini dengan segera dapat mencegah penundaan dalam tampilannya.

Apa masalah dengan pemuatan lambat?

Beberapa masalah dengan Pemuatan Lambat mencakup penundaan pemuatan konten saat pengguna menggulir, potensi masalah pengindeksan mesin telusur jika tidak diterapkan dengan benar, dan ketergantungan pada JavaScript, yang mungkin tidak didukung oleh semua browser.