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.

Resource loading, prioritization, HTTP/2 - oh my!

820 views

Published on

Slides from #PerfMatters conference 2019 on HTTP/2 resource prioritization.

Published in: Internet
  • Be the first to comment

Resource loading, prioritization, HTTP/2 - oh my!

  1. 1. Resource loading, prioritization, HTTP/2 - oh my! Patrick Meenan @PatMeenan
  2. 2. Key Performance Drivers of the HTML Parser
  3. 3. Rendering • Incrementally paints • Nothing to display until the parser reaches the <body> • MUCH later for client-rendered DOM
  4. 4. Parser stops for (non-async) <script…> until: • All previous CSS has been downloaded/processed • The script code has been downloaded, parsed and executed
  5. 5. Parser does NOT pause for: • CSS loading • Image Loading
  6. 6. Resources can only be loaded when discovered: • Preload scanner finds resources in markup • CSS, scripts, images • Fonts and background images discovered during layout • document.write discovered at write time
  7. 7. Optimal Ordering (for the user) Render-blocking resources first • CSS/Scripts in order needed, using 100% of bandwidth • Fonts
  8. 8. Optimal Ordering (for the user) Parser-blocking next • Blocking scripts in order, using 100% of bandwidth
  9. 9. Optimal Ordering (for the user) Async user-facing resources • Visible images • Async/defer scripts • Non-visible images
  10. 10. Optimal Ordering (for the user) Async non-user resources last • Tracking/remarketing pixels • Analytics
  11. 11. HTTP Prioritization https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit?usp=sharing
  12. 12. Priority Hints https://developers.google.com/web/updates/2019/02/priority-hints <ul class="carousel"> <li><img src="img/carousel-1.jpg" importance="high"></li> <li><img src="img/carousel-2.jpg" importance="low"></li> <li><img src="img/carousel-3.jpg" importance="low"></li> <li><img src="img/carousel-4.jpg" importance="low"></li> </ul>
  13. 13. Preloading LayoutFonts <link rel="preload" href="//www.i.cdn.cnn.com/.a/fonts/cnn/3.7.2/cnnsans- regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  14. 14. HTTP/2 Prioritization
  15. 15. HTTP/2 HTTP/1.x
  16. 16. https://twitter.com/AndyDavies/status/1060558550492155909
  17. 17. Preload/Appcache Chrome Bugs Preloaded Fonts Block CSS (blocking render) https://andydavies.me/blog/2019/02/12/preloading-fonts-and-the-puzzle-of-priorities/
  18. 18. Prioritizing across connections
  19. 19. Prioritizing across connections
  20. 20. BBR vs CUBIC/RENO https://labs.ripe.net/Members/gih/bbr-tcp
  21. 21. Connection coalescing Different host names share a HTTP/2 connection if: • Certificate includes both hosts • DNS lookup resolves to the same IP
  22. 22. Current Browser Implementations
  23. 23. Chrome
  24. 24. Firefox
  25. 25. Safari
  26. 26. Edge ¯_(ツ)_/¯
  27. 27. Server Support
  28. 28. External Fonts (before)
  29. 29. Same-origin fonts (wtf) Start Render
  30. 30. Same-origin fonts (correct) Start Render
  31. 31. https://twitter.com/zachleat/status/1055219667894259712
  32. 32. Server Support (in Practice) https://Ishttp2fastyet.com
  33. 33. Server Support (in Practice) https://Ishttp2fastyet.com
  34. 34. Testing/Throttling https://calendar.perfplanet.com/2016/testing-with-realistic-networking-conditions/
  35. 35. Server-initiated prioritization
  36. 36. Recommendations • Test your HTTP/2 production deployment • Stop Sharding • Minimize 3rd-party resources early in load • Use priority hints • Hide non-critical resources (maybe)
  37. 37. Thank You! @PatMeenan

×