Real metrics for front-end performance
summary
Shows concrete wins and measurements: Amazon finds 100 ms equals ~1% revenue, Etsy adds 160 KB and sees +12% mobile bounce, and average response size grows ~700 KB to ~1.8 MB. Demonstrates using performance.timing, window.performance.getEntries and custom performance.mark to collect timings, setting image/CSS budgets (Guardian inlining saves ~600–700 ms), using WebPageTest’s visually complete metric, and a Caliber-style CI workflow that runs headless Chrome, records video/screenshots, and aggregates geo-distributed metrics.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 0:53Performance
- 3:31Response Size
- 4:49Rules of Engagement
- 6:43Daft Punk
- 7:51Load what you need
- 10:15Set a budget
- 11:15Realtime monitoring
- 17:25Radical tools
- 19:16Conclusion
related talks
36mMoneyball for Performance Metrics
18mWebsite performance from user perspective
31mEvery Millisecond Counts: Performance & UX
30mMeasuring Web Performance - Metrics & Tools
21mState of Performance
11m"Time is Money - The Measurable Value of Performance by Design"
28mWhat we talk about when we say "web performances"
33mRedefining Web Performance