Skip to main content

Best practices

Performance

Edit this page on GitHub

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.

Measuring

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:

Instrumenting

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.

Multimedia

Images

Typically the most impactful area of opportunity is optimizing your images. Please see the images page for more details. Additionally, you may use Lighthouse for identifying images needing optimization.

Fonts

Preload fonts when possible with the appropriate handle option. Also ensure you've set the font-display option appropriately. You may reduce the size of font files with subsetting.

Videos

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 sound out of muted videos using a tool like FFmpeg

Code size

Svelte version

We recommend running the latest version of Svelte. Svelte 4 is significantly smaller and faster than Svelte 3 and Svelte 5 is very significantly smaller than Svelte 4.

Packages

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 scripts

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 webwork with Partytown.

Selective loading

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.

Hosting

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. You should also consider serving images from a CDN — the hosts for many adapters offered by SvelteKit will do this automatically.

Further reading

For the most part, building an performant SvelteKit app is the same as building any performant web app. You should be able to apply information from the following general performance resources to any web experience you build:

previous Packaging