Preload: What is it good for?

Preload is a new web standard aimed at improving performance and providing more granular loading control to web developers.
--
<link rel="preload"> is a declarative fetch directive.
In human terms, it’s a way to tell a browser to start fetching a certain resource, because we as authors (or as server administrators, or as smart-server developers) know that the browser is going to need that particular resource pretty soon.
--
<link rel="prefetch"> has been supported on the web for a long while, and has decent browser support.
--
<link rel="prefetch"> is a directive that tells a browser to fetch a resource that will probably be needed for the next navigation. That mostly means that the resource will be fetched with extremely low priority.
That means that prefetch’s main use case is speeding up the next navigation rather than the current one.
--
While most markup-based resources are discovered fairly early by the browser’s preloader, not all resources are markup-based. Some of the resources are hidden in CSS and in JavaScript, and the browser cannot know that it is going to need them until it is already fairly late. So in many cases, these resources end up delaying the first render, the rendering of text, or loading of critical parts of the page.

https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/