Downloaded 15 times
Uploaded byPatrick Meenan
Resource loading, prioritization, HTTP/2 - oh my!
The document discusses key aspects of resource loading and prioritization on the web, including: 1. The HTML parser stops for non-async scripts until previous CSS is downloaded and the script is parsed and executed, but does not pause for CSS or image loading. 2. Resources can only be loaded once discovered by the parser or layout; optimal ordering prioritizes render-blocking and parser-blocking resources first using full bandwidth. 3. HTTP/2 allows for prioritization of resources from a single domain, while priority hints and preloading help prioritize cross-domain assets.
More Related Content
Similar to Resource loading, prioritization, HTTP/2 - oh my!
![Computer Networks 01[1 using all terms].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/computernetworks011-251214040533-327dd9f8-thumbnail.jpg?width=640&height=640&fit=bounds)
Resource loading, prioritization, HTTP/2 - oh my!
- 1. Resource loading, prioritization,HTTP/2 - oh my! Patrick Meenan @PatMeenan
- 2. Key Performance Driversof the HTML Parser
- 3. Rendering • Incrementally paints •Nothing to display until the parser reaches the <body> • MUCH later for client-rendered DOM
- 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. Parser does NOTpause for: • CSS loading • Image Loading
- 6. Resources can onlybe 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
- 8. Optimal Ordering (forthe user) Render-blocking resources first • CSS/Scripts in order needed, using 100% of bandwidth • Fonts
- 9. Optimal Ordering (forthe user) Parser-blocking next • Blocking scripts in order, using 100% of bandwidth
- 10. Optimal Ordering (forthe user) Async user-facing resources • Visible images • Async/defer scripts • Non-visible images
- 11. Optimal Ordering (forthe user) Async non-user resources last • Tracking/remarketing pixels • Analytics
- 12.
- 13. Priority Hints https://developers.google.com/web/updates/2019/02/priority-hints <ul class="carousel"> <li><imgsrc="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>
- 14. 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">
- 15.
- 16.
- 18.
- 19. Preload/Appcache Chrome Bugs PreloadedFonts Block CSS (blocking render) https://andydavies.me/blog/2019/02/12/preloading-fonts-and-the-puzzle-of-priorities/
- 20.
- 21.
- 22.
- 23. Connection coalescing Different hostnames share a HTTP/2 connection if: • Certificate includes both hosts • DNS lookup resolves to the same IP
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. Server Support (inPractice) https://Ishttp2fastyet.com
- 35. Server Support (inPractice) https://Ishttp2fastyet.com
- 36.
- 37.
- 39. Recommendations • Test yourHTTP/2 production deployment • Stop Sharding • Minimize 3rd-party resources early in load • Use priority hints • Hide non-critical resources (maybe)
- 40.