• HOME
  • ブログ
  • 「ウェブフォント読み込み中のテキストの表示」を改善する方法｜font-display:swapの設定例【PageSpeed Insights】

「ウェブフォント読み込み中のテキストの表示」を改善する方法｜font-display:swapの設定例【PageSpeed Insights】

  • 登録：
  • 更新：

Googleが提供する無料のサイト診断ツール「PageSpeed Insights」を使うと、サイトの読み込み速度を改善するための具体的なヒントが表示されます。その診断項目のひとつに「ウェブフォント読み込み中のテキストの表示」があります。この記事では、この指摘が何を意味しているのか、そしてどのように改善すればよいのかを、CSSの設定例も交えて解説します。

「ウェブフォント読み込み中のテキストの表示」とは？

かつてWebサイトで表示できる文字は、利用者の端末にあらかじめインストールされているフォントに限られていました。「ウェブフォント」は、サーバー側が用意したフォントデータを利用者の端末がダウンロードして表示する仕組みで、デザインの自由度を大きく広げてくれます。

その一方で、英数字だけなら軽いデータでも、漢字・ひらがな・カタカナを含む日本語フォントはデータ量が非常に大きくなります。フォントの読み込みに時間がかかると、その間ページの文字がまったく表示されない「空白状態」になってしまうことがあります。これがPageSpeed Insightsで「ウェブフォント読み込み中のテキストの表示」として指摘される問題です。読み込みが終わるまで何も見えない状態は、ユーザーにとって「ページが固まっている」ように感じられ、離脱の原因にもなりかねません。

改善の鍵は「font-display」プロパティ

この問題に対する最も基本的かつ効果の高い対策が、CSSの@font-faceにfont-displayプロパティを指定することです。font-display: swap;を設定すると、ウェブフォントの読み込みが完了するまでの間は端末にある代替フォント（フォールバックフォント）でテキストを表示し、読み込みが終わった時点で指定のウェブフォントに切り替えてくれます。

自分のサーバーにフォントファイルを置いている場合は、次のように記述します。

@font-face {
  font-family: "MyWebFont";
  src: url("/fonts/mywebfont.woff2") format("woff2");
  font-display: swap;
}

Google Fontsを利用している場合は、読み込み用のCSSのURLに&display=swapというパラメータを追加するだけで、同じ効果が得られます。

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

「とりあえず文字が表示される状態」を作れるだけでも、PageSpeed Insightsのスコアやユーザー体験は大きく改善します。まずはここから取り組むのがおすすめです。

フォントデータ自体を軽くする方法

font-display: swapはあくまで「読み込み中の見え方」を改善するもので、フォントデータの読み込み自体が遅いという根本的な問題は解決しません。あわせて、フォントデータそのものを軽量化する工夫も行いましょう。

サブセット化で不要な文字を間引く

「サブセット化」とは、フォントデータの中から使用頻度の低い文字を取り除き、データ量を減らす作業です。日本語フォントの場合、「ひらがな・カタカナ・第一水準漢字程度」に絞り込むだけでも、データ量を大幅に削減できることがあります。Web上にはサブセット化済みの日本語フォントを配布しているサービスもあるため、自分のサイトで使う文字種に合ったものを探して試してみるとよいでしょう。サイトのテーマやポリシーによって必要な文字範囲は変わるため、表示崩れがないか必ず確認しながら進めてください。

フォントの太さ（ウェイト）を絞り込む

多くのウェブフォントには、細字から極太まで7〜8段階の太さ（ウェイト）が用意されています。しかし、実際のサイトでそのすべてを使うケースはほとんどありません。使っていないウェイトのデータまで読み込ませてしまうと、それだけページの表示が遅くなります。本文用・見出し用など、実際に使用するウェイトだけを読み込むように設定を絞り込みましょう。

端末にあるフォントを優先的に使う設定

少し応用的な方法として、利用者の端末に同じフォントがすでにインストールされている場合は、そちらを優先的に使う設定もあります。@font-faceのsrcにlocal()を指定し、見つからなかった場合だけサーバーからウェブフォントを読み込む、という記述です。

@font-face {
  font-family: "MyWebFont";
  src: local("MyWebFont"),
       url("/fonts/mywebfont.woff2") format("woff2");
  font-display: swap;
}

この設定を行う際の注意点は、「端末にフォントが存在しなかった場合」に必ずサーバーから読み込む記述も残しておくことです。local()だけにしてしまうと、フォントが見つからない端末では文字そのものが表示されなくなってしまうため注意しましょう。

設定を変更したら、PageSpeed Insightsで再診断し、「ウェブフォント読み込み中のテキストの表示」の指摘が解消されているか、また他の項目に悪影響が出ていないかをあわせて確認してください。

あわせて確認したいPageSpeed Insightsの改善項目

ウェブフォントまわりの改善とあわせて、以下の項目もチェックしておくと、サイト全体の表示速度をさらに底上げできます。

まとめ

「ウェブフォント読み込み中のテキストの表示」は、フォントの読み込み待ちでテキストが見えなくなることへの警告です。まずはfont-display: swapを設定して「読み込み中も文字が見える状態」を作ったうえで、サブセット化やウェイトの絞り込みでフォントデータ自体を軽くしていくのが効果的な改善の流れです。一度に全てを完璧にしようとせず、優先度の高いものから少しずつ手を入れていきましょう。

このテーマの関連記事はこちら