DNS解決・TCP接続・TLSハンドシェイクを事前に行う。リソース自体のダウンロードは行わない。
<link rel="preconnect" href="https://fonts.googleapis.com" />用途: リソースのURLが確定しないが、接続先オリジンがわかっている場合（例: Typekitのように動的にリソースURLが決まるケース）。
リソース自体をダウンロードし、ブラウザキャッシュに保存する。preconnect（接続の事前確立）とは別の機能であり、上位互換ではない。
<link rel="preload" href="https://fonts.googleapis.com/css2?family=..." as="style" crossorigin />用途: リソースのURLが確定している場合。
| 条件 | 選択 |
|---|---|
| リソースURLが確定している | preload |
| 接続先オリジンのみ確定している | preconnect |
preloadとpreconnectは異なる機能のため、外部オリジンのリソースをダウンロードする場合はpreconnectとpreloadの併記が有効。
Webフォントの読み込み完了前にテキストをどう表示するかを制御するプロパティ。Google Fontsの場合、URLパラメータ display= で指定する。
| 値 | 挙動 |
|---|---|
block |
フォント読み込み完了までテキストを非表示にする。読み込み完了後に表示。 |
swap |
フォールバックフォントで表示し、読み込み完了後に差し替える。 |
fallback |
フォールバックフォントで表示。一定期間内に読み込み完了すれば差し替え、完了しなければフォールバックのまま。 |
optional |
フォールバックフォントで表示。次回アクセス時にキャッシュから適用。 |
参照: CSS Fonts Module Level 4 4.9
ページ表示時にフォント適用前のフォールバックフォントが表示される現象。font-display: swap を指定した場合に発生する。
対策:
display=blockを指定し、フォント読み込み完了までテキストを非表示にするrel="preload"でフォントCSSをダウンロードし、読み込み時間を削減する
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=...&display=block" as="style" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=...&display=block" rel="stylesheet" />