The preload value of the <link> element’s rel attribute lets you declare fetch requests in the HTML’s <head> , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers’ main rendering.
Following are different content types can be preloaded. The possible as attribute values are:
audio: Audio file, as typically used in<audio>.document: An HTML document intended to be embedded by a<frame>or<iframe>.embed: A resource to be embedded inside an<embed>element.fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.font: Font file.image: Image file.object: A resource to be embedded inside an<object>element.script: JavaScript file.style: CSS stylesheet.track: WebVTT file.worker: A JavaScript web worker or shared worker.video: Video file, as typically used in<video></code.
Example:
<link rel="preload" href="maxwebsolutions.webm" as="video" type="video/webm">
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="helpdeskpunjab-logo.png" as="image" media="(max-width: 600px)">