Skip to content
The <head> Observatory

/static/observatorio/en/astro/preload/

Menu

HED-003 · Connections

<link rel="preload">

Orders a resource for this page before the parser finds out it needs it.

It fetches, at high priority, a resource the page itself will use but the browser would only discover late — the font hiding behind the CSS, the hero image referenced from a stylesheet. The as attribute is mandatory: it sets the request's priority, headers and security policy.

The myth is preloading everything: each preload competes with the rest of the page for the same bandwidth, and a resource fetched but unused within a few seconds earns a console warning. Fonts require crossorigin even when they live on the same origin — font fetches are always CORS.

<link rel="preload" href="/fontes/titulo.woff2"
      as="font" type="font/woff2" crossorigin>
The font the CSS would only reveal too late.