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.

1. HTTP/2 Prioritization
Patrick Meenan
@PatMeenan
slideshare.net/patrickmeenan

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)

6. Optimal Script Loading

7. Optimal Loading
Start Render
Visually Complete

8. Worst-Case
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

11. https://developers.google.com/web/fundamentals/performance/http2/

12. Browser Differences

13. Chrome – Linear List
https://github.com/quicwg/wg-materials/raw/master/interim-19-05/priorities.pdf

14. Firefox - Groups
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

16. Edge (classic)
¯_(ツ)_/¯

17. Prioritizing across
connections

18. Cross-connection prioritization
•3rd-parties
•Domain sharding
•www.example.com
•static1.example.com
•static2.example.com

19. Prioritizing across connections

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

22. External Fonts (before)

23. Same-origin fonts (wtf)
Start Render

24. Same-origin fonts (correct)
Start Render

25. https://twitter.com/zachleat/status/1055219667894259712

26. Testing for prioritization
https://www.webpagetest.org/http2priorities.html?image=
<url-encoded-image-URL>

27. Warm-up Connection

28. Request 30
below-the-fold
Images
(low priority)

29. Delay until 2 images complete

30. Sequentially Request 2
in-viewport images
(high priority)

31. Interrupts in-flight responses

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. ¯_(ツ)_/¯

39. ishttp2fastyet.com

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

44. Testing/Throttling
https://calendar.perfplanet.com/2016/testing-with-realistic-networking-conditions/

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

55. Loss-based congestion control

57. BBR starvation
https://blog.apnic.net/2017/05/09/bbr-new-kid-tcp-block/

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

64. Server-initiated prioritization

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/

68. Thank You
Patrick Meenan
@PatMeenan
slideshare.net/patrickmeenan
https://www.facebook.com/careers/