Resource loading, prioritization, HTTP/2 - oh my!
summary
Explains how browsers prioritize resources to reach the body for first paint and DOMContentLoaded, shows HTTP/2 priority frames vs HTTP/1 six-connection behavior, and gives concrete pitfalls: preload can outrank critical CSS and block render, sharded domains prevent cross-connection prioritization (fonts get separate connections), many CDNs and servers (notably some AWS/CloudFront configs) mishandle HTTP/2 prioritization, and congestion control (BBR) can starve other flows. Recommends packet-level testing (Network Link Conditioner / tc), priority hints, and coalescing assets to one origin.
AI-written summary · about
chapters (11)
- 0:00Introduction to resource loading
- 1:26How browser parser blocks
- 4:55Resource prioritization basics
- 8:29Optimizing script loading order
- 13:08Preloading resources effectively
- 17:50HTTP/2 prioritization explained
- 23:13Connection competition pitfalls
- 26:48Browser prioritization models
- 30:41Case study Google Fonts optimization
- 37:30Testing prioritization correctly
- 39:58Key takeaways and action items
