目次
こんにちは。Webエンジニアの柴田です。
某プロジェクトでLCP・CLSの改善のために、フォントの表示方法を変え、テキストの表示を最適化する機会がありました。
本記事では、font-displayについての説明と選択する基準についてご説明します。
背景
某プロジェクトのアプリケーションにて、独自のWebフォントを読み込んでいました。
独自のWebフォントの読み込みによるテキスト表示の遅れが、PageSpeed Insightsで判明しました。
独自のWebフォントの読み込みによるテキスト表示の遅れをなくすべく、font-displayを使い、フォントの読み込み方法を見直そうとなったのが背景になります。
font-display
font-displayとは、CSSの機能でフォントが読み込まれる3つのフェイズを制御できるプロパティです。
font-displayは、@font-faceの中に記述します。
@font-face {
font-family: 'フォント名';
src: url();
font-weight: 数字 (例: 400);
font-style: normal | italic;
font-display: auto | swap | block | optional | fallback; // swapの選択の場合、swapを記述
}
フォント読み込みにおける3つの段階
font-displayは、フォントをダウンロードする期間を下記3つに分け、それぞれの期間をどう扱うかを指定できます。
1. フォントブロック期間
・何も表示されません。(厳密には、この期間にフォントがダウンロードできていない場合は、不可視の代替フォントが表示されます。)
・この期間にダウンロードできれば、ダウンロードしたフォントでテキストが表示されます。
2. フォントスワップ期間
・この期間にダウンロードできてない場合、代替フォントで表示されます。
・この期間にダウンロードできれば、ダウンロードしたフォントでテキストが表示されます。
3. フォント失敗期間
・この期間は代替フォントを表示します。
・この期間ではダウンロード・読み込み完了しても、指定したフォントは表示されません。
font-displayで利用できる値
font-displayは下記5つの値をサポートします。
ブロック期 | スワップ期 | 失敗期 | 備考 | |
block | 3秒以下 | 無制限 | ||
swap | 0.1秒以下 | 無制限 | ||
fallback | 0.1秒以下 | 3秒 | 無制限 | |
optional | 0.1秒以下 | 0秒 | 無制限 | |
auto | ユーザーエージェントが定義 |
各モダンブラウザのデフォルトのfont-display値は下記の通りです。
・Chrome: auto
・Edge: auto
・Safari: block
・FireFox: block
font-displayの値をどのように選択したのか？
判断基準
1. 早くテキストを表示する必要があるか
2. 代替フォントを一時的に表示しても問題ないか
3. 独自のWebフォントを読み込みできなかった場合、代替フォントを表示しても問題ないか
以上、3点を基準として設定しました。
選択した値
・LCPは良くするためにはテキストをなるべく早く表示する必要があり、代替フォントを一時的に表示することは問題がなかったため、blockは候補から外れました。
・プロジェクトの性質上、独自のWebフォントの表示が必須であったため、fallbackとoptionalも候補から外れました。
以上から、残る選択肢であったswapが選択となりました。
[補足] swapを採用すべきでないパターン
・プロジェクトにおいて、代替フォントの表示がNGであるパターン
・アプリケーションの構成上、代替フォントから独自のWebフォントへの切り替えが生じると表示に支障が出てしまうパターン
・独自のWebフォントを読み込みできなかった場合、代替フォントを表示しても問題ないパターン など
font-displayの値をswapに統一した結果
font-displayの値をswapに統一したことで、PageSpeed Insightsのテストが無事Passできてました。
おわりに
以上、フォントの表示方法をswapに統一した話をご紹介しました。
フォントの表示方法を見直している方やフォントの読み込みによるテキスト表示の遅れに悩んでいる方のご参考になれば幸いです。