perf/font-preload-crossorigin

Dlaczego

Browsers always fetch fonts in CORS mode, even from your own origin. A <link rel="preload" as="font"> without crossorigin is a non-CORS request, so it does not match: the browser downloads the font a second time when the CSS asks for it, and the preload only stole bandwidth.

Poprawka

Add crossorigin (anonymous) and type="font/woff2": <link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>. Preload only the one or two fonts used in the first view; frameworks such as next/font and @nuxt/fonts write the tag for you.

Przykłady

<!-- bad -->
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2">
<!-- good -->
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>

Źródła

• MDN, rel=preload (CORS-enabled fetches)
• web.dev, Best practices for fonts (preload)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain perf/font-preload-crossorigin