What’s a realistic starting budget for a typical React storefront?

Mobile p75: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1, TTFB ≤ 500ms. Script ≤ 170kB gz, images ≤ 120kB on landing, ≤ 300kB total. Segment by device/network and ratchet quarterly.

How do we handle regional performance differences?

Set region-specific TTFB and LCP targets. Use a CDN with edge caching and measure per region in RUM. If a region can’t meet global budgets, either invest in edge/replication or explicitly set a looser regional budget with a business owner sign-off.

We’re an SPA. Do budgets change?

Budgets include route transitions: measure soft navigations with the `web-vitals` SPA APIs and set LCP/INP budgets per route. Split the app shell from page chunks and cap JS execution during transitions.

What about third-party scripts we ‘can’t remove’?

Give each a budget and an owner. Load async, defer or lazy below the fold, and require a business justification for sync/early load. If it blows the budget, either pay the performance tax knowingly or replace it.

Performance-optimization · Dec 6, 2025 · 9 minute read

Stop Chasing Lighthouse 100: Performance Budgets That Protect UX (and Revenue)

If you don’t put a hard cap on LCP, INP, and JS weight, your UX will drift and your conversion curve will follow it down. Here’s the budget system we deploy to keep teams honest and fast.

Back to all posts

Stop Chasing Lighthouse 100: Performance Budgets That Protect UX (and Revenue)

Key takeaways

Implementation checklist