How does rel = "preload" link work?
In its most basic form, it sets up the rel="preload" link with high priority. Unlike prefetching, when the browser can decide if this is a good idea or not, prefetching will force the browser to do this.
=== A deeper look: ===
Here is a snippet from W3c
Many applications require detailed control when resources are extracted, processed, and applied to a document. For example, loading and processing some resources may be delayed by the application to reduce resource shortages and improve bootstrap performance. This behavior is usually achieved by moving the resource selection to the user-defined resource loading logic defined by the application - that is, the resource selection is initiated using the entered elements, or through XMLHttpRequest when the specific application conditions are met.
However, there are also cases where some resources must be received as early as possible, but the logic of their processing and execution in accordance with the requirements of a particular application - for example, dependency management, conditional loading, order guarantee, etc. It is currently not possible to provide this behavior without performance degradation.
Declaring a resource through one of the existing elements (for example, img, script, link) combines the selection and execution of the resource. Considering that the application may want to receive, but to delay the execution of the resource, some condition has not yet been met. Retrieving resources using XMLHttpRequest to avoid the above behavior entails a serious decrease in the performance of resource declarations from the user DOM agent and preload parsers. Resource selections are only sent when the appropriate JavaScript is executed due to the abundance of blocking scripts on most pages, introducing significant delays and affecting application performance. The preload keyword for link elements provides a declarative selection of a primitive that refers to the aforementioned case of using early selection initiation and separating the selection from the execution of the resource. As such, the preload keyword serves as a low-level primitive that allows applications to create custom load and execute modes without hiding resources from the user agent and delaying fines for retrieving resources.
For example, an application can use the preload keyword to launch early, high priority, and non-blocking CSS resource downloads that can then be applied by the application at the appropriate time:
<!-- preload stylesheet resource via declarative markup --> <link rel="preload" href="/styles/other.css" as="style"> <!-- or, preload stylesheet resource via JavaScript --> <script> var res = document.createElement("link"); res.rel = "preload"; res.as = "style"; res.href = "styles/other.css"; document.head.appendChild(res); </script> Here is a really deep look at W3c: https://w3c.imtqy.com/preload/
But if you plan to use it, note that browser support is not so great. Global browser support at 82%.
Here is the complete list: http://caniuse.com/#search=preload
Google developers suggest using rel="preload" to request fonts earlier so they are available when CSSOM is ready.
Lazy font loading has an important hidden meaning that can delay text rendering: the browser must build a rendering tree that depends on the DOM and CSSOM trees before it knows what font resources are needed to render the text. As a result, font requests are delayed long before other critical resources, and the browser may be blocked from displaying text while the resource is implausible.
Use as:
<link rel="preload" href="/fonts/my-font.woff2" as="font"> <link rel="stylesheet" href="/styles.min.css"> Also note:
Not all browsers support
<link rel="preload">, and these browsers will simply be ignored. But every browser that supports preloading also supports WOFF2, so there is always a format that you must preload.