Learn SvelteKit - Performance Optimization

#Introduction

Good performance is the result of measured decisions, not guesses. Episode 15 covers SvelteKit performance optimization systematically: profiling the app to find weak points, trimming bundle size, reducing hydration cost, and speeding up navigation with prefetching.

Most bottlenecks do not come from the framework, but from how the application is loaded: JavaScript that is too large, modules imported even though they are rarely used, and navigation that waits too long. All of these can be fixed with techniques available in the SvelteKit ecosystem.

After this episode, you know which steps to take when Lighthouse says the site is slow, and in which order the impact is greatest.

#Profiling and Build Analysis

#Starting with Browser Devtools

Before changing anything, measure first. The Performance panel in browser devtools shows what takes time: JavaScript download, parsing, layout, or rendering. Run an audit with Lighthouse and record Core Web Vitals as a baseline. Save the audit report to a file with npx lighthouse --save-report=html so you can compare after optimizing.

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

#Analyzing Build Output

The visualizer opens a diagram of each module's size after the build. From this diagram you can see which packages are largest and easiest to trim. Prioritize large modules that are rarely used — replacing or lazy-loading one big package usually has more impact than optimizing ten small ones.

#Minimizing Bundle and Code Splitting

#Lazy-Importing Heavy Modules

Modules used only in certain interactions — text editors, charts, PDF viewers — should not ride along in the main bundle. Use dynamic import so the module loads only when it is actually needed.

<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 splits the code into a separate chunk. The browser downloads it on demand, so the initial page code stays lean.

#Code Splitting per Route

SvelteKit splits JavaScript per route automatically: each page only loads the code it uses. You can help by avoiding imports of large components in +layout.svelte, which apply to all pages, and moving them to the routes that actually use them.

#Hydration and Client-Side Transitions

#Reducing Hydration Cost

Hydration is the process of bringing static HTML to life with JavaScript on the client. The less interactivity a page needs, the less JS must run. For purely presentational sections, avoid making them interactive components; use {@render} snippets instead, which are not shipped as separate components.

#View Transitions Between Routes

The View Transitions API enables smooth animation between pages without weighing down hydration. SvelteKit provides the onNavigate hook to enable it across the app.

Enabling view transitions

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

#Prefetching and Resource Hints

#Prefetching Navigation

SvelteKit can load the destination route's data and code before the user clicks, making navigation feel instant. Configure it through the data-sveltekit-preload-data attribute on an <a> or <nav> element.

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

The value "hover" loads data when the cursor nears the link; "tap" loads on touch; "off" disables it. Use prefetching on the navigations users are most likely to take, not on every link at once.

#Resource Hints for Critical Assets

Resource hints tell the browser what to prepare ahead of time. <link rel="preload"> for assets used immediately on the page, and preconnect for origins you will contact. Place them in +layout.svelte for assets shared across pages.

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

#Closing

Key takeaways:

• Measure first with devtools and Lighthouse before optimizing.
• A build visualizer shows the big packages worth trimming.
• Dynamic import separates heavy modules from the main bundle.
• Routes are already code-split automatically; keep layouts light.
• Reduce hydration with snippets and enable view transitions.
• Use prefetching and resource hints for frequently used navigation.

In the next episode we get into testing & quality: unit testing with Vitest and Svelte Testing Library, integration testing and API route tests, E2E testing with Playwright, plus static analysis and type checking.