Preload resource is the anticipation of the loading of a resource required later by another resource, necessary for the rendering of the page. For example, in a CSS style, the loading of a web font is necessary. When loading the page, the browser will load this font after interpreting and the CSS style. Preloading then consists in informing the browser that this font must be loaded before the CSS style is interpreted.
It is interesting to inform the browser of future loadings required by other resources so that it anticipates them and improves the page loading time and renders the page more quickly.
To tell the browser which resources to preload, it is necessary to add the instructions in the <head> section of the HTML code of the page.
Example for loading a web font required by a CSS style :
<head> ... <link rel="preload" href="https://fonts.googleapis.com/css?family=Quicksand|Lato" as="font" crossorigin="anonymous" /> ... </head>
The "as" attribute is used to define the MIME type of the resource to be preloaded, which is useful for the browser in prioritizing the resources to be loaded. In the absence of this attribute, the browser can ignore the instruction. The main types are: script, style, font, image, video, audio, document, object, fetch, track and embed.
The "crossorigin" attribute allows to manage the CORS (security linked to the loading of a resource from another site). This attribute is optional when the resource is on the same site. If the resource is external and the attribute is not specified, the preload will not be taken into account by the browser.