Practical Performance
summary
Starts from a WordPress site that loads in about 9 seconds on 3G, where concatenating scripts increases load to 11.7s and minifying drops it to 7.6s. Uses Chrome DevTools timeline, Lighthouse and a PW‑Metrics wrapper plus the performance.mark API to find render‑blocking jQuery and a costly slideUp call. Fixes: add defer attribute to scripts, move noncritical CSS, preload key requests, and change zero‑duration slideUp to display:none. Result: first contentful paint drops ~2400→1500 ms and time‑to‑interactive ~3900→2700 ms.
AI-written summary · about
chapters (11)
- 0:00Start
- 0:11Fix Poor Performance
- 3:173g Throttling
- 5:04Add the Defer Action My Script Tag
- 7:25Minify Our Javascript and Css
- 9:45Lighthouse
- 11:54User Perceivable Effects
- 14:25Chrome Dev Tools
- 18:04Network Priority
- 20:36Non-Critical Css
- 26:06Results
related talks
23mPerformance Optimizations for Progressive Web Apps
36mHacking Web Performance
49mEffortless Performance Debugging
29mHigh Performance in the Critical Rendering Path
38mCSS and the first meaningful paint
23mOptimizing page load speed on front end side
37mThe First Meaningful Paint
01h 03mSpeed up your Web Application