HTTP/2 Prioritization
•Download as PPTX, PDF•
1 like•3,168 views
This document discusses HTTP/2 prioritization and how resources are prioritized during loading. It begins by explaining how browsers prioritize different resource types during parsing and rendering. It then covers how HTTP/2 allows all requests to be sent immediately to the server with priority specifications, as opposed to HTTP/1.x which limits connections. The document concludes by discussing challenges with prioritization across connections and various tools for testing prioritization.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to HTTP/2 Prioritization
Similar to HTTP/2 Prioritization (20)
More from Patrick Meenan
More from Patrick Meenan (20)
Recently uploaded
Recently uploaded (20)
HTTP/2 Prioritization
- 2. The Browser
- 3. Basic Parser Rules •Process 1 token at a time •Stylesheets Block Render •Non-Async Script tags block Parser/DOM until: •Pending Stylesheets have loaded •Script has loaded
- 4. Late-Discovered Resources • Fonts • Background Images • Script-injected content • @import
- 5. (Simplified) Example •1 HTML •1 Stylesheet •4 Scripts (2 blocking in the head) •1 Web Font •13 Images (5 visible)
- 7. Optimal Loading Start Render Visually Complete
- 9. HTTP/1.x Prioritization • 6 Connections per origin • Pick next-highest for each origin as a connection becomes available
- 10. HTTP/2 Prioritization •All requests sent to server immediately •Priorities specified in dependency tree •Any “stream” can depend on another stream •Peers can be weighted •Priority changes communicated with a PRIORITY frame
- 13. Chrome – Linear List https://github.com/quicwg/wg-materials/raw/master/interim-19-05/priorities.pdf
- 15. Safari - Weighted https://github.com/quicwg/wg-materials/raw/master/interim-19-05/priorities.pdf
- 21. HTTP/2 Connection coalescing •New domain resolution includes IP of active connection •Active connection cert includes new domain •Still pay DNS lookup cost • ORIGIN frame/CERTIFICATE frame •Multi-CDN
- 23. Same-origin fonts (wtf) Start Render
- 24. Same-origin fonts (correct) Start Render
- 29. Delay until 2 images complete
- 30. Sequentially Request 2 in-viewport images (high priority)
- 32. Ideal response time would match single-image download
- 33. When it goes wrong
- 34. Queued behind in-flight Low-priority requests
- 35. Round Robin?
- 36. ¯_(ツ)_/¯
- 40. ishttp2fastyet.com NO – 9 of 25 pass
- 41. The Good ✅ • Akamai • CDNsun • Cloudflare • Fastly
- 42. The Bad ❌ • Amazon Cloudfront • Cachefly • CDNetworks • ChinaCache • Edgecast • Highwinds • Incapsula • Instart Logic • KeyCDN • LeaseWeb CDN • Level 3 • Limelight • Medianova • Netlify • Rocket CDN • StackPath/NetDNA/MaxCDN • Jetpack CDN • Yottaa • Zenedge
- 43. The Ugly (cloud load balancers) ❌ • Amazon AWS • Google Cloud • Microsoft Azure
- 46. HTTP Header
- 47. Performance Monitoring • Understand what (if any) traffic-shaping is used • Watch out for (avoid): •Dev Tools •Lighthouse •Puppeteer •Proxy
- 48. WHY it Goes Wrong
- 49. Edge • CDN • HTTP Load Balancer (HA Proxy, Netscaler, etc) HTTP/2 Broken (and fixed) Here
- 51. TCP Send Buffers
- 52. Over-buffering (TCP) • Impact on reprioritization • Server metrics (send time artificially low)
- 53. TCP_NOTSENT_LOWAT • Specify additional buffer above BDP • Signals socket available only when send buffer drops below threshold
- 54. Buffer Bloat
- 58. Upstream Buffers TLSTCP HTTP/2 HTTP TCP HTTP TCP fd
- 59. Upstream Limits • 100+ simultaneous inbound requests • Back-end request limits?
- 60. Server HTTP/2 implementations • H2o, Apache good • Nginx – not so much • https://trac.nginx.org/nginx/ticket/1763
- 61. What to do? • Use a “good” CDN • Or…
- 62. What to do? • Set reasonable default TCP send buffer sizes • Enable TCP_NOTSENT_LOWAT • Enable BBR • Use a Web Server with good prioritization support
- 63. Linux net.core.wmem_max = 250000000 net.ipv4.tcp_wmem = 10240 102400 250000000 net.ipv4.tcp_window_scaling = 1 net.ipv4.tcp_notsent_lowat = 16384 net.core.default_qdisc = fq net.ipv4.tcp_congestion_control = bbr
- 65. HTTP/3 (and QUIC) • UDP-based (port 443) • Moves TCP logic into application layer • Less OS-level failure modes • More application responsibility • Moves loss recovery from per-connection to per-stream • Will NEVER reach 100% availability • Treat it as a progressive enhancement
- 66. HTTP/3 Prioritization? • Originally replicating HTTP/2 tree • Moving to HTTP header-based • Priority Level + concurrency • Server override (response header) • Join the discussion • https://httpwg.org/