Web Performance Tuning with browser APIs
summary
Shows how browser APIs measure and act on real performance: uses User Timing API, Performance/Navigation/Resource Timing and Long Tasks (long task = 50 ms) to record durations and detect bottlenecks, then uses Network Information API, Page Visibility, ResizeObserver and Intersection Observer to adapt behavior. Demonstrations use plain JavaScript: lazy-load gallery images (reduces requests), pause video when tab hidden, swap high‑res for low‑res on slow connections; works in Chrome/Edge (support varies in Safari/Firefox). Quotes Amazon: 100 ms delay ≈ 1% revenue impact.
AI-written summary · about
chapters (31)
- 0:00Start
- 3:26Web Performance
- 4:35Measuring the Performance
- 6:36Perceived Load Speed
- 7:07Load Responsiveness
- 7:23Runtime Responsiveness
- 7:48Visual Stability
- 8:51Conversion
- 9:38Traffic
- 12:09Lighthouse
- 13:40Monitoring Apis
- 17:26Performance Timeline Api
- 18:48Performance Observer
- 20:27Browser Compatibility
- 20:56Navigation Timing
- 24:50Redirects
- 25:46Calculate the Redirect Time
- 31:48Network Information Api
- 32:11Page Visibility Api
- 32:51Resource Observer Api
- 33:46Intersection Api
- 34:31Intersection Observer Api
- 35:07Information Api
- 48:28Callback Function
- 50:27Resize Observer Api
- 51:06Demo
- 54:03Browser Support for the Results Observer
- 54:46Intersection Observer Entry
- 55:00Use Cases
- 56:28Threshold
- 1:01:10References
related talks
50mWeb Performance APIs You (probably) Didn't Know Existed
59mWeb performance APIs you (probably) didn't know existed
22mWeb Perf APIs That You (Probably) Never Knew Existed
18mWebsite performance from user perspective
55mI Feel the Need for Web Page Speed
30mPerformance Tuning Secrets
39mGiving you ways to increase, but also explain site performance, to your boss.
16mCoding Session: Stunning Performance