Issue #549: App Speed

[jahabeebs]

closes #549

Description

• Adds preload/preconnect scripts for CSS assets
• adds async/async defer to third-party JS bundles to prevent blocking of HTML parsing when downloading JS
• Converted some large png assets to webp
• Compressed the default vault webp image more to lower the time to first paint
• Added suspense boundary behind Shared since there are a lot of async operations happening in Shared and we shouldn't block rendering
• Lazy loading of things not initially needed in the app like components in Shared, token icons, and the Toast container (i've made sure these still appear, like the wrong network toast)
• Added default width to splash page icon and ImageContainer to prevent layout shift
• Added react loading skeleton to splash page icon to prevent layout shift

We should still think of a way to optimize the main vault image loading time (closedvault) because it's the most responsible for hurting the score

Screenshots

React loading skeleton prevents layout shifting (network throttled)

https://github.com/open-dollar/od-app/assets/47253537/1b155473-81e8-4d61-8afd-364e39a4b649

Lighhouse score (around 60-70 and production app lighthouse score is around 30-40 according to https://pagespeed.web.dev)

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
od-app	✅ Ready (Inspect)	Visit Preview	Jul 2, 2024 7:23pm
od-app-hai	✅ Ready (Inspect)	Visit Preview	Jul 2, 2024 7:23pm
od-app-testnet	✅ Ready (Inspect)	Visit Preview	Jul 2, 2024 7:23pm