Building a 100/100 Mobile Speed Net Worth Calculator with Astro & Tailwind

Hey everyone,

Wanted to share a small financial benchmark tool I built over the past few weeks: https://getnetworthcalculator.com

The Problem

Most net worth comparison tools online are pretty bad. They either:

1. Require you to create an account and link your bank via Plaid.
2. Use mean averages distorted by billionaires instead of median age-bracket data.
3. Load massive JS bundles with 50 tracking scripts.

The Stack & Build Details

I wanted this to feel as close to instant as possible, so I kept it completely serverless and static:

• Framework: Astro (Static Output mode)
• Styling: Tailwind CSS v4
• State/Logic: Pure Vanilla JS running client-side against normalized Federal Reserve SCF data JSON.
• Hosting: Vercel Edge

Because the Fed dataset is pre-processed into lightweight JSON brackets at build time, all calculations (percentile curve rendering, asset breakdown, currency conversions, home equity adjustments) happen instantaneously in the browser. Zero DB queries, zero API latency.

Performance Results

• PageSpeed Score: 100/100 Mobile & Desktop
• FCP: 0.9s
• TBT: 0ms
• CLS: 0

Replaced external font stylesheets with a native system font stack (-apple-system, BlinkMacSystemFont), which shaved off ~1.7s of FCP blocking on mobile emulation.

Try it out & feedback appreciated:

👉 https://getnetworthcalculator.com

Would love to get your thoughts:

• How does the mobile performance feel on your device?
• Any UI/accessibility tweaks you’d suggest?
• How’s the theme toggle transition feeling on your browser?

Appreciate any constructive feedback or code critique!

Comments

[Alexander]

Dropping web fonts entirely for a native system stack is a brilliant way to guarantee that zero-latency feel on mobile networks. On the accessibility front, double-check how you handle the currency inputs. Relying on inputmode="numeric" with a standard text input instead of type="number" stops screen readers from butchering large monetary formats and removes those fiddly browser stepper arrows. Serving pre-computed static JSON alongside Astro is an incredibly solid architecture.