My experience optimizing CMP/WASM The approaches ...
# compose-ui-showcase
t
My experience optimizing CMP/WASM The approaches I used:- 1. Zstd compressing the generated WASM binaries for smaller size transferred over the internet and faster decompression times 2. Loading the WASM and glue JS in parallel rather than the default sequential 3. Used a CDN to deliver the resources (I used AWS CloudFront, but any good CDN will do the job) Using all these I was able to get consistent 1s load times after clearing the cache, which I think is pretty good You can try it yourself at: https://dxx3q4hyoo2sq.cloudfront.net/ Or the version which serves html and css from github pages but loads the binaries from CDN at: https://taz03.github.io/matrix-calculator/ Also everything is open-source at: https://github.com/Taz03/matrix-calculator
🏎️ 5
🔥 8
K 16
p
Why not to embed style.css into index.html ? 1 less request
💡 1
t
But then if your CSS gets big, the HTML will take longer to load, and hence the binaries will start loading later.
p
In that case yes, but if it is canvas based UI, then it most probably will be very small. Only for basic things like body style and loading animation.
t
Totally agree, could be a valid optimization but don't think it'll actually affect the load time by noticeable amount
@PHondogo did the change, now css is inside html
🔥 1
a
I had a look at the optimizations yesterday (great stuff) I found the most dramatic improvement to be preloading the app. Using Zstd does indeed slim down the size slightly. didn't notice significant speed improvements but still a win Didn't try the CDN yet
t
actually a good cdn and preloading are both equally effective, if you preload but your cdn is slow then it'll end up being slow. Zstd compression will be the least noticeable but in benchmarking its the clear winner tho if you do go that route u'll still need to support gzip, coz many browsers doesn't support zstd.
a
Just tried CND. wow!
it 'just' loads