Sérgio Gomes [X](https://twitter.com/sergiomdgomes)
Published: November 23, 2024
> [!TIP] > **Celebration:** This web feature is now available in all three major browser engines, and becomes **Baseline Newly available** as of September 18, 2023. Module-based development offers some real advantages in terms of cacheability, helping you reduce the number of bytes you need to ship to your users. The finer granularity of the code also helps with the loading story, by letting you prioritize the critical code in your application. However, module dependencies introduce a loading problem, in that the browser needs to wait for a module to load before it finds out what its dependencies are. One way around this is by preloading the dependencies, so that the browser knows about all the files ahead of time and can keep the connection busy. ## `` [``](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload) is a way of declaratively requesting resources ahead of time, before the browser needs them. ```html ``` This works particularly well with resources such as fonts, which are often hidden inside CSS files, sometimes several levels deep. In that situation, the browser would have to wait for multiple roundtrips before finding out that it needs to fetch a large font file, when it could have used that time to start the download and take advantage of the full connection bandwidth. `` and its HTTP header equivalent provide a simple, declarative way of letting the browser know straight away about critical files that will be needed as part of the current navigation. When the browser sees the preload, it starts a high priority download for the resource, so that by the time it's actually needed it's either already fetched or partly there. However, it doesn't work for modules. ## Why doesn't `` work for modules? This is where things get tricky. There are several credentials modes for resources, and in order to get a cache hit they must match, otherwise you end up fetching the resource twice. Needless to say, double-fetching is bad, because it wastes the user's bandwidth and makes them wait longer, for no good reason. For `