When browsers load a Web page and its subresources, A LOT happens under the hood. They need to take into account render/parsing blocking resources, use a preload scanner, listen to resource hints (like preload/preconnect), loading modifiers (async/defer/module), fetchpriority, responsive images, and much more. Based on all those signals, they then need to somehow decide when to load which resources, to make optimal use of the modern HTTP/2 and HTTP/3 connections. And, as you might have guessed, none of the browsers do this in quite the same way (understatement alert!).
This talk is a deep dive into how browsers decide when to load a specific resource, and all the ways in which you can influence them to modify their behaviour (so you can make sure that important LCP image is definitely one of the first things to come in!). We will look at A LOT of different waterfalls and discuss why each looks the way it does, how to diagnose these issues yourself with advanced tools (like WebPageTest, Debugbear, Chrome netlogs and maybe even gasp Wireshark) and how to solve common problems (no, don’t just preload everything with fetchpriority=high, you monster!).
You will walk away with a deeper understanding of what happens under the hood, which will allow you to better deal with the various gotchas and quirks present in today’s browsers and resource loading features.
Dr. Robin Marx is a Web Performance Expert at Akamai Technologies. He focuses on the performance and workings of modern Web protocols like HTTP/2, HTTP/3 and QUIC and has been a contributor in the IETF QUIC working group for multiple years.
Robin often talks about web performance at international conferences, making the complex situations more insightful to the wider public. On the weekends, he likes to hit other people with longswords.
Robin Marx