Facebook Performance@Scale 2020 presentation on resource prioritization

1. Resource Prioritization
Patrick Meenan
@PatMeenan
slideshare.net/patrickmeenan/resource-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. Dev Control over Prioritization
• Inform browser of late-discovered resources
• <link rel=“preload”…
• Delay images
• <img loading=lazy…
• Boosting priority of async/deferred/late scripts
• <link rel=“preload” as=“script”…

6. (Simplified) Example
•1 HTML
•1 Stylesheet
•4 Scripts (2 blocking in the head)
•1 Web Font
•13 Images (5 visible)

7. Optimal Script Loading

8. Optimal Loading
Start Render
Visually Complete

9. Worst-Case
Start Render
Visually Complete

11. HTTP/1.x Prioritization
• 6 Connections per origin
• Pick next-highest for each origin as a connection becomes available

12. 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. Prioritizing across connections

14. External Fonts (before)
3s - Fonts Loaded

15. Same-origin fonts – supposed to be faster!!!
Start Render
9s – After
2s - Before

16. Same-origin fonts (correct)
Start Render
1.5s (includes fonts)

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

18. Warm-up Connection

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

20. Delay until 2 images complete

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

22. Interrupts in-flight responses

23. When it goes wrong

24. Queued behind in-flight
Low-priority requests

25. Round Robin?

26. ¯_(ツ)_/¯

27. ishttp2fastyet.com

28. The Good ✅
• Akamai
• Cloudflare
• Fastly

29. 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

30. The Ugly (cloud load balancers) ❌
• Amazon AWS
• Google Cloud
• Microsoft Azure

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

32. Looks Broken Actually Correct

33. Downloads Look
Concurrent Actually ordered

34. Performance Monitoring
• Understand what (if any) traffic-shaping is
used
• Watch out for (avoid):
•Dev Tools
•Lighthouse
•Puppeteer
•Proxy

35. WHY it Goes Wrong

36. Buffers, buffers everywhere
• Edge server TCP send buffers
• Tune dynamically with TCP_NOTSENT_LOWAT
• Network buffers (bufferbloat)
• BBR Congestion Control
• Upstream application buffers

37. Loss-based congestion control

39. What to do?
• Use a “good” CDN
• Or…

40. What to do?
• Set reasonable default TCP send buffer sizes
• Enable TCP_NOTSENT_LOWAT
• Enable BBR
• Use a Web Server with good prioritization support

41. 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

42. Server-initiated prioritization

43. HTTP/3 Prioritization?
• Prioritization is an extension, not part of the core spec
• HTTP header-based
• Priority Level + concurrency
• Server override (response header)
• Join the discussion
• https://httpwg.org/

44. 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

46. Thank You
Patrick Meenan
@PatMeenan
slideshare.net/patrickmeenan/resource-prioritization