Google Fontsの読み込みパフォーマンス — 最適化戦略

Google Fontsパフォーマンスの最適化

Google Fontsの読み込みは、ページレンダリングを遅延させるネットワークリクエストを追加します。選択したフォントペアリングを維持しながらパフォーマンスへの影響を最小限に抑える実証済みの戦略を紹介します。

1. GoogleのCDNへのPreconnect

フォントスタイルシートの前にpreconnectヒントを追加して、早期に接続を確立します：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

2. font-display: swapの使用

display=swapパラメータ（URLに含まれる）は、ブラウザにフォールバックテキストをすぐに表示し、Webフォントがロードされたらスワップするよう指示します。

3. 必要なウェイトのみをロード

追加のウェイトごとにファイルサイズが増えます。すべてのウェイトをロードする代わりに、必要なものだけを指定してください。

4. フォントリクエストの結合

単一のリクエストで複数のファミリーをロードして、接続オーバーヘッドを削減します。

5. セルフホスティングの検討

最大のパフォーマンスのために、フォントファイルをダウンロードして自分のドメインから提供してください。

6. バリアブルフォントの使用

単一のバリアブルフォントファイルが、複数のウェイト固有のファイルを置き換えます。Interのバリアブルファイル（約100KB）は100-900のすべてのウェイトをカバーします。