Kesalahan Fatal JavaScript yang Membuat Website Lambat: Penyebab & Solusi

JavaScript modern adalah tulang punggung website interaktif. Namun, kesalahan pengembangan JavaScript bisa membuat website lambat, memengaruhi UX, SEO, dan konversi bisnis. Artikel ini membahas kesalahan paling umum, dampaknya, contoh nyata kode, dan solusi praktis.

1. Memuat Script Terlalu Banyak dan Tidak Teroptimasi

1.1 Masalah

Menambahkan terlalu banyak library atau script pihak ketiga.
Script besar dijalankan synchronous → render-blocking.

Contoh nyata:

<script src="jquery.js"></script>
<script src="chart.js"></script>
<script src="analytics.js"></script>

Semua script di atas dijalankan sebelum HTML render selesai.
Akibat: FCP (First Contentful Paint) lambat, CLS tinggi.

1.2 Solusi

Gunakan defer atau async untuk script non-kritis.

<script src="analytics.js" async></script>
<script src="chart.js" defer></script>

Gabungkan library atau gunakan tree-shaking untuk mengurangi bundle size.
Audit library pihak ketiga: hapus yang tidak penting.

2. Memanipulasi DOM Secara Berlebihan

2.1 Masalah

Query DOM berulang, append element satu per satu.
Hal ini menyebabkan layout thrashing → repaint & reflow berulang → CPU usage tinggi.

Contoh nyata yang buruk:

for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    document.body.appendChild(div);
}

2.2 Solusi

Gunakan DocumentFragment untuk batch DOM update.

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    fragment.appendChild(div);
}
document.body.appendChild(fragment);

Minimalkan query DOM berulang, simpan referensi elemen.

3. Event Listener Tidak Dihapus

3.1 Masalah

Event listener yang tidak dihapus → memory leak → halaman lambat seiring waktu.

window.addEventListener('scroll', function() {
    console.log('Scrolling...');
});

Jika halaman SPA, listener tetap aktif meskipun elemen sudah dihapus → memory usage meningkat.

3.2 Solusi

Hapus listener saat tidak diperlukan:

function onScroll() { console.log('Scrolling...'); }
window.addEventListener('scroll', onScroll);
// Saat komponen dihapus:
window.removeEventListener('scroll', onScroll);

4. Closure dan Memory Leak

4.1 Masalah

Menyimpan referensi ke elemen besar di closure → memory tidak dibebaskan.

function createBigClosure() {
    const bigData = new Array(1000000).fill('*');
    return function() {
        console.log(bigData[0]);
    }
}
const fn = createBigClosure();

Akibat: heap memory meningkat → browser lambat → crash pada SPA panjang.

4.2 Solusi

Lepaskan referensi setelah tidak digunakan:

let fn = createBigClosure();
fn = null; // memory bisa dibebaskan

Gunakan WeakMap / WeakSet untuk cache sementara.

5. Blocking Script dan Render-Blocking

5.1 Masalah

Script dijalankan sebelum rendering → halaman terlihat blank.
Script besar atau synchronous → FCP & LCP lambat.

Contoh nyata:

<script src="bundle.js"></script>

Bundle 1.2MB → render terblokir hingga eksekusi selesai.

5.2 Solusi

Gunakan defer:

<script src="bundle.js" defer></script>

Gunakan code splitting: load modul hanya saat dibutuhkan.

button.addEventListener('click', async () => {
    const module = await import('./heavyModule.js');
    module.init();
});

6. Tidak Mengoptimasi Animasi

6.1 Masalah

Animasi langsung manipulasi style atau layout → layout thrashing.

element.style.top = newTop + 'px'; // dipanggil di loop

CPU usage tinggi, FPS drop → janky animation.

6.2 Solusi

Gunakan requestAnimationFrame:

function animate() {
    element.style.transform = `translateY(${newTop}px)`;
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Gunakan CSS transform & opacity → GPU accelerated

7. Fetch API atau Ajax Blocking

7.1 Masalah

Memuat data synchronous atau terlalu banyak request simultan → network bottleneck

for (let i = 0; i < urls.length; i++) {
    const res = await fetch(urls[i]);
    console.log(await res.json());
}

Akibat: page load lambat, interaktivitas tertunda.

7.2 Solusi

Gunakan Promise.all untuk parallel request:

const results = await Promise.all(urls.map(url => fetch(url).then(r => r.json())));
console.log(results);

Cache hasil API → mengurangi request berulang.

8. Kurangnya Minifikasi & Compression

8.1 Masalah

File JS besar → network latency tinggi, load lambat
Contoh bundle SPA: 1.5MB → FCP mobile > 4 detik

8.2 Solusi

Minify JS (Terser, UglifyJS)
Compress dengan Gzip/Brotli di server
Tree-shaking → hapus kode tidak terpakai

9. Kesalahan Penggunaan Third-Party Library

9.1 Masalah

Library berat, tidak modular → bundle size meningkat, blocking rendering
Contoh nyata: menggunakan full jQuery + Chart.js + Lodash hanya untuk satu fungsi → bundle > 1MB

9.2 Solusi

Audit library → gunakan versi modular
Ganti library besar dengan lightweight alternative
Lazy load library saat dibutuhkan

10. Analisis Dampak Kesalahan JavaScript pada Performance

Kesalahan	Dampak pada Performance	Dampak UX/SEO
Script synchronous besar	FCP/LCP lambat	Bounce rate naik, SEO turun
DOM manipulation berulang	Repaint/Reflow tinggi	Animasi lambat, janky UI
Event listener tidak dihapus	Memory leak	SPA lama → browser crash
Closure besar	Memory leak	Performance drop, interaktivitas lambat
Blocking fetch API	Load lambat	Konten tertunda → SEO/UX buruk
Animasi style langsung	FPS drop	Janky animation, UX jelek
Tidak minify/compress	Network latency tinggi	Load lambat, CTR turun
Third-party library berat	Bundle besar	Initial load lambat, SEO buruk

11. Checklist Optimasi JavaScript untuk Production

Gunakan defer / async untuk script non-kritis
Minify & compress bundle JS
Tree-shaking → hapus kode tidak digunakan
Code splitting / lazy loading modul besar
Optimalkan DOM manipulation → DocumentFragment / virtual DOM
Hapus event listener yang tidak perlu
Hindari closure menyimpan data besar
Gunakan requestAnimationFrame untuk animasi
Parallel API request → Promise.all / caching
Audit third-party library → gunakan versi ringan/modular

12. Studi Kasus Nyata

12.1 E-Commerce SPA

Masalah:

1.2MB bundle JS, DOM manipulation 1000+ produk, fetch API serial
FCP mobile = 4.5 detik → bounce rate tinggi

Solusi:

Lazy load modul filter
DocumentFragment untuk render produk
Parallel API fetch
Bundle minified & compressed

Hasil:

FCP mobile = 1.5 detik
Bounce rate turun 18%
Interaktivitas smooth

12.2 Dashboard SaaS