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

#javascript #performance #tailwindcss #webdev

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:

Require you to create an account and link your bank via Plaid.
Use mean averages distorted by billionaires instead of median age-bracket data.
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.