Bitshares Astro DEX UI Developer showcase - Optimizations and preparation for Suez!
Welcome back to the Astro UI Dev update blog!
This blog aims to continue updating you with regards to the development of the Bitshares Astro UI; a DEX UI which aims to be the most performant BTS DEX UI possible!
So what's new in today's dev blog post?
I recently blogged about the recent Bitshares collateral debt position form developments, in said blog post the initial performance results were somewhat lackluster:
Now, I know I said that I wouldn't get prematurely optimize this page because I could be doing other productive things, so I quickly:
- Created a bitsharesjs PR to support Suez
- Added suez support to bts-buntime
- Added compression to every endpoint using fflate
- Implemented AstroCompress to compress the astro build output
- Implemented Elysia Compression to compress static file response content
- Optimized blockchain queries to do so in parallel
- Further minified the cache files (pools, assets, bitassets, etc)
Now, I'd tried to use Elysia Compression, and until now I had not been able to get it working properly, but now I have... lo and behold..
A huge improvement; a completely different story when it comes to cumulative layout shift, at both zoom levels tested.
When at normal level of zoom, the performance is now 100%
Let's remind ourselves of the current reference wallet performances..
Firstly, the spotlight margin collateral position page:
Secondly, the user portfolio margin position table:
Now let's put it in some tables for easier comparison!
| Page | Performance | Accessibility | Best practices | SEO |
|---|---|---|---|---|
| Astro @ 25% | 91 (207-212%) | 83 (109-113%) | 92 (122%) | 80 (114%) |
| Astro @ 100% | 100 (233-243%) | 83 (109-114%) | 92 (122%) | 80 (114%) |
| Spotlight @ 25% | 44 | 76 | 75 | 70 |
| Spotlight @ 100% | 43 | 76 | 75 | 70 |
| Portfolio @ 25% | 43 | 73 | 75 | 70 |
| Portfolio @ 100% | 41 | 73 | 75 | 70 |
A significant improvement over the reference wallet, and the previous dev blog post.
| Page | FCP | LCP | TBT | CLS | Speed Index |
|---|---|---|---|---|---|
| Astro @ 25% | 0.5s (-1.6s to -1.7s) | 1.9s (-5.3s to -5.7s) | 0ms (-360ms to -370ms) | 0.017 | 0.8s (-2.6s to -3.9s) |
| Astro @ 100% | 0.5s (-1.6s to -1.7s) | 0.5s (-6.6s to -7.4s) | 0ms (-360ms to -380ms) | 0 | 0.8s (-3s to -3.6s) |
| Spotlight @ 25% | 2.1s | 7.6s | 370ms | 0 | 3.4s |
| Spotlight @ 100% | 2.2s | 7.9s | 360ms | 0.001 | 3.8s |
| Portfolio @ 25% | 2.2s | 7.2s | 360ms | 0.004 | 4.7s |
| Portfolio @ 100% | 2.1s | 7.1s | 380ms | 0.068 | 4.4s |
So, you can see that simply improving the CLS value we have significantly improved the final performance score.
With the performance issues resolved, I'll be moving onto the following development tasks:
- Global settlement fund bidding
- Individual settlement fund bidding
- Pool staking form
- Credit offer creation form
- Blocked user indication
- i18n localization using nanostores i18n package
The development of the Bitshares DEX UI using Astro, React, ElysiaJS, ShadCN and BunJS continues to prove to be highly worthwhile!
Thanks for reading this far, I hope you enjoyed this development blog post!
Interested in checking out the code?
Don't forget to click the ⭐ button to like the github repos above!
These developments were brought to you by the NFTEA Gallery.
Consider collecting an NFTEA NFT to support continued Bitshares developments.
Don't have a Bitshares account? Make one today!