Webフォント最適化｜システムフォントで高速表示
リモートのWebフォントをシステムフォントに置き換えて、ページのダウンロード量を減らし、表示を高速化します。適用範囲は3段階から選べます。
更新日：
フォント最適化機能は、Webフォントのダウンロードリクエストをインターセプトし、端末にすでにあるシステムフォントに置き換えます。カスタムフォントはファイルサイズが大きいことが多く、ブロックすればそのダウンロード負荷がなくなります。デザイン性よりページの表示速度を重視するユーザーにとって、ページのダウンロード量を直接減らせる方法です。
仕組み
WebページはCSSの@font-face宣言でフォントファイルをリクエストし、フォントCDN（Google Fonts、Adobe Fontsなど）やサイト自身のサーバーへのネットワークリクエストが発生します。SuperchargePerformanceはChromeのdeclarativeNetRequest APIと2つの静的ルールセット（font_low_ruleset、font_med_ruleset）を使い、フォントファイルがダウンロードされる前にこれらのリクエストをブロックします。
フォントのリクエストがブロックされると、ブラウザはCSSのfont-familyスタックで指定された次のフォントにフォールバックします。フォールバックが定義されていない場合は、OSのデフォルトのシステムフォントが使われます。Highレベルでは、最適化された単一のシステムフォントがすべてのページに適用されるため、サイトごとの表示の違いがなくなります。
設定
| レベル | 動作 | 利用条件 |
|---|---|---|
| オフ | フォントをブロックしない — すべてのWebフォントが通常どおり読み込まれます | 無料 |
| 低 | Google Fontsを完全にブロック — アイコンフォントが表示されなくなります（空白の四角や意味のない文字列） | 無料 |
| 中 | すべてのカスタムWebフォントをシステムフォントに置き換え | 無料 |
| 高 | 最適化された単一のシステムフォントをすべてのページに適用 | PRO |
デフォルトはオフです。正確な文字デザインよりもページの読み込み速度を優先したい場合に有効にしてください。
活用シーン
- 大きなフォントファイルによる遅延が目立つ低速回線で、ページをもっと速く読み込みたい
- 読むことが中心で、サイト独自のブランド書体よりも文字の読みやすさを重視したい
- ブラウザがフォントCDNに送るサードパーティのネットワークリクエストを減らしたい
- モバイルホットスポットや従量制の回線を使っていて、通信量を節約したい
フォント最適化を表示コンテンツの優先読み込みと組み合わせると、フォントの節約に加えて画面外のアセットの読み込みも後回しにできます。
プライバシー
フォント最適化は、Chromeのネットワーク層でのローカルなルール照合だけで動作します。フォントリクエストのURL、ページの内容、閲覧データがどこかに送信されることはありません。すべての判断はお使いのデバイス上で行われます。