10MBのフォントを
背負った亀
「おしゃれにしたいから」と、デザイナーは美しい日本語フォントを選びました。
しかし、そのフォントファイルのサイズは10MB。
モバイルユーザーにとって、それはページが表示されるまで10秒間、真っ白な画面を見つめることを意味しました。
- Google Fontsで、とりあえず `Regular` `Bold` `Light` など全ウェイトを選んでいる
- 日本語フォントを「サブセット（必要な文字だけ）」にせずにフルセットで読み込んでいる
- ページ読み込み中に文字が消える現象（FOIT）が発生している
- `font-display: swap` を設定していない
3秒待たせると、ユーザーの53%は離脱します。
01. 日本語フォントの重み
アルファベットは26文字ですが、漢字を含む日本語フォントは数万文字を含みます。
フルセットのフォントファイルは数MB〜10MBにもなり、LTE回線ではダウンロードに数秒かかります。
その間、ブラウザは文字を描画できず、ユーザーには「何も表示されない」という最悪の体験を与えます。
速さの中に宿る。
02. サブセット化とSwap
日本語Webフォントを使うなら、「サブセット化（使われる文字だけを抽出）」は必須です。
Google Fontsなどは自動で最適化してくれますが、自前でホストする場合は要注意です。
また、CSSで `font-display: swap` を指定しましょう。
これは「フォントがダウンロードされるまでは、とりあえず標準フォントで表示する」という設定です。
一瞬フォントが切り替わる違和感よりも、情報がすぐ読めることの方が遥かに重要です。
03. システムフォントの復権
最近のOS（iOS, Android, Windows, Mac）に標準搭載されているフォント（ヒラギノ、游ゴシック、Noto Sansなど）は十分に美しいです。
「本当にWebフォントが必要か？」を疑ってください。
システムフォントを使えば、読み込み時間はゼロ（0秒）です。これに勝るパフォーマンスチューニングはありません。