<zhead>
Link

preload

Fetches a resource early for the current navigation, using the destination and priority implied by the as attribute. Preload fetches the resource but does not apply or execute it.

Code examples

Good example
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin>
Preloads a font with the destination, type, and anonymous CORS mode used by the later font request.
Good example
<link rel="preload" href="/critical.css" as="style">
Fetches CSS early. A separate stylesheet link is still needed to apply it.
Avoid this example
<link rel="preload" href="/critical.css">
Omits as, so the preload has no valid fetch destination and is ignored.

Recommendations

  • 01
    Set the fetch destination
    The as value must match how the resource will be used, such as style, script, font, or image. A mismatch can cause another fetch.
  • 02
    Match CORS settings
    The preload and the later resource request must use compatible CORS and credentials modes. Fonts generally need crossorigin, including same-origin font preloads.
  • 03
    Preload only near-term resources
    Browsers warn when a preloaded resource is not used soon after load. Too many preloads can delay resources that matter more.

Related documentation