Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

×