Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTTP/2 Prioritization

841 views

Published on

Presentation on HTTP/2 prioritization from the 2019 performance.now() conference in Amsterdam.

Published in: Internet
  • Be the first to comment

HTTP/2 Prioritization

  1. 1. HTTP/2 Prioritization Patrick Meenan @PatMeenan slideshare.net/patrickmeenan
  2. 2. The Browser
  3. 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. 4. Late-Discovered Resources • Fonts • Background Images • Script-injected content • @import
  5. 5. (Simplified) Example •1 HTML •1 Stylesheet •4 Scripts (2 blocking in the head) •1 Web Font •13 Images (5 visible)
  6. 6. Optimal Script Loading
  7. 7. Optimal Loading Start Render Visually Complete
  8. 8. Worst-Case Start Render Visually Complete
  9. 9. HTTP/1.x Prioritization • 6 Connections per origin • Pick next-highest for each origin as a connection becomes available
  10. 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
  11. 11. https://developers.google.com/web/fundamentals/performance/http2/
  12. 12. Browser Differences
  13. 13. Chrome – Linear List https://github.com/quicwg/wg-materials/raw/master/interim-19-05/priorities.pdf
  14. 14. Firefox - Groups https://github.com/quicwg/wg-materials/raw/master/interim-19-05/priorities.pdf
  15. 15. Safari - Weighted https://github.com/quicwg/wg-materials/raw/master/interim-19-05/priorities.pdf
  16. 16. Edge (classic) ¯_(ツ)_/¯
  17. 17. Prioritizing across connections
  18. 18. Cross-connection prioritization •3rd-parties •Domain sharding •www.example.com •static1.example.com •static2.example.com
  19. 19. Prioritizing across connections
  20. 20. 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
  21. 21. External Fonts (before)
  22. 22. Same-origin fonts (wtf) Start Render
  23. 23. Same-origin fonts (correct) Start Render
  24. 24. https://twitter.com/zachleat/status/1055219667894259712
  25. 25. Testing for prioritization https://www.webpagetest.org/http2priorities.html?image= <url-encoded-image-URL>
  26. 26. Warm-up Connection
  27. 27. Request 30 below-the-fold Images (low priority)
  28. 28. Delay until 2 images complete
  29. 29. Sequentially Request 2 in-viewport images (high priority)
  30. 30. Interrupts in-flight responses
  31. 31. Ideal response time would match single-image download
  32. 32. When it goes wrong
  33. 33. Queued behind in-flight Low-priority requests
  34. 34. Round Robin?
  35. 35. ¯_(ツ)_/¯
  36. 36. ishttp2fastyet.com
  37. 37. ishttp2fastyet.com NO – 9 of 25 pass
  38. 38. The Good ✅ • Akamai • CDNsun • Cloudflare • Fastly
  39. 39. 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
  40. 40. The Ugly (cloud load balancers) ❌ • Amazon AWS • Google Cloud • Microsoft Azure
  41. 41. Testing/Throttling https://calendar.perfplanet.com/2016/testing-with-realistic-networking-conditions/
  42. 42. HTTP Header
  43. 43. Performance Monitoring • Understand what (if any) traffic-shaping is used • Watch out for (avoid): •Dev Tools •Lighthouse •Puppeteer •Proxy
  44. 44. WHY it Goes Wrong
  45. 45. Edge • CDN • HTTP Load Balancer (HA Proxy, Netscaler, etc) HTTP/2 Broken (and fixed) Here
  46. 46. TCP Send Buffers
  47. 47. Over-buffering (TCP) • Impact on reprioritization • Server metrics (send time artificially low)
  48. 48. TCP_NOTSENT_LOWAT • Specify additional buffer above BDP • Signals socket available only when send buffer drops below threshold
  49. 49. Buffer Bloat
  50. 50. Loss-based congestion control
  51. 51. BBR starvation https://blog.apnic.net/2017/05/09/bbr-new-kid-tcp-block/
  52. 52. Upstream Buffers TLSTCP HTTP/2 HTTP TCP HTTP TCP fd
  53. 53. Upstream Limits • 100+ simultaneous inbound requests • Back-end request limits?
  54. 54. Server HTTP/2 implementations • H2o, Apache good • Nginx – not so much • https://trac.nginx.org/nginx/ticket/1763
  55. 55. What to do? • Use a “good” CDN • Or…
  56. 56. What to do? • Set reasonable default TCP send buffer sizes • Enable TCP_NOTSENT_LOWAT • Enable BBR • Use a Web Server with good prioritization support
  57. 57. 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
  58. 58. Server-initiated prioritization
  59. 59. 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
  60. 60. 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/
  61. 61. Thank You Patrick Meenan @PatMeenan slideshare.net/patrickmeenan https://www.facebook.com/careers/

×