Belajar SvelteKit - Performance Optimization

#Pendahuluan

Performa yang baik adalah hasil dari keputusan yang diukur, bukan tebakan. Episode 15 membahas optimasi performa SvelteKit secara sistematis: memprofil aplikasi untuk menemukan titik lemah, memangkas ukuran bundle, mengurangi beban hydration, serta mempercepat navigasi dengan prefetching.

Sebagian besar bottleneck bukan berasal dari framework, melainkan dari cara aplikasi dimuat: JavaScript yang terlalu besar, modul yang diimpor padahal jarang dipakai, dan navigasi yang menunggu terlalu lama. Semua ini bisa diperbaiki dengan teknik yang tersedia di ekosistem SvelteKit.

Setelah episode ini, kalian tahu langkah apa yang harus diambil saat Lighthouse bilang situs lambat, dan urutan mana yang paling berdampak.

#Profiling dan Build Analysis

#Memulai dari Browser Devtools

Sebelum mengubah apa pun, ukur dulu. Performance panel di browser devtools menunjukkan mana yang memakan waktu: download JavaScript, parsing, layout, atau rendering. Jalankan audit dengan Lighthouse dan catat metrik Core Web Vitals sebagai baseline. Simpan hasil audit ke file dengan npx lighthouse --save-report=html agar bisa dibandingkan setelah optimasi.

npm install -D vite-bundle-visualizer
npx vite-bundle-visualizer

#Menganalisis Hasil Build

Visualizer membuka diagram ukuran tiap modul setelah build. Dari diagram ini terlihat paket yang paling besar dan mudah dipangkas. Prioritaskan modul besar yang jarang digunakan — mengganti atau me-lazy-load satu paket besar biasanya lebih berdampak daripada mengoptimalkan sepuluh paket kecil.

#Minimizing Bundle dan Code Splitting

#Lazy Import Modul Berat

Modul yang hanya dipakai pada interaksi tertentu — editor teks, chart, PDF viewer — jangan ikut dalam bundle utama. Gunakan dynamic import sehingga modul dimuat hanya saat benar-benar dibutuhkan.

<script>
    import { onMount } from "svelte";
    let modulChart;
 
    onMount(async () => {
        modulChart = await import("$lib/chart-berat");
    });
</script>
 
<button onclick={() => modulChart?.gambar()}>Tampilkan grafik</button>

Dynamic import memisahkan kode ke chunk terpisah. Browser mengunduhnya sesuai kebutuhan, sehingga kode untuk halaman awal tetap ramping.

#Code Splitting per Route

SvelteKit memecah JavaScript per route secara otomatis: setiap halaman hanya memuat kode yang dipakainya. Kalian bisa membantu dengan menghindari impor komponen besar di +layout.svelte yang berlaku untuk semua halaman, dan memindahkannya ke route yang memang memakainya.

#Hydration dan Client-Side Transitions

#Mengurangi Beban Hydration

Hydration adalah proses menghidupkan HTML statis dengan JavaScript di client. Semakin sedikit interaktivitas yang diperlukan, semakin sedikit JS yang harus dijalankan. Untuk bagian yang murni tampilan, hindari membuatnya menjadi komponen interaktif; pakai snippet {@render} yang tidak dikirim sebagai komponen terpisah.

#View Transitions Antar Route

View Transitions API memungkinkan animasi mulus antara halaman tanpa membebani hydration. SvelteKit menyediakan hook onNavigate untuk mengaktifkannya di seluruh aplikasi.

Mengaktifkan view transition

import { onNavigate } from "$app/navigation";
 
onNavigate(() => {
    const { document } = globalThis;
    if (document.startViewTransition) {
        return new Promise((resolve) => {
            document.startViewTransition(() => resolve(undefined));
        });
    }
});

#Prefetching dan Resource Hints

#Prefetching Navigasi

SvelteKit bisa memuat data dan kode route tujuan sebelum pengguna mengklik, sehingga navigasi terasa instan. Atur melalui atribut data-sveltekit-preload-data pada elemen <a> atau <nav>.

<a href="/artikel" data-sveltekit-preload-data="hover">Artikel</a>

Nilai "hover" memuat data saat kursor mendekati tautan; "tap" memuat saat disentuh; "off" menonaktifkannya. Gunakan prefetch pada navigasi yang paling mungkin diambil pengguna, bukan semua tautan sekaligus.

#Resource Hints untuk Aset Penting

Resource hints memberi tahu browser apa yang harus disiapkan lebih awal. <link rel="preload"> untuk aset yang dipakai segera di halaman, dan preconnect untuk origin yang akan dihubungi. Pasang di +layout.svelte untuk aset lintas halaman.

<svelte:head>
    <link rel="preconnect" href="https://fonts.example.com" crossorigin />
</svelte:head>

#Penutup

Inti yang harus dibawa pulang:

• Ukur dulu dengan devtools dan Lighthouse sebelum mengoptimasi.
• Visualizer build menunjukkan paket besar yang layak dipangkas.
• Dynamic import memisahkan modul berat dari bundle utama.
• Route sudah di-code-split otomatis; jaga layout tetap ringan.
• Kurangi hydration dengan snippet dan aktifkan view transitions.
• Pakai prefetch dan resource hints untuk navigasi yang sering dipakai.

Di episode 16 selanjutnya kita membahas testing & quality: unit testing dengan Vitest dan Svelte Testing Library, integration testing dan API route tests, E2E testing dengan Playwright, serta static analysis dan type checking.