` element. Every page should have a unique, descriptive title: ```svelte <svelte:head> <title>Todo List

## Pages ### auth Authentication and authorization patterns in SvelteKit: session IDs (revocable, DB-dependent) vs JWT (non-revocable, faster); implement via server hooks and locals; use Lucia for session-based auth. ## Authentication vs Authorization Authentication verifies user identity based on credentials. Authorization determines which actions users are allowed to take. ## Sessions vs Tokens After credential verification, users need to be authenticated on subsequent requests using either: **Session IDs**: Stored in database, can be immediately revoked, but require a database query per request. **JWT (JSON Web Tokens)**: Not checked against datastore, cannot be immediately revoked, but offer improved latency and reduced datastore load. ## Implementation in SvelteKit Auth cookies can be checked inside server hooks. When a user matches provided credentials, store user information in `locals` (available in server hooks). ## Recommended Approach Use Lucia for session-based auth. It provides example code and projects for SvelteKit integration. Add it with `npx sv create` (new project) or `npx sv add lucia` (existing project). Auth systems are tightly coupled to web frameworks because most code involves validating user input, handling errors, and directing users appropriately. Generic JS auth libraries often include multiple web frameworks, so SvelteKit-specific guides like Lucia are preferable to avoid framework bloat in your project. ### performance Performance optimization: built-in features (code-splitting, preloading, coalescing, inlining, prerendering), diagnosing tools (PageSpeed Insights, WebPageTest, devtools), asset optimization (images with enhanced-img, video compression, font subsetting/preloading), code reduction (latest Svelte, package analysis, server-side analytics, dynamic imports), navigation (link preloading, promise returns, waterfall prevention via server load functions and database joins), hosting (same-datacenter backend, edge deployment, CDN images, HTTP/2+). ## Built-in Performance Features SvelteKit automatically provides: - Code-splitting (load only code for current page) - Asset preloading (prevent waterfalls) - File hashing (cache assets forever) - Request coalescing (group separate server `load` function requests into single HTTP request) - Parallel loading (separate universal `load` functions fetch simultaneously) - Data inlining (replay server-rendered `fetch` requests in browser without new request) - Conservative invalidation (`load` functions re-run only when necessary) - Prerendering (per-route configurable for pages without dynamic data) - Link preloading (eagerly anticipate data/code for client-side navigation) ## Diagnosing Issues Use Google PageSpeed Insights and WebPageTest for deployed sites. Browser devtools: - Chrome: Lighthouse, Network, Performance - Edge: Lighthouse, Network, Performance - Firefox: Network, Performance - Safari: enhancing the performance of your webpage Test in preview mode after building, not dev mode. For slow API calls, instrument backend with OpenTelemetry or Server-Timing headers. ## Optimizing Assets ### Images Use `@sveltejs/enhanced-img` package. Lighthouse identifies worst offenders. ### Videos - Compress with Handbrake, convert to `.webm` or `.mp4` - Lazy-load below-the-fold videos with `preload="none"` (slows playback initiation) - Strip audio from muted videos with FFmpeg ### Fonts SvelteKit doesn't preload fonts by default (may download unused weights). In `handle` hook, call `resolve` with `preload` filter to include fonts. Subset fonts to reduce file size. ## Reducing Code Size ### Svelte Version Use latest Svelte version (5 < 4 < 3 in size/speed). ### Packages Use `rollup-plugin-visualizer` to identify large packages. Inspect build output with `build: { minify: false }` in Vite config. Check network tab in devtools. ### External Scripts Minimize third-party scripts. Use server-side analytics (Cloudflare, Netlify, Vercel) instead of JavaScript-based. Run third-party scripts in web worker with Partytown's SvelteKit integration to avoid blocking main thread. ### Selective Loading Static `import` declarations bundle automatically. Use dynamic `import(...)` to lazy-load conditionally. ## Navigation ### Preloading Speed up client-side navigation with link options (configured by default on ``). ### Non-essential Data Return promises from `load` function for slow data not needed immediately. Server `load` functions will stream data after navigation/initial page load. ### Preventing Waterfalls Waterfalls are sequential request chains (especially costly for mobile/distant servers). **Browser waterfalls**: HTML requests JS → CSS → background image/font. SvelteKit adds `modulepreload` tags/headers. Check devtools network tab for additional preload needs. Web fonts need manual handling. SPA mode causes waterfalls (empty page → JS → render). **Backend waterfalls**: Universal `load` fetches user → uses response to fetch items → uses that to fetch item details = multiple sequential requests. Solution: use server `load` functions to make backend requests from server instead of browser (avoids high-latency round trips). Server `load` functions can also have waterfalls (e.g., query user → query items) — use database joins instead. ## Hosting - Frontend in same data center as backend to minimize latency - For sites without central backend, deploy to edge (many adapters support this, some support per-route configuration) - Serve images from CDN (many adapter hosts do this automatically) - Use HTTP/2 or newer (Vite's code splitting creates many small files for cacheability, requires parallel loading) ## Further Reading Building performant SvelteKit apps follows general web performance principles. Apply Core Web Vitals information to any web experience. ### icons Two approaches to icons: CSS-based via Iconify (supports many sets, framework plugins), or Svelte libraries (avoid per-icon .svelte files due to Vite optimization issues). ## CSS Use Iconify for CSS-based icons. Iconify supports many popular icon sets via CSS inclusion. Works with CSS frameworks using Iconify's Tailwind CSS or UnoCSS plugins. No need to import icons into `.svelte` files. ## Svelte When choosing icon libraries for Svelte, avoid libraries that provide one `.svelte` file per icon. These can have thousands of files, severely slowing Vite's dependency optimization. This problem is especially pronounced when icons are imported both via umbrella imports and subpath imports, as noted in the vite-plugin-svelte FAQ. ### images Image optimization via Vite built-in handling, @sveltejs/enhanced-img plugin (auto-generates formats/sizes/width/height), or CDN for dynamic images; best practices for performance and layout stability. ## Image Optimization Techniques Images impact app performance. Optimize by generating optimal formats (`.avif`, `.webp`), creating different sizes for different screens, and ensuring effective caching. ## Vite's Built-in Handling Vite automatically processes imported assets with hashing for caching and inlining for small assets. ```svelte

``` ## @sveltejs/enhanced-img Plugin providing plug-and-play image processing: serves smaller formats (avif/webp), sets intrinsic width/height to prevent layout shift, creates multiple sizes for various devices, strips EXIF data. **Note:** Only optimizes files on your machine during build. For images from CDN/CMS/backend, use dynamic loading approach. ### Setup ```sh npm i -D @sveltejs/enhanced-img ``` ```js import { sveltekit } from '@sveltejs/kit/vite'; import { enhancedImages } from '@sveltejs/enhanced-img'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [ enhancedImages(), // must come before SvelteKit plugin sveltekit() ] }); ``` First build is slower due to image transformation, but subsequent builds use cache at `./node_modules/.cache/imagetools`. ### Basic Usage ```svelte ``` At build time, replaced with `` wrapped by `

Best Practices