Understanding Page Load
summary
Distinguishes cold (full navigation) vs warm (AJAX intra-site) loads, uses webpagetest.org and Chrome DevTools to measure start render, load time and waterfall timing; claims network dominates cold loads so use CDNs, long max-age, gzip and image compression; recommends minimizing JS/CSS, avoid render-blocking scripts with async/defer/preload, target 60ms JavaScript slices and <16ms paints for 60fps, keep DOM small (rough guideline <3000 DOM nodes), and profile to verify fixes.
AI-written summary · about
chapters (15)
- 0:00Intro
- 2:02Page Load Types
- 3:48Network Performance
- 8:43Reduced Resources
- 11:02Rendering
- 14:02JavaScript
- 16:11Preloader
- 20:02Warm Transitions
- 22:08DOM Mutation
- 24:27Speed
- 25:46Rail
- 28:07Recalc Style Layout
- 29:51Speed Up Paints
- 31:14Dynamic Pages
- 32:07Summary
related talks
23mOptimizing page load speed on front end side
46mWeb Performance: Autobahn or Pedestrian Zone?
29mHigh Performance in the Critical Rendering Path
32mAnatomy of a Modern Page Load
39mGiving you ways to increase, but also explain site performance, to your boss.
28mBetter than loading fast… is loading instantly
28mPractical Performance
28mCSS and the Critical Path