ホーム > ブログ > HP/ホームページ > 【Googleフォント】display=swap とは？SEOと表示速度に与える影響を解説

【Googleフォント】display=swap とは？SEOと表示速度に与える影響を解説

Webフォントを導入するとき、Google FontsのURLに display=swap というパラメータを見かけたことはありませんか？

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

この display=swap は、フォントの表示速度やSEOに大きく関わる重要な設定です。
本記事では、display=swap の役割、メリット、デメリット、SEOとの関係、具体的な設定方法を詳しく解説します。

1. `display=swap` とは？

display=swap は、フォントの表示方法を指定するCSSのプロパティ（font-display）の設定の一つです。
Webフォントの読み込みが遅れても、最初に代替フォント（フォールバックフォント）を表示し、あとからGoogleフォントに切り替える動作を行います。

つまり、「フォントが読み込まれるまで文字が表示されない」現象を防ぐための仕組み です。

2. `display=swap` を設定するメリット

✅ ① FOUT（Flash of Unstyled Text）を発生させる → 文字がすぐに表示される

通常、Webフォントが読み込まれる前にフォントが非表示になる現象（FOIT: Flash of Invisible Text）が発生します。
しかし、display=swap を設定すると、最初は代替フォントが表示され、後からWebフォントに置き換えられます（FOUT: Flash of Unstyled Text）。

この動作により、ユーザーが白い画面を見る時間が減り、UX（ユーザーエクスペリエンス）が向上します。

✅ ② ページの表示速度が改善される（LCPの向上）

GoogleのSEO評価基準のひとつに「Largest Contentful Paint（LCP）」があります。
LCPは、ページの主要コンテンツ（例：見出しやテキスト）が表示されるまでの時間を測る指標で、Webフォントの読み込みが遅いとLCPのスコアが悪化する可能性があります。

display=swap を使うことで、フォントが完全に読み込まれる前に代替フォントを表示できるため、LCPが改善され、SEO対策に有効です。

✅ ③ CLS（Cumulative Layout Shift）の低減

CLSは、ページのレイアウトが読み込み中にどれくらい変化するかを示す指標です。
Webフォントが遅れて表示されると、フォントのサイズが変わりレイアウトがズレる原因になります。

display=swap を指定すると、最初に代替フォントが表示されるため、CLSの悪化を防ぐことができます。

3. `display=swap` のデメリットはある？

🔹 一瞬、代替フォントが表示される
display=swap を使うと、Webフォントの読み込みが完了するまで、デフォルトのシステムフォント（例：Arial、Times New Roman など）が一瞬表示されます。
この一瞬の変化を「FOUT（Flash of Unstyled Text）」と呼びます。

👎 解決策

代替フォント（フォールバックフォント）をWebフォントと似たデザインのものに指定する
主要な見出し部分だけWebフォントを適用し、本文はシステムフォントを使う

4. `display=swap` の設定方法

📌 Google Fonts の場合

Google Fontsを使う場合、display=swap をURLに追加します。

✅ 設定例（Google Fonts）

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

👉 この方法なら、一行で簡単に display=swap を有効化できます！

📌 `@font-face` を使う場合

自前でWebフォントをホスティングする場合は、CSSの @font-face ルール内で font-display: swap; を設定します。

✅ 設定例（自前ホスティング）

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/MyCustomFont.woff2') format('woff2'),
       url('/fonts/MyCustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

👉 この方法なら、自分で管理しているフォントにも display=swap を適用可能！

5. `display=swap` の適切な活用法（実践編）

① 代替フォントを指定する

Webフォントの読み込み前に表示される代替フォントを、できるだけWebフォントと似たものに設定すると違和感を減らせます。

✅ 例（フォールバックフォントを指定）

body {
  font-family: 'Noto Sans JP', sans-serif;
}

↓ より適切な設定：

body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
}

👉 最初に表示されるフォントがGoogleフォントに近いデザインなら、切り替え時の違和感を最小限にできます！

② 主要部分のみWebフォントを適用する

見出し（h1, h2 など）だけWebフォントを適用し、本文はデフォルトのシステムフォントにする方法もおすすめです。

✅ 例

h1, h2 {
  font-family: 'Noto Sans JP', sans-serif;
}

p {
  font-family: 'Arial', sans-serif;
}

👉 ページの読み込み速度を改善しつつ、デザイン性も確保できます！

6. まとめ：`display=swap` を活用してサイト表示速度を改善しよう！

✅ display=swap を使うことで、フォントの遅延表示（FOIT）を防ぎ、ページ速度を向上！
✅ SEO指標（LCP, CLS）の改善につながるため、Google検索の評価にも良い影響！
✅ フォールバックフォントを適切に設定することで、FOUTの違和感を減らせる！

display=swap を正しく活用し、ユーザー体験（UX）を向上させましょう！ 🚀✨

【Googleフォント】display=swap とは？SEOと表示速度に与える影響を解説

1. display=swap とは？

2. display=swap を設定するメリット