Perceived Performance, And Why It Matters
summary
Claims that speeding the things users see matters more than total load time and cites a 40% abandonment rate at three seconds. Describes building a critical CSS generator using Puppeteer and Chrome coverage, using the Performance API, Intersection Observer, async/defer, and prefetch/DNS preconnect. Reports a measured improvement of up to two seconds on first paint on mobile and discovers a 35 megabyte gif that costs users over three dollars to load, focusing on first meaningful paint as the key metric.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 1:00Fun Fact
- 1:15Background
- 2:00What is performance
- 2:31How to measure performance
- 3:11User experience metrics
- 5:59How to improve perceived performance
- 6:13Progressive image loading
- 6:33Intersection Observer API
- 7:33Critical Rendering Path
- 7:56Render Blocking Resources
- 8:50JavaScript Rendering
- 10:16Chrome Coverage Tool
- 10:55Critical CSS Generator
- 11:55Prefetching
- 12:05DNS Prefetch
- 12:38WebpageTest
- 13:02Lighthouse
- 13:16What Does My Site Cost
related talks
22mWhy Performance Matters - JSConf Budapest 201
26mFetching Data and the Perception of Speed
34mOnce More with Feeling
43mPlanet of the APIs: A Tale of Performance and UX
48mThink Fast, First: Empowering a Performance Culture
37m"Psychology of Performance"
24mWeb Speed in Perfection
30mPerformance as a Religious Experience