Most "fast" websites I audit on PageSpeed land somewhere between 70 and 85. Hitting all four metrics at 100 is rare. I just shipped one that consistently hits 100/100/100/100 across Performance, Accessibility, Best Practices, and SEO — built on TanStack Start.
Here's the breakdown.
The stack
- TanStack Start (v1+, Vite + Nitro under the hood)
- React 19
- Tailwind CSS v4
- Deployed on Vercel
No exotic frameworks. No proprietary CDN tricks. The score comes from discipline at every layer.
The four non-negotiables
1. Zero render-blocking resources
Every script loads async or defer. CSS critical path is minimized via Tailwind v4's per-route extraction. Fonts use font-display: swap and are preloaded only for the fonts actually rendered above the fold.
The trap most people fall into: loading 6 font weights "just in case." Pick 2. Preload 1.
2. Image discipline
- WebP only (with PNG fallback only for legacy browsers — and yes, you can drop those now)
- Every image has explicit
widthandheightattributes (kills layout shift) - Lazy loading for everything below the fold
- Hero images are preloaded with
<link rel="preload" as="image">
CLS (Cumulative Layout Shift) is where most "fast" sites lose points. Fix it at the markup layer, not with JavaScript.
3. Accessibility from day one
This is the one most devs treat as bolt-on. You can't bolt it on.
- Semantic HTML everywhere (no
<div>soup) - ARIA labels on every interactive element
- Color contrast checked at the design stage, not retroactively
- Focus states visible and consistent
- Keyboard navigation works for every interaction
Lighthouse's accessibility audit is mostly automated checks. Pass them all at the markup level and you get 100 for free.
4. The SEO 100 is the easiest one
Most people leave free points on the table here:
- Meta description on every page
- Canonical URLs
- Structured data (JSON-LD)
-
langattribute on<html> - Mobile viewport meta tag
That's the entire checklist. Twenty minutes of work, full marks.
The live demo
You can audit it yourself: demo.brokstack.com
Run it through PageSpeed Insights. Note: Performance occasionally returns 99 due to lab-test variance — Lighthouse runs aren't perfectly deterministic — but consistently averages 100.
Why this matters (the agency side)
This site was built as a proof-of-capability for Brokstack, a productized web agency I'm running for Dubai real estate brokerages.
In a market where most broker sites score 30-50 on PageSpeed (and load like it's 2014), shipping a 100 across the board is a real differentiator. It also makes the agency pitch concrete: "we built this — your site can be this fast too."
But the technical lesson generalizes. You don't need a Rust framework or edge functions to hit 100. You need:
- Discipline at every layer
- The willingness to delete things instead of adding them
- A11y treated as a feature, not a checklist
Happy to answer questions in the comments — stack details, specific optimizations, whatever.
If you're building something similar, the TanStack Start docs are genuinely good. And if you're a Dubai real estate broker reading this for some reason: yes, your portal-dependent business model is breakable. We're working on it.
Top comments (0)