<link rel=preload> to prioritize fetching resources that are currently requested later in page load” is the seemingly simple advice Lighthouse gives.
Preload is a trade-off – when we explicitly increase the priority of one resource we implicitly decrease the priority of others – and so to work effectively preload requires authors to identify the optimal resources to preload, browsers to request them with optimal priorities and servers to deliver them in optimal order.
Some resources are discovered later than others, for example resources injected by a script, or background images and fonts that are only discovered when the render tree is built.
Preload instructs the browser to download a resource even before it discovers it but so there may be performance gains by using
<link rel=preload to download resources earlier than normal.
Preload also allows us to decouple download and execution, for example the Filament Group suggest using it to load CSS asynchronously
I’ve being using preload with clients over the last few years but I have never been completely satisfied with the results. I’ve also seen some things I hadn’t quite expected in page load waterfalls so decided to dig deeper.