Web Vitals / Performance Budget Calculator

Enter a rough performance budget spec — total JS/CSS size, image count and average size, third-party script count, web fonts — against editable pass/warning thresholds based on common performance-budget guidance. Estimates which categories are likely to hurt LCP, TBT/INP, or CLS. A static budget-threshold estimator, not a real Lighthouse/CrUX measurement.

This is a budget-threshold estimator, not a real measurement. Enter rough page-weight numbers and it flags which ones fall outside commonly cited performance-budget guidance — it does not fetch, load, or measure any actual page. For real field/lab data use Chrome UX Report, Lighthouse, or WebPageTest.
Total JS (gzipped)
Affects: TBT/INP
Pass
Parse/compile/execute cost blocks the main thread — the classic 170KB "good" budget comes from Addy Osmani's original performance-budget guidance; 300KB is a commonly cited looser modern ceiling.
Total CSS (gzipped)
Affects: LCP
Pass
Render-blocking stylesheets delay first paint and, in turn, the largest contentful paint.
Number of images
Affects: LCP, CLS
Pass
More image requests compete for bandwidth on the critical path; images without reserved dimensions also risk layout shift.
Average image size
Affects: LCP
Pass
Large hero/above-the-fold images are very often the element Chrome reports as the LCP candidate.
Third-party scripts
Affects: TBT/INP
Pass
Ads, analytics, chat widgets, and tag managers add parse/execute cost you don't directly control and often load synchronously.
Web fonts
Affects: CLS, LCP
Pass
Each additional font file is another render-blocking (or swap-triggering) request; FOIT/FOUT swaps can shift layout.
LCPPass
TBT/INPPass
CLSPass
Total image weight
1200 KB
Est. total page weight
1420 KB
All budgets within their "good" threshold — estimated low risk of Web Vitals issues.

Thresholds default to commonly cited performance-budget guidance (e.g. ~170KB gzipped JS as a historically "good" ceiling, ~300KB as a looser modern one) but are fully editable — every team's real budget depends on target devices/networks and should be tuned with real Lighthouse/CrUX data, not just this calculator.

Web Vitals / Performance Budget Calculator

Enter a rough performance budget spec — total JS/CSS size, image count and average size, third-party script count, web fonts — against editable pass/warning thresholds based on common performance-budget guidance. Estimates which categories are likely to hurt LCP, TBT/INP, or CLS. A static budget-threshold estimator, not a real Lighthouse/CrUX measurement.

Common uses

  • Check if a 450KB JS bundle is within a performance budget
  • Estimate the CLS risk from too many web fonts
  • Load a "heavy SPA" preset and see which budgets fail

Frequently asked questions

Can I use Web Vitals / Performance Budget Calculator to check if a 450KB JS bundle is within a performance budget?

Yes. Web Vitals / Performance Budget Calculator can check if a 450KB JS bundle is within a performance budget, directly in your browser.

Can I use Web Vitals / Performance Budget Calculator to estimate the CLS risk from too many web fonts?

Yes. Web Vitals / Performance Budget Calculator can estimate the CLS risk from too many web fonts, directly in your browser.

Can I use Web Vitals / Performance Budget Calculator to load a "heavy SPA" preset and see which budgets fail?

Yes. Web Vitals / Performance Budget Calculator can load a "heavy SPA" preset and see which budgets fail, directly in your browser.

Is my data uploaded to a server?

No. This tool runs entirely in your browser — your input is processed locally on your device and is never uploaded or stored on a server.