Webフォントは美しいが遅くなることもある
カスタムWebフォントはブランドの個性を表現するのに役立ちますが、ファイルが多かったり容量が大きいとテキストが表示されるまでに時間がかかり、体感的な読み込み速度を下げてしまいます。このツールはフォントファイル数、総容量、font-display戦略を入力すると、予想レンダリング遅延をミリ秒単位で推定します。
font-display戦略別の体感遅延倍率
| 戦略 | 倍率 |
|---|---|
| block | 1.0倍(テキスト非表示、体感遅延最大) |
| auto | 0.7倍 |
| fallback | 0.5倍 |
| swap | 0.3倍(代替フォントを先に表示) |
| optional | 0.15倍(体感遅延最小) |
遅延を減らす実践的なコツ
フォントファイル数を減らすには、使わない文字セットを除いたサブセットフォントやvariable fontを活用しましょう。font-display: swapを適用すると代替フォントで先にテキストを表示できるため、体感的な読み込み速度を大きく改善できます。
よくある質問
font-displayの戦略はなぜ遅延に影響しますか?
blockはフォントが読み込まれるまでテキストを隠すため体感遅延が大きく、swapやoptionalは代替フォントを先に表示するため体感遅延が減ります。
フォントファイル数を減らすとどれくらい効果がありますか?
ファイルごとに接続・リクエストのオーバーヘッドがあるため、サブセット化やvariable fontの活用でファイル数を減らすと遅延が大きく減ります。
この値は実際の読み込み速度と一致しますか?
いいえ。ネットワーク環境、キャッシュの有無、フォントサーバーの位置によって実際の値は変わるため、参考程度の推定値として利用してください。