Best practices

Performance

SvelteKit strives to provide a highly performant experience by default. However, when building any web application you will always need to put in some effort to maintain fast speeds. Some tips are included below.

Measuringpermalink

For deployed sites, you can measure your page's performance with Google's PageSpeed Insights. More advanced users may also like to use WebPageTest.

You can also use your browser's developer tools to evaluate your page's performance and identify areas of opportunity. Check out some of the resources below if you're not already familiar with your browser's developer tools:

Chrome - Lighthouse, Network, and Performance tabs in the developer tools
Firefox - Network and Performance tabs in the developer tools
Edge - Lighthouse, Network, and Performance tabs in the developer tools
Safari - enhancing the performance of your webpage

Instrumentingpermalink

If you see in the network tab of your browser that an API call is taking a long time and you'd like to understand why, you may consider instrumenting your backend with a tool like OpenTelemetry or Server-Timing headers.

Multimediapermalink

Imagespermalink

Typically the most impactful area of opportunity is optimizing your images. Svelte provides an offically-supported image optimization package. Please see the images page for more details. Additionally, you may use Lighthouse for identifying images needing optimization.

Fontspermalink

Preload fonts when possible with the appropriate by calling resolve with the appropriate preload option value in the handle hook. Also ensure you've set the font-display option appropriately in your CSS. Additionally, you may reduce the size of font files with subsetting.

Videospermalink

Video are very large files and so extra care should be taken to ensure that they're optimized:

Compress videos with tools such as Handbrake. Consider converting the videos to HTML5 video formats such as WebM or MP4.
Lazy load videos located below the fold.
Strip the audio track out of muted videos using a tool like FFmpeg.

Code sizepermalink

Svelte versionpermalink

We recommend running the latest version of Svelte. Svelte 4 is significantly smaller and faster than Svelte 3. The Svelte 5 preview is very significantly smaller and faster than Svelte 4 — though we don't recommend users upgrade to this version yet as it's not currently production ready.

Packagespermalink

rollup-plugin-visualizer can be helpful for identifying which packages are adding the most size to your site. You may also find areas of opportunity manually inspecting the build output with build: { minify: false } or via the network tab of your browser's developer tools.

External scriptspermalink

Try to minimize the number of third-party scripts running in the browser. E.g. instead of using JavaScript-based analytics tracking, you may wish to use server-side implementations. Many hosting providers with SvelteKit adapters offer such functionality such as Netlify, Cloudflare, and Vercel.

You also may consider running third-party scripts in a webworker with Partytown's SvelteKit integration.

Selective loadingpermalink

Code imported via static import will be automatically bundled into your page's code. If there is a piece of code you need only when some condition is met, use a dynamic import.

Hostingpermalink

Your frontend should be located in the same data center as your backend for minimal latency. For sites with no backend, many SvelteKit adapters support deploying to "the edge", which means your code will be distributed globally so it can run next to your users. Some adapters even support configuring deployment on a per-page basis. You should also consider serving images from a CDN — the hosts for many adapters offered by SvelteKit will do this automatically.

Ensure your host uses HTTP/2 or newer. Vite's code splitting creates numerous small files for improved cacheability, which results in excellent performance, but this does assume that your files can be loaded in parallel with HTTP/2.