What is Code-Splitting by Route?
Automatic chunking of JavaScript per route so visitors download only what the current page needs. SvelteKit splits at route boundaries by default, keeping dashboard code out of marketing pages and initial loads lean.
Example
Because routes split automatically, the interactive dashboard bundle never loads on a marketing page visit. Each section ships its own chunk, so first visits stay light even as the app grows.
What people get wrong
Importing dashboard utilities into shared layout code drags them into every chunk. Keep route-only imports inside route modules so the splitter can do its job.
Related terms
Tree-Shaking
Build-time removal of unused exports so dead code never ships to browsers. Icon libraries and utility modules benefit most: importing one icon should add only that icon’s paths, never the whole set.
Preload & Prefetch
Resource hints that load critical files early or fetch likely-next files during idle time. Preload prioritizes fonts and hero assets for the current page, while prefetch warms the cache for routes the visitor may open next.
Lazy Loading
Deferring below-the-fold images, video, and iframes until near the viewport. It trims initial page weight, the strongest lever on Core Web Vitals pass rates after server response.
SSR Per Request
Fresh HTML rendered on the server for every request, used for personalized or frequently changing pages. Server rendering guarantees complete markup on first paint but costs compute per visit, so reserve it for dynamic routes.
CSR Shell
A minimal HTML shell that renders content in the browser after JavaScript loads. Client rendering suits authenticated dashboards behind login, where SEO matters less and interactivity starts only after scripts execute.
Hydration Cost
The JavaScript work that turns server-rendered HTML into an interactive app. Hydration replays component logic in the browser, so oversized bundles delay input readiness even when paint looks instant.