An Opinionated Guide to Web Performance Budgets
summary
Explains how to build pragmatic budgets using both synthetic lab tests and RUM, with RUM tracked at the 75th percentile and synthetic used for diagnostics; recommends using the worst data point from the last 2–4 weeks as your threshold so budgets fight regression. Prioritizes metrics that show loading, usability and feel: start render (example budget 2s), Largest Contentful Paint, Cumulative Layout Shift, FID or replacements, and long tasks (JS tasks ≥50ms); cites Shopzilla’s 6s→1.2s case that raised conversion ~12% and pageviews 25%.
AI-written summary · about
chapters (22)
- 0:00Intro
- 0:58About Tammy
- 4:38What is a performance budget
- 7:08Why do you need performance budgets
- 11:04Which metrics to focus on
- 13:26What tools do we use
- 19:22Is it loading
- 21:52Is it usable
- 25:42How does it feel
- 30:57Input delay
- 32:52Long tasks
- 34:37Custom metrics
- 38:12Avoid serving huge pages
- 39:52Tracking long tasks
- 41:22Speed index
- 42:52Load time
- 43:47Paint metrics
- 46:17Budget thresholds
- 47:02Harry Roberts tip
- 48:02Questions to ask yourself
- 50:52How to set up your performance budgets
- 53:42Conclusion
related talks
48mRevisiting Performance Budgets
48mPerformance Budgets: the What, Why and How
36mNobody cares about web performance. It's hard, expensive and unneeded
36mMoneyball for Performance Metrics
50mCreating Performance Impact in a Changing Tech Landscape
36mHunting the Unicorn
30mMeasuring Web Performance - Metrics & Tools
32mBanish Image Bloat: Achieving Peak Performance with Image Performance Budgets