### 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](https://github.com/BTS-CM/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:

![image.png](https://images.hive.blog/DQmZfQxqc63t7waCUUt8rjKmeMeGhqrs8rmdyADzVvbUNjF/image.png)

Now, I know I said that I wouldn't prematurely optimize this page because I could be doing other productive things, so I quickly:
* [Created a bitsharesjs PR to support Suez](https://github.com/bitshares/bitsharesjs/pull/125)
* [Added suez support to bts-buntime](https://github.com/BTS-CM/bts-buntime)
* [Added compression to every endpoint](https://github.com/BTS-CM/beet_api/issues/2) using [fflate](https://github.com/101arrowz/fflate/)
* [Implemented AstroCompress](https://github.com/astro-community/AstroCompress) to compress the astro build output
* [Implemented Elysia Compression](https://github.com/Gusb3ll/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)
* [Added suez support and bug fixes to beet](https://github.com/bitshares/beet/pull/275) in a new PR

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..

![image.gif](https://s5.gifyu.com/images/SRxrI.gif)

![image.png](https://images.hive.blog/DQmVMhCaYUCwPo8krNNDT6TkmHKjT4UsibUpKwKJ5yCDEZo/image.png)

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%

![image2.gif](https://s5.gifyu.com/images/SRxrF.gif)

##### Let's remind ourselves of the current reference wallet performances..

Firstly, the spotlight margin collateral position page:

![image.png](https://images.hive.blog/DQmeBhkhd5M9CvEsrVXiBTMsuZqfHNPhywZrqxDArRZuvNL/image.png)

Secondly, the user portfolio margin position table:

![image.png](https://images.hive.blog/DQmNwWYMJfFMeHhrDQEmtwrmiR4enPe84dHAQqAGdbQwYa7/image.png)

##### 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](https://github.com/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?

* [Astro UI repo](https://github.com/BTS-CM/astro-ui)
* [BunJS API repo](https://github.com/BTS-CM/beet_api)
* [BTS Buntime](https://github.com/BTS-CM/bts-buntime)

Don't forget to click the ⭐ button to like the github repos above!

---

These developments were brought to you by the [NFTEA Gallery](https://nftea.gallery).
Consider collecting an [NFTEA NFT](https://nftea.gallery/gallery) to support continued Bitshares developments.

Don't have a Bitshares account? [Make one today](https://bts.exchange/?r=nftprofessional1)!