Apakah kamu pernah merasakan bahwa website yang kamu miliki lambat untuk diakses? Website yang lambat diakses biasanya terjadi karena beberapa hal, seperti mulai dari konten website yang terlalu penuh, penggunaan coding yang tidak perlu, terlalu banyak menggunakan gambar/video, bahkan hingga kinerja dari server yang lambat. Untuk menanggulangi hal tersebut kamu perlu menggunakan optimisasi kecepatan website.
Optimisasi kecepatan website bertujuan untuk mengurangi waktu yang dibutuhkan untuk memuat seluruh halaman website. Ini dapat dilakukan dengan cara mengkompres gambar, mengurangi ukuran file JavaScript dan CSS, dan menggunakan teknik caching yang efektif. Hal ini penting untuk meningkatkan pengalaman pengguna dan memastikan bahwa website dapat dimuat dengan cepat, terutama pada koneksi internet yang lambat.
Salah satu cara yang cukup efektif untuk mempercepat waktu load website adalah dengan menerapkan lazy loading pada konten website. Apa itu lazy loading dan bagaimana cara menerapkannya pada website? Berikut adalah ulasannya.
Apa itu Lazy Loading?
Lazy loading mempengaruhi waktu load website dengan cara memuat hanya bagian dari halaman yang segera dibutuhkan oleh pengguna, dan memuat bagian lainnya saat mereka dibutuhkan. Ini berarti bahwa waktu yang dibutuhkan untuk memuat halaman secara keseluruhan bisa lebih pendek dibandingkan jika semua elemen dimuat pada saat yang sama.
Dengan lazy loading, elemen seperti gambar, dan video hanya akan dimuat saat mereka dalam jangkauan layar pengguna atau saat mereka dibutuhkan. Dengan demikian beban pada server dan koneksi internet bisa dikurangi, dan bisa mempercepat waktu load halaman dan meningkatkan pengalaman pengguna. Oleh karena itu, lazy loading adalah teknik optimisasi waktu load website yang efektif dan dapat digunakan untuk meningkatkan performa website secara keseluruhan.
Kelebihan Menggunakan Lazy Loading
Ada beberapa alasan mengapa menggunakan lazy loading:
-
Mengurangi Beban Server
Lazy loading membantu mengurangi beban pada server dengan memuat hanya bagian dari halaman yang dibutuhkan pada saat tertentu, bukan semuanya pada saat yang sama.
-
Mempercepat Waktu Load Halaman
Lazy loading mempercepat waktu load halaman karena hanya memuat elemen yang dibutuhkan saat pengguna melihat halaman, bukan saat halaman pertama kali dimuat.
-
Meningkatkan Pengalaman Pengguna
Dengan mempercepat waktu load halaman, lazy loading meningkatkan pengalaman pengguna dan mengurangi tingkat gagal load halaman.
-
Menghemat Penggunaan Daya
Di sisi pengunjung, lazy loading juga membantu menghemat penggunaan data internet dan daya baterai pada perangkat mobile karena hanya memuat bagian yang dibutuhkan.
-
Mengurangi Ukuran File
Lazy loading membantu mengurangi besar file dengan memuat hanya elemen yang dibutuhkan dan menunda memuat elemen lain sampai mereka dibutuhkan.
Cara Menggunakan Lazy Loading
Terdapat beberapa metode yang bisa digunakan untuk menerapkan lazy loading pada website. Berikut adalah beberapa di antaranya.
-
Menggunakan Plugin atau Library
Ada beberapa plugin atau library populer seperti Lazy Load, Unveil.js, dan banyak lainnya yang dapat membantu memasang lazy loading pada website.
-
Menggunakan JavaScript
Kamu dapat menulis kode JavaScript untuk memuat elemen secara dinamis saat mereka dibutuhkan. Kamu dapat menggunakan event scroll atau intersection observer untuk memantau kapan elemen harus dimuat.
-
Menggunakan HTML dan CSS
Selain itu kamu juga bisa menggunakan atribut loading pada tag gambar untuk memuat gambar secara dinamis saat mereka dibutuhkan.
-
Menggunakan Responsive Image Approach
Terakhir, kamu bisa menggunakan pendekatan gambar responsive dengan menggunakan tag srcset dan sizes untuk memuat gambar yang cocok dengan ukuran layar.
Cara Membuat Lazy Loading dengan HTML, CSS, dan JavaScript
Untuk menerapkan lazy loading pada website kamu bisa langsung menambahkan kode berikut pada coding pada page website. Kamu dapat menggunakan kode-kode berikut pada website, tapi ingat untuk menyesuaikan kode sesuai dengan konten pada website.
-
Menggunakan HTML
<img src="https://www.biznetgio.com/news/image-placeholder.jpg" data-src="image.jpg" alt="Image"> -
Menggunakan CSS
img {
display: block;
width: 100%;
height: auto;
} -
Menggunakan JavaScript
const images = document.querySelectorAll("img");
function loadImage() {
images.forEach(img => {
const src = img.getAttribute("data-src");
if (!src) return;
img.setAttribute("src", src);
img.removeAttribute("data-src");
});
}
window.addEventListener("load", loadImage);
Kode di atas akan membuat proses pemuatan halaman web dengan konten selain gambar terlebih dahulu. Ini adalah implementasi dasar dari lazy loading dengan HTML, CSS, dan JavaScript, dan dapat dikustomisasi sesuai kebutuhan.
Plugin Lazy Loading di WordPress
Selain dengan menambahkan kode secara manual, kamu juga bisa menggunakan plugin untuk dapat dengan mudah menambahkan lazy loading pada website. Terdapat beberapa plugin populer yang dapat digunakan untuk memasang lazy loading pada website WordPress.
-
WP Rocket
Plugin ini memiliki fitur built-in untuk lazy loading dan memiliki banyak pilihan kustomisasi untuk memuat elemen secara dinamis. Selain itu, WP rocket juga memiliki fitur lengkap untuk mengoptimasi kecepatan website seperti penerapan caching, membersihkan database yang tidak perlu, kompres HTML, CSS, atau JavaScript, dan lainnya.
-
a3 Lazy Load
Plugin ini sangat mudah digunakan dan memiliki beberapa pilihan kustomisasi untuk memuat gambar, dan objek lain secara dinamis. Selain itu plugin ini juga memiliki kemampuan untuk menonaktifkan lazy load pada perangkat mobile serta kompatibilitas dengan beragam plugin lain seperti WooCommerce.
-
Lazy Load by WP Smush
Lazy Load by WP Smush tidak hanya memiliki fitur lazy loading, tetapi juga memiliki fitur untuk mengurangi ukuran gambar tanpa merusak kualitas gambar dan mempercepat website. Selain itu, plugin ini juga sudah termasuk WP Smush untuk mengoptimalkan kecepatan website secara lebih komprehensif.
-
BJ Lazy Load
Terakhir BJ Lazy Load, plugin ini sangat sederhana dan mudah digunakan, dan seperti plugin-plugin sebelumnya yaitu berfungsi untuk memuat gambar pada website secara dinamis sehingga bisa mempercepat waktu load website.
Semua plugin bisa digunakan secaragratis dan dapat diunduh dari repositori plugin WordPress. Pastikan untuk membaca deskripsi dan ulasan plugin sebelum memasangnya untuk memastikan bahwa plugin tersebut sesuai dengan kebutuhan website-mu.
Dapatkan Akses Website Lebih Cepat dengan NEO WordPress
Sekian penjelasan lengkap mengenai lazy load. Lazy load sendiri bisa diterapkan dengan mudah pada website WordPress baik dengan menambahkan tag HTML maupun dengan menggunakan plugin. Selain itu website yang cepat juga bisa kamu dapatkan dengan menggunakan layanan WordPress hosting instan dari Biznet Gio yaitu NEO WordPress.
NEO WordPress merupakan layanan Serverless WordPress hosting yang bisa langsung digunakan tanpa perlu repot konfigurasi hosting atau server terlebih dahulu dan memiliki performa cepat dan responsif. Selain itu, kamu juga bisa mendapatkan WordPress versi terbaru yang kompatibel dengan berbagai plugin WordPress dan lengkap dengan fitur upgrade sumber daya komputasinya.
NEO WordPress juga dilengkapi gratis SSL, domain sementara, dan bandwidth hingga 10 Gbps tanpa kuota. Dapatkan NEO WordPress dengan harga Rp50.000/bulan dengan sumber daya komputasi dedicated 2 vCPU, 2 GB RAM, dan 10 GB Storage yang dibagi ke dalam 2 pod di mana masing-masing untuk apps dan database dengan 1 vCPU, 1 GB RAM, dan 5 GB storage yang bisa di upgrade dengan mudah.
Selain itu NEO WordPress berjalan di atas cluster Kubernetes sehingga memiliki skalabilitas dan ketersediaan tinggi. Kunjungi Portal Biznet Gio sekarang, untuk informasi lebih lanjut hubungi kami via live chat atau hubungi [email protected].