I Feel the Need for Web Page Speed
summary
Explains how to find method‑level bottlenecks using the Performance API and browser tooling, showing live traces from Gmail and a carrier product where long tasks (>50 ms) and JS execution jump from ~240 ms to ~2 s under 6x CPU throttling. Demonstrates instrumenting components with performance.mark/measures (cart item ~8 ms, header ~10 ms), and using Chrome DevTools, WebPageTest and Lighthouse to collect real user metrics, report to analytics, and offload work with web workers/service workers.
AI-written summary · about
chapters (33)
- 0:00Start
- 4:22Critical Rendering Path
- 5:58A Rendering Tree
- 7:20Layout
- 9:33Javascript
- 11:34Developer Tools
- 14:29Caveats
- 15:40Event Loop
- 17:05Practical Example
- 17:54Event Loop Implementation
- 24:14Performance Monitoring
- 25:30Timeline
- 27:44Long Tasks
- 33:47Real User Monitors
- 35:03Dom Interactive
- 35:39Dom Complete
- 36:27First Contentful Paint
- 38:25Performance Apis
- 41:39Demo
- 42:27Performance Marks and Measures
- 43:19Custom Events
- 45:12Angular
- 46:17Webpagetest
- 46:59Core Web Vitals
- 47:18Why Should I Care about Corporate Vitals
- 48:14First Input Delay
- 49:15Google Lighthouse Ci
- 49:48Rail Model
- 50:47Establish a Performance Budget
- 52:04Reflow
- 52:21Forced Reflow
- 52:48Network Optimization
- 53:03Web Workers
related talks
18mWebsite performance from user perspective
55mLet's make the web faster - tips from trenches @ Google
01h 02mWeb Performance Tuning with browser APIs
33mDemystifying Web Performance Tooling
50mHow to Think like a Performance Engineer
48mThink Fast, First: Empowering a Performance Culture
31mEvery Millisecond Counts: Performance & UX
20mReal metrics for front-end performance