perf/font-preconnect

Dlaczego

With Google Fonts the stylesheet comes from fonts.googleapis.com but the font files from fonts.gstatic.com, which the browser discovers only after the CSS arrives. Each new origin costs a DNS lookup, a connection and TLS before the first byte of the font, delaying the text. A preconnect without crossorigin opens the wrong kind of connection for fonts.

Poprawka

Prefer self-hosting the fonts from your own origin (next/font and @nuxt/fonts do it at build time). If you keep the CDN, add <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> before the stylesheet and &display=swap to its URL.

Przykłady

<!-- bad -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap">
<!-- good -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap">

Źródła

• web.dev, Best practices for fonts (preconnect and self-hosting)
• MDN, rel=preconnect

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain perf/font-preconnect