フォントは「ただの装飾」ではない：ブラウザレンダリングの深淵とWebフォントの制御戦略
フロントエンドの最適化を突き詰めていくと、必ず「フォントの読み込み」という壁にぶつかる。ただのテキスト表示に過ぎないはずのフォントが、なぜ私たちのアプリケーションのパフォーマンスをここまで翻弄するのか。
今日は、ブラウザのレンダリングパイプラインを深く掘り下げ、WebフォントがDOM構築の裏側で何をやらかしているのか、そして我々エンジニアがどう制御すべきかについて、少し泥臭い話をしよう。
—
1. Webフォントという「隠れたブロッキング因子」
ブラウザはHTMLをパースし、DOMツリーを構築する。並行してCSSOMツリーも構築されるが、問題はCSS内に `@font-face` が現れた時だ。
ブラウザのレンダリングエンジン（BlinkやWebKit）は、非常に慎重だ。「どの文字にどのフォントを適用すべきか」が確定するまで、テキストの描画をためらうことがある。 これが、我々を悩ませる「FOIT (Flash of Invisible Text)」の正体だ。
DOM構築との競合
フォントファイルは外部リソースであり、非同期で読み込まれる。しかし、レンダリングエンジンは「レイアウト計算が終わるまで待て」と命じる。もしネットワークが遅延すれば、ユーザーの画面には「何も書かれていない空白」が数秒間居座ることになる。これはUI/UX的に致命的なバグと言ってもいい。
2. 制御の要：font-display の挙動を読み解く
`font-display` プロパティは、この「待つか、妥協するか」の意思決定をブラウザに指示するコマンドだ。
- `block`: ブラウザはフォントが来るまでテキストを隠す（最大3秒程度）。
- `swap`: 読み込み完了までフォールバックフォントを表示し、完了後に切り替える。FOUT (Flash of Unstyled Text) は発生するが、ユーザーは即座に情報を得られる。
- `fallback`: 非常に短い待機時間の後、フォールバックを表示する。
- `optional`: 通信状況を見て、フォントが即座に使えなければ読み込みすら諦める。
上級エンジニアであれば、単に「`swap` にすればいいや」で済ませてはいけない。`swap` はレイアウトシフト（CLS）の最大の要因になり得るからだ。
/ 推奨される設定：フォント読み込みのライフサイクルを制御する /
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘/fonts/my-font.woff2’) format(‘woff2’);
/
swapを使うことでFOITを回避。
ただし、フォールバックフォントとWebフォントのメトリクス（行間や字幅）が
大きく異なると、レイアウトがガタつくリスクがある。
/
font-display: swap;
}
3. 現場で使える「フォント最適化」のアーキテクチャ
「フォントの読み込みによるガタつき（レイアウトシフト）」を最小限にするには、ブラウザのキャッシュ戦略と、フォント自体のサブセット化、そしてプリロードの組み合わせが鍵となる。
戦略1：`preload` による優先順位の引き上げ
ブラウザのパーサーに「このフォントはクリティカルだ」と教え込む必要がある。ただし、やりすぎは他のリソースの帯域を奪うので注意が必要だ。
戦略2：CSS Font Loading API で制御を握る
CSSだけで制御しきれない場合、JavaScriptで読み込み状態をフックし、クラスを付与する手法が最も堅牢だ。
// フォント読み込み状況を監視し、DOMにクラスを付与する
if (‘fonts’ in document) {
document.fonts.load(‘1em MyCustomFont’).then(() => {
// フォントが読み込まれたら、bodyにクラスを付けてレイアウトを再計算させる
document.documentElement.classList.add(‘fonts-loaded’);
});
}
4. 最後に：メモリ効率とレンダリング負荷への視点
忘れてはならないのは、Webフォントはブラウザの「メモリ」を消費するバイナリだということだ。大きなフォントファイルを無造作にインポートすれば、低スペックなモバイル端末の描画性能は確実に低下する。
特に、「サブセット化（必要な文字だけを抜き出す）」を怠ってはいけない。日本語フォントなどは数メガバイトになることもある。これをそのまま読み込めば、レンダリングパイプラインはフォントのパース処理だけでCPUを長時間占有し、スクロールのガタつきや、インタラクションの遅延（TBT: Total Blocking Timeの増大）を引き起こす。
まとめ：我々が目指すべきゴール
1. FOITを回避せよ（`swap` を基本戦略に）。
2. CLS（レイアウトシフト）を最小化せよ（`size-adjust` を使ったフォールバックの微調整を行う）。
3. リソースを精査せよ（サブセット化とプリロードの最適化）。
Webフォントは単なるデザインツールではない。ブラウザの描画という、極めて繊細なエンジニアリング領域を支配する「制御可能なリソース」であるべきだ。この制御にこだわり抜くことこそが、上級エンジニアと、ただライブラリを並べるだけの者の決定的な差になる。
さあ、エディタを開いて、君のアプリケーションのネットワークタブを確認してほしい。そこには、まだ最適化の余地が山ほど眠っているはずだ。
コメント