Cara Terbaik untuk Menyesuaikan Pemuatan Malas Anda Sendiri untuk Situs Web

Lazy Loading digunakan untuk menunda pemuatan beberapa gambar atau elemen halaman web untuk nanti saat pengguna mengunjungi halaman web. Ini biasanya dilakukan untuk gambar dan elemen situs web di paro bawah. Idenya adalah daripada memuat seluruh halaman web sekaligus, Anda memuat beberapa bagian halaman web saat pengguna terus menggulir ke bawah.

Manfaat utama menggunakan lazy Loading adalah mengurangi waktu pemuatan situs web secara keseluruhan. Lazy Loading meningkatkan kinerja situs web dan memberikan pengalaman pengguna yang lebih baik dengan memuat bagian atas terlebih dahulu yang dapat langsung dilihat atau dibaca oleh pengunjung. Ketika pengunjung datang ke halaman web Anda dan harus menunggu lama, mereka kehilangan minat dan mungkin pergi. Namun, jika Anda memberi mereka sesuatu untuk ditonton atau dibaca secara instan saat Anda memuat sisa halaman web, Anda dapat membuat mereka tetap terhubung ke situs web Anda. Keuntungan kedua dari lazy Loading adalah pengurangan biaya. Gambar hanya diunduh jika pengunjung situs web mengunjungi bagian tertentu dari situs web tersebut. Oleh karena itu, jika pengunjung tidak menggulir ke bawah, lebih sedikit data yang diunduh di perangkat mereka, menghemat uang mereka.

Karena keunggulan ini, lazy Loading adalah cara terbaik untuk meningkatkan pengalaman dan efisiensi pengguna situs web Anda.

Anda dapat menyesuaikan Lazy Loading untuk situs web Anda dengan dua cara – menggunakan properti latar belakang CSS atau menggunakan tag <img>. Namun, metode tag <img> lebih umum dari keduanya karena teknik ini mudah digunakan.

<img> properti tag:

Pin

Saat tag <img> digunakan, browser menggunakan atribut src untuk memicu pemuatan gambar. Tidak masalah apakah itu gambar pertama atau gambar ke-100 dalam kode Anda. Jika browser menerima atribut src, itu akan memicu pemuatan gambar. Jadi untuk malas memuat gambar-gambar ini, tambahkan URL gambar ke atribut selain src. Misalnya, jika Anda menempatkan URL gambar di atribut data-src, browser tidak memicu pemuatan gambar karena atribut src kosong.

Sekarang setelah pemuatan di muka telah berhenti, kita perlu memberi tahu browser kapan gambar harus dimuat. Kami ingin memicu pemuatan gambar segera setelah memasuki viewport. Ada dua cara untuk memeriksa waktu gambar memasuki viewport:

1. Menggunakan acara JavaScript:

Pin

Dalam teknik ini, pendengar acara digunakan untuk mengubah ukuran, mengubah orientasi, dan menggulir acara di browser. Acara gulir adalah yang paling jelas. Ini digunakan untuk memeriksa kapan pengguna menggulir halaman web. Acara 'orientationChange' dan 'resize' sama pentingnya untuk lazy Loading. Acara pengubahan ukuran dipicu ketika ada perubahan ukuran jendela browser. Peristiwa 'orientationChange' terjadi ketika perangkat diputar dari mode potret ke lanskap atau sebaliknya. Dalam kasus ini, jumlah gambar yang terlihat di layar akan berubah, jadi kita perlu memicu pemuatan gambar.

Ketika salah satu peristiwa ini terjadi, kami mencari semua gambar yang ada di halaman yang belum dimuat. Dengan memeriksa semua gambar yang diturunkan yang ada di halaman web yang sekarang ada di viewport, kami menemukan gambar yang perlu dimuat secara instan. Ini dilakukan dengan menggunakan bagian atas gulir dokumen saat ini, tinggi jendela, dan offset atas gambar.

Jika gambar telah memasuki viewport, kami mengambil URL gambar dari atribut data-src dan menempatkannya di atribut src yang memicu pemuatan gambar. Kemudian kita harus menghapus kelas lazy dari gambar karena kelas ini membuat gambar dimuat dengan malas. Ketika semua gambar dimuat, pendengar acara dihapus.

Dalam kasus gulir, acara gulir memicu terus menerus. Jadi untuk meningkatkan kinerja, kita dapat menambahkan batas waktu kecil yang akan menghambat eksekusi lazy loading.

2. Menggunakan API pengamat persimpangan:

Pin

Intersection Observer API adalah API yang relatif baru di browser. Teknik ini membuatnya sangat sederhana untuk mendeteksi waktu elemen yang memasuki viewport. Teknik ini memberikan kinerja yang sangat baik tanpa menggunakan Matematika yang rumit dibandingkan dengan metode sebelumnya.

Pertama, kita harus melampirkan observer ke semua gambar yang membutuhkan lazy Loading. Ketika API mendeteksi sebuah gambar telah memasuki viewport, ia mengambil URL dari data-src dan memasukkannya ke dalam atribut src menggunakan metode 'isIntersecting' untuk memicu pemuatan gambar. Setelah itu, kelas malas dihapus bersama dengan menghapus pengamat.

Intersection Observer API bekerja dengan cepat tanpa membuat situs tampak lamban saat menggulir dibandingkan dengan menggunakan peristiwa JavaScript. Dengan teknik pendengar acara, kami harus menambahkan batas waktu yang menambahkan sedikit penundaan. Namun, Intersection Observer API tidak didukung oleh semua browser. Oleh karena itu, pendengar acara telah menjadi pilihan populer bagi pengguna.

Properti latar belakang CSS:

Pin

Untuk memuat gambar latar belakang CSS, browser harus membuat CSS Object Model (CSSOM) bersama dengan Document Object Model (DOM) untuk memutuskan apakah gaya CSS akan diterapkan ke DOM yang ada di dokumen yang ada. Jika aturan CSS tidak berlaku untuk elemen, browser tidak akan memuat gambar latar belakang.

Dengan teknik ini, kita menerapkan properti CSS background-image ketika sebuah elemen datang ke viewport. Ada elemen dengan ID bg-image (gambar latar belakang) di CSS. Setelah kelas lazy ditambahkan ke gambar, dalam teknik CSS, kami menimpa properti bg-image dan membuatnya tidak ada.

Menambahkan kelas .lazy ke #bg-image lebih disukai di CSS daripada menggunakan #bg-image saja. Awalnya, browser menerapkan background-image: none ke elemen. Setelah kami menggulir halaman web, event listener atau Intersection Observer mendeteksi gambar yang ada di viewport dan menghapus kelas .lazy. Ini tidak berlaku dalam teknik CSS karena properti bg-image diterapkan ke elemen yang memicu pemuatan gambar latar belakang.

Jadi, berikut adalah dua cara Anda dapat menyesuaikan situs web lazy loading Anda sendiri. Kedua teknik ini memberikan hasil yang luar biasa. Namun, jika Anda menginginkan teknik langsung, Anda harus menggunakan tag <img>. Ada banyak plugin yang tersedia bagi pengguna WordPress untuk menyesuaikan gambar pemuatan lambat di situs web WordPress mereka juga. Mengoptimalkan gambar untuk situs web WordPress Anda menggunakan plugin ini, bersama dengan pemuatan lambat akan meningkatkan kinerja situs web Anda, memberikan pengalaman yang lebih baik dan membantu dengan SEO juga.