HTML tutorial

Preloading web resources

The browser loads and processes resources sequentially. Using the link element, you can tell the browser that the resource will be needed soon. And then the browser will download and save it to the cache. 

<link rel="preload" href="/css/defualt.css" as="style">

<link rel="preload" href="/js/site.js" as="script">

<link rel="preload" href="/video/myvidos.mp4" as="video" type="video/mp4">

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" 
    as="font" type="font/woff2" crossorigin>

<!-- and below use resources as usual -->
<link rel="stylesheet" href="/css/defualt.css">
...

You don't need preload all resources, only critical. If browser has developer tools, you can check the console log after reloading page. For example, Chrome will log message like this:

The resource url_resource was preloaded using link preload but not used within a few seconds from the window's load event."

attributes

attributedescription
rel Possible values are:
  • preload - when resource will be used within a few seconds
  • prefetch - when resource will be used on next page. It has low priority than preload.
  • prerender - renders a specified webpage in the background. May be refused for some reasons like low memory. Don't try specify more than one page.
hrefUrl of resource.
as Specifies the type of resource. Used by browser
  • for prioritizing of resources loading
  • to reusing the resource in future requests
  • for apply the correct content security policy
  • for set the correct Accept request headers for it
Possible values are:
  • audio - audio file, typically used in <audio> element
  • video - video file, typically used in <video> element
  • font - font file
  • image - image file
  • script - JavaScript file
  • style - CSS file
  • track - WebVTT file
  • document - an HTML document intended to be embedded in a <iframe> element
  • embed - resource to be embedded inside an <embed> element
  • object - resource to be embedded inside an <object> element
  • fetch - resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file
  • worker - a JavaScript web worker or shared worker
crossorigin Indicates whether CORS must be used when fetching the resource. For some reasons it is also used for preloading fonts even that not are cross-origin.