Are there any ways to improve the loading speed wh...
# compose-web
z
Are there any ways to improve the loading speed when using WASM? It takes like 3 seconds for a relatively simple app to display its UI. During that loading it's just a blank white screen I'm already using the release build
i
Kotlin 2.1.20 added flags that are applied by default to help reduce output size. That doesn't directly solve your question though.
c
Only thing to do is show a css loading screen and use cache busting when building your binaries. Search in this channel it was discussed a couple of times already.
☝️ 1
m
As Christian mentioned, showing a CSS-based loading screen is currently the best approach to improve the perceived performance during that initial white screen. The actual loading time mostly comes from initializing the WASM runtime and fetching/parsing the binary, which is not significantly affected by app complexity or size — at least not in the early stages of a project. That said, there are some minor improvements you can make: • Make sure you're using a production (
release
) build with Kotlin 2.1.20 or newer, as it includes default flags that reduce output size and improve performance. • Minimize your app's startup work — avoid initializing heavy components or computations before your first frame. • Use lazy loading where possible. • Ensure your server serves the
.wasm
binary with
application/wasm
content type and proper compression (
gzip
or
brotli
). • Cache bust properly so returning users don't have to re-download the WASM unless it has actually changed. Still, don't expect massive reductions in cold start time — WASM loading currently just has that cost. Focusing on the user experience during that period (e.g., loading spinner, app branding, skeleton UI) can go a long way.
m
After the browser is started and the application has been downloaded and cached once, I’d say the to be expected start up time for any further start of the Wasm app is in a range of 1 - 1.5 seconds. At least that’s my observation on a 7 year old mac mini. If that sounds too long take a break, launch XCode and then come back with a smile to your Wasm app 😉.
m
Another one: normally it waits for the first wasm file to be loaded to start loading the second one, so I would suggest using <preload tags in html for both wasm binaries
m
I have converted my Wasm app to a PWA which can also run offline. This means that it contains a service worker which caches all relevant parts of the software. Depending on how this caching is done it may also speed up the initial start-up.