Chrome engineer and all around nice person Addy Osmani had a medium post I consider a must read by all means.
As the title Preload, Prefetch And Priorities in Chrome states, he takes us deep diving on the differences between Preload + Prefetch and how they work behind the background.
Out the gate, Addy reminds us that Preload is not a resource hint (a mistake I always make), but a declarative fetch. There are key disctinctions to be made between the two, and for clarifications he offers this elucidation:
Preload resources you have high-confidence will be used in the current page. Prefetch resources likely to be used for future navigations across multiple navigation boundaries. - Addy Osmani
So imagine possily preloading key images to a current page for immediate navigation, but prefecting fonts meant to used across several pages - as Shopify did in a documented example.
Addy continues to dive into details of how Chrome handles the requests, their prioritization and implementations. Rest assured, this is not as clear as Evian water. An image's priority can be other than low depending on it's position with respect to the viewport, and that goes for other assets as well.
Addy also coverse scenarios will double fethcing takes place
Preload resources that are likely to be discovered late in your page, but are otherwise important to fetch as early as possible. - Addy Osmani.
Nonetheless, this is a must read for anyone trying to grasp the entrails of asset loading, as it's not as intelligible as we once believed. But the scope of the conversation is kept to Preload, Prefetch And Priorities in Chrome, so head over to read the entirity of the piece.