Performa website itu penting banget, bro! Kalau website lambat, pengunjung bisa jadi bete dan akhirnya pergi. Makanya, salah satu cara yang sering dipakai buat ningkatin kecepatan website adalah dengan lazy loading JavaScript. Teknik ini bikin file JavaScript cuma dimuat (load) pas dibutuhkan, jadi beban awal loading halaman bisa berkurang dan penggunaan bandwidth juga lebih irit.
Di artikel ini, kita bakal bahas secara santai dan langkah demi langkah gimana caranya pakai lazy loading dengan LocalStorage. LocalStorage ini adalah salah satu fitur penyimpanan data di browser modern yang bisa kamu manfaatin buat simpan informasi kecil-kecilan. Jadi, selain ngebantu lazy loading, LocalStorage juga bisa ngejaga data supaya enggak perlu dimuat berulang-ulang.
Kenapa Performa Website Penting?
Setiap orang pasti pengen website yang cepat dan responsif, kan? Apalagi sekarang, banyak pengguna yang langsung pengen informasi dengan cepat. Dengan performa website yang baik, pengunjung bakal betah, dan tentunya SEO (Search Engine Optimization) website kamu juga bakal makin oke.
Salah satu penyebab lambatnya loading halaman adalah karena banyaknya file JavaScript yang harus dimuat sekaligus. Nah, di sinilah lazy loading berperan. Dengan lazy loading, file-file JavaScript yang nggak langsung dibutuhkan bisa ditunda pemuatannya sampai saat pengguna benar-benar interaksi dengan website.
Apa Itu Lazy Loading?
Konsep Dasar Lazy Loading
Lazy loading itu intinya adalah menunda pemuatan file-file yang nggak esensial saat pertama kali halaman diakses. Jadi, daripada memuat semua JavaScript sekaligus, kita tunda pemuatan file-file tertentu sampai ada interaksi dari pengguna, misalnya scroll, klik, atau gerakan mouse. Teknik ini bisa bikin waktu loading awal jadi lebih cepat dan menghemat penggunaan data.
Manfaat Menggunakan Lazy Loading
- Lebih Cepat: Halaman website bisa ditampilkan lebih cepat karena file-file JavaScript yang berat nggak langsung dimuat.
- Hemat Bandwidth: Pemanggilan file hanya saat diperlukan berarti data yang diunduh pun lebih sedikit.
- Pengalaman Pengguna yang Lebih Baik: Pengguna enggak perlu nunggu lama sampai seluruh script selesai dimuat, jadi mereka bisa langsung interaksi dengan website.
Kenalan Sama LocalStorage
LocalStorage adalah fitur penyimpanan data yang ada di browser modern. Fitur ini memungkinkan kita menyimpan data dalam bentuk key-value secara lokal di sisi pengguna. Data yang disimpan di LocalStorage bakal tetap ada meskipun browser ditutup, jadi bisa dipakai untuk berbagai keperluan seperti menyimpan preferensi pengguna, data cache, dan tentunya sebagai trigger untuk lazy loading.
Dalam konteks lazy loading, kita bisa pakai LocalStorage buat mencatat apakah JavaScript sudah dimuat atau belum. Jadi, kalau sudah dimuat sebelumnya, kita bisa langsung ambil data dari LocalStorage tanpa perlu menunggu interaksi lagi.
Cara Kerja Lazy Loading dengan LocalStorage
Proses Awal
Pada awalnya, kita buat sebuah promise bernama lazy yang bakal menangani pemicu lazy loading. Promise ini bakal resolve (selesai) ketika ada aksi tertentu dari pengguna, misalnya scroll atau klik. Di sinilah peran LocalStorage masuk: kita cek apakah ada key tertentu yang menandakan bahwa lazy loading sudah pernah terjadi.
Kode di bawah ini bakal ngecek key bernama IS_LAZIED di LocalStorage. Kalau key itu ada dan bernilai true, berarti JavaScript udah pernah dimuat, jadi langsung resolve promise-nya.
window.lazy =
window.lazy ||
new Promise((resolve) => {
const LOCAL_KEY = "IS_LAZIED";
const LOCAL_VALUE = "true";
// Event awal yang bakal dipakai buat trigger lazy
const WINDOW_INITIAL_EVENTS = ["scroll", "click"];
// Event tambahan setelah window full load
const WINDOW_ONLOAD_EVENTS = [
"keydown",
"mouseover",
"touchmove",
"touchstart",
];
// Gabungan semua event yang bakal dipakai
const WINDOW_EVENTS = WINDOW_INITIAL_EVENTS.concat(WINDOW_ONLOAD_EVENTS);
function getLazied() {
try {
return localStorage.getItem(LOCAL_KEY) === LOCAL_VALUE;
} catch (_) {
return true;
}
}
function setLazied(lazied = true) {
try {
if (lazied) {
localStorage.setItem(LOCAL_KEY, LOCAL_VALUE);
} else {
localStorage.removeItem(LOCAL_KEY);
}
} catch (_) {
// do nothing
}
}
function execute(data) {
setLazied(true);
resolve({ type: data.type.toLowerCase() });
// Hapus event listener biar nggak memicu berulang kali
for (const type of WINDOW_EVENTS) {
window.removeEventListener(type, execute);
}
}
if (getLazied()) {
resolve({ type: "local" });
} else {
// Cek apakah dokumen udah pernah discroll
if (
document.documentElement.scrollTop !== 0 ||
(document.body && document.body.scrollTop !== 0)
) {
execute({ type: "scroll" });
} else {
// Pas window udah load, tambahin event listener tambahan
const onLoad = () => {
window.removeEventListener("load", onLoad);
for (const type of WINDOW_ONLOAD_EVENTS) {
window.addEventListener(type, execute);
}
};
window.addEventListener("load", onLoad);
// Pas awal-awal, tambahin event listener untuk scroll dan click
for (const type of WINDOW_INITIAL_EVENTS) {
window.addEventListener(type, execute);
}
}
}
});
Penjelasan Kode
Di kode di atas, kita mendefinisikan beberapa event seperti scroll, click, keydown, mouseover, touchmove, dan touchstart yang bakal memicu eksekusi lazy loading. Fungsi getLazied dan setLazied bertugas buat ngecek dan mengatur status lazy loading di LocalStorage. Jadi, begitu ada interaksi yang memicu fungsi execute, maka promise lazy bakal di-resolve dan event listener yang udah dipasang langsung dihapus supaya nggak trigger lagi.
Cara Penggunaan Lazy Loading
Menunggu Interaksi Pengguna
Promise lazy yang udah kita buat di atas bakal di-resolve saat pengguna mulai berinteraksi dengan halaman. Setelah promise ini resolve, kamu bisa memuat file JavaScript atau stylesheet eksternal, atau bahkan melakukan HTTP request sesuai kebutuhan.
Contoh pemakaian sederhana adalah seperti ini:
lazy.then((e) => {
// Load JS atau CSS secara dinamis
// Lakukan HTTP request kalau perlu
console.log(e.type) // Bisa 'scroll', 'click', 'keydown', 'mouseover', 'touchmove', 'touchstart' atau 'local'
});
Kode di atas bakal nge-print jenis interaksi yang memicu lazy loading. Jadi, kamu bisa tahu apa yang sebenarnya terjadi saat pengguna mulai berinteraksi dengan halaman.
Menggunakan Fungsi loadJS
Contoh lain yang keren adalah dengan menggunakan fungsi loadJS. Fungsi ini dibuat untuk memuat file JavaScript eksternal secara dinamis. Berikut adalah contoh kode fungsi loadJS:
/**
* Fungsi untuk memuat file Javascript secara dinamis
*
* @param {string | URL} source - Sumber dari script
* @param {((script: HTMLScriptElement) => void) | null} [beforeLoad] - Fungsi untuk memodifikasi elemen script sebelum loading
*
* @returns {Promise<HTMLScriptElement>} - Mengembalikan Promise yang resolve dengan instance HTMLScriptElement
*/
window.loadJS = function loadJS(source, beforeLoad) {
return new Promise((resolve, reject) => {
const script = document.createElement("script");
// Enable async dan defer secara default
Object.assign(script, { async: true, defer: true });
if (typeof beforeLoad === "function") {
beforeLoad(script);
}
function cleanUp() {
script.onload = null;
script.onerror = null;
}
script.src = source instanceof URL ? source.href : source;
script.onload = (e) => {
cleanUp();
resolve(e.target);
};
script.onerror = (e) => {
cleanUp();
reject(new URIError(`The script ${e.target.src} didn't load correctly.`));
};
const firstScript = document.getElementsByTagName("script")[0];
if (firstScript && firstScript.parentNode) {
firstScript.parentNode.insertBefore(script, firstScript);
} else {
document.head.appendChild(script);
}
});
}
Dengan fungsi loadJS ini, kamu bisa dengan mudah memasukkan file JavaScript eksternal ke dalam halaman kamu tanpa harus menambahkan tag <script> secara manual. Fungsi ini juga mendukung modifikasi elemen script lewat parameter beforeLoad sebelum file tersebut dimuat.
Contoh Implementasi loadJS dengan Lazy Loading
Kita bisa menggabungkan promise lazy dengan fungsi loadJS untuk memuat file JavaScript eksternal setelah interaksi pengguna terjadi. Contohnya seperti berikut:
lazy.then(() => {
return loadJS("./my-example-script.js", (script) => {
// Tambahkan async attribute sebelum loading
script.async = true;
});
}).then(() => {
// Setelah JS berhasil dimuat, lakukan aksi yang diperlukan
// Contohnya, panggil method dari library yang baru saja dimuat
// myExampleLib.myMethod();
});
Di sini, setelah promise lazy resolve, kita memanggil loadJS buat memuat file my-example-script.js. Begitu file tersebut sukses dimuat, kamu bisa menjalankan fungsi-fungsi lain dari file itu sesuai kebutuhan.
Lazy Loading untuk AdSense Script
Kalau kamu pakai Google AdSense di website kamu, pasti nggak mau AdSense script mengganggu kecepatan load halaman. Nah, kamu bisa juga pakai teknik lazy loading ini buat AdSense script. Contoh implementasinya seperti ini:
lazy.then(() => {
const adsenseScriptSource = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX";
return loadJS(adsenseScriptSource, (script) => {
script.async = true;
script.crossOrigin = "anonymous";
});
}).then(() => {
// Setelah AdSense script berhasil dimuat, kamu bisa menjalankan konfigurasi AdSense
// ...
});
Dengan cara ini, AdSense script cuma akan dimuat ketika pengguna mulai interaksi dengan halaman. Jadi, load awal website kamu nggak akan terganggu oleh script yang berat ini.
Kesimpulan
Mengoptimalkan performa website itu nggak harus ribet, asal kita paham caranya. Lazy loading JavaScript pakai LocalStorage adalah salah satu strategi keren buat ningkatin kecepatan load halaman sekaligus menghemat bandwidth. Dengan menunda pemuatan file-file JavaScript yang nggak esensial sampai pengguna benar-benar berinteraksi, website kamu bisa tampil lebih cepat dan responsif.
Kita udah ngebahas gimana cara kerja lazy loading, mulai dari cek status di LocalStorage, memasang event listener buat trigger lazy, hingga cara memanfaatkan promise lazy untuk memuat file JavaScript eksternal lewat fungsi loadJS. Bahkan, ada contoh penerapan lazy loading buat AdSense script supaya tampilan website kamu tetap optimal.
Teknik ini sangat berguna terutama buat website dengan banyak resource yang harus dimuat, sehingga pengalaman pengguna bisa jadi lebih menyenangkan dan interaksi di website bisa berlangsung tanpa hambatan. Jadi, kalau kamu lagi cari cara buat ningkatin performa website, cobain deh implementasi lazy loading ini. Ingat, kunci utamanya adalah menunda pemuatan file-file yang nggak langsung dibutuhkan dan memastikan pengguna tetap mendapatkan pengalaman yang mulus.
Selain itu, dengan memanfaatkan LocalStorage, kamu juga bisa menghindari pemuatan ulang script yang sama di setiap kunjungan. Ini artinya, kalau pengguna udah pernah interaksi sebelumnya, script yang udah dimuat nggak perlu dimuat lagi di kunjungan selanjutnya. Efisiensi seperti ini yang bisa bikin website kamu semakin cepat dan responsif.
Jadi, tunggu apa lagi? Yuk, coba terapkan teknik lazy loading dengan LocalStorage di project website kamu. Selain bikin tampilan awal website jadi lebih cepat, kamu juga bantu pengguna buat menikmati konten tanpa harus nunggu lama. Selamat mencoba dan semoga website kamu makin mantap!