Webフォントの最適化がページ速度とSEOに与える影響
WebフォントとSEOパフォーマンスの関係
Webフォントは、ブランドの統一感やデザインの品質を高める重要な要素ですが、適切に最適化しないとページの読み込み速度に大きな悪影響を及ぼします。フォントファイルのダウンロードが遅れると、テキストの表示が遅延し、Core Web VitalsのLCP（Largest Contentful Paint）やCLS（Cumulative Layout Shift）のスコアを悪化させる原因となります。
日本語フォントは、アルファベットフォントと比較してファイルサイズが非常に大きいという特徴があります。英語フォントは数十〜数百KBであるのに対し、日本語フォントはJIS第一水準・第二水準の漢字を含むため、1ファイルあたり数MB〜10MB以上になることも珍しくありません。このため、日本語サイトにおけるWebフォントの最適化はSEOパフォーマンスに特に大きな影響を与えます。
フォントの読み込みがパフォーマンスに与える影響
FOIT（Flash of Invisible Text）
フォントの読み込みが完了するまでテキストが表示されない現象です。ユーザーは一定時間、空白の画面を見ることになり、体験を損ないます。また、LCPのスコアにも悪影響を与えます。
FOUT（Flash of Unstyled Text）
フォントの読み込みが完了するまでフォールバックフォントが表示され、読み込み完了後にWebフォントに切り替わる現象です。テキストの切り替わり時にレイアウトがずれると、CLSのスコアが悪化する原因となります。
Webフォント最適化の具体的手法
font-displayプロパティの活用
CSSのfont-displayプロパティを使用して、フォントの読み込み動作を制御します。SEOの観点ではfont-display: swapまたはfont-display: optionalの使用が推奨されます。
- swap：フォールバックフォントを即座に表示し、Webフォントの読み込み完了後に切り替える。テキストが常に表示されるためLCPに有利
- optional：フォントが即座に利用可能であれば使用し、そうでなければフォールバックのまま表示する。ネットワークが遅い環境でのパフォーマンスが良好
- fallback：短いブロック期間の後、フォールバックフォントを表示。一定時間内にWebフォントが読み込まれれば切り替える
サブセット化による軽量化
日本語フォントの最適化で最も効果的な手法がサブセット化です。使用する文字だけを含むフォントファイルを生成することで、ファイルサイズを大幅に削減できます。
- Unicode Range Subsetting：CSS の
unicode-rangeプロパティを使用し、必要な文字範囲のみを読み込む - ツールによるサブセット生成：
pyftsubset（Python）やglyphhanger（Node.js）を使って、使用文字だけを含むフォントファイルを生成する - Google Fonts の活用：Google Fontsは日本語フォントを自動的にサブセット分割して配信するため、手動でのサブセット化が不要
プリロードとプリコネクト
重要なフォントファイルの読み込みを高速化するために、link rel="preload"とlink rel="preconnect"を活用します。
- preload：最も重要なフォントファイル（ファーストビューで使用するウエイト）をプリロードする。ただし、過度なプリロードは逆効果となるため、1〜2ファイルに限定する
- preconnect：外部フォントサービス（Google Fonts等）を使用する場合、そのドメインへの事前接続を行う
フォント最適化のベストプラクティスまとめ
Webフォントの最適化は、デザイン品質とパフォーマンスのバランスを取る作業です。使用するフォントウエイトを必要最小限に抑え、WOFF2形式で配信し、サブセット化でファイルサイズを削減し、font-display: swapで表示遅延を防止するという基本原則を守ることで、デザインの質を維持しながらSEOパフォーマンスも確保できます。定期的にPageSpeed InsightsでWebフォント関連の指摘がないか確認し、改善を継続することが重要です。
