Download to read offline
Uploaded byPatrick Meenan
Resource Prioritization
This document discusses resource prioritization strategies to optimize loading performance. It explains that the browser processes resources sequentially and blocks on certain resource types. It then provides recommendations for developers to inform the browser of dependencies and priorities through techniques like preloading. The document also analyzes HTTP/1.x versus HTTP/2 prioritization and compares performance of loading scripts and fonts with different approaches. It evaluates tools for testing prioritization and discusses why prioritization can fail or appear broken. Finally, it offers suggestions for servers and networks to better support prioritization.
More Related Content
Similar to Resource Prioritization
Resource Prioritization
- 1.
- 2.
- 3. Basic Parser Rules •Process1 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 overPrioritization • 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 •1Stylesheet •4 Scripts (2 blocking in the head) •1 Web Font •13 Images (5 visible)
- 7.
- 8.
- 9.
- 11. HTTP/1.x Prioritization • 6Connections per origin • Pick next-highest for each origin as a connection becomes available
- 12. HTTP/2 Prioritization •All requestssent 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.
- 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) StartRender 1.5s (includes fonts)
- 17.
- 18.
- 19.
- 20. Delay until 2images complete
- 21. Sequentially Request 2 in-viewportimages (high priority)
- 22.
- 23. When it goeswrong
- 24.
- 25.
- 26.
- 27.
- 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 (cloudload balancers) ❌ • Amazon AWS • Google Cloud • Microsoft Azure
- 31.
- 32. Looks Broken ActuallyCorrect
- 33.
- 34. Performance Monitoring • Understandwhat (if any) traffic-shaping is used • Watch out for (avoid): •Dev Tools •Lighthouse •Puppeteer •Proxy
- 35. WHY it GoesWrong
- 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.
- 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.
- 43. HTTP/3 Prioritization? • Prioritizationis 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.