Browser Resource Loading: A Deep Dive into the Black Box

Loading a webpage and its subresources involves a complex interplay of factors. Browsers consider render-blocking resources, preload scanners, resource hints (preload/preconnect), loading modifiers (async/defer/module), fetchpriority, responsive images, and more. They then decide when to load each resource, optimizing for modern HTTP/2 and HTTP/3. However, different browsers employ vastly different strategies, sometimes even intentionally delaying requests. This talk delves into the decision-making process behind resource loading, showing how to influence browser behavior to prioritize critical resources like the LCP image. We'll analyze numerous waterfalls, explain browser discrepancies, and offer solutions to common problems—without resorting to blindly preloading everything with fetchpriority=high. You'll gain a deeper understanding of browser internals and confidently tackle resource loading challenges.