レスポンシブ Web フォント読み込み、新しい戦略
レスポンシブなプリロードとレスポンシブな font-face 宣言による、低速モバイルデバイス向けフォント読み込みの最適化
レスポンシブな font display とレスポンシブなプリロードによるフォント戦略
Core Web Vitals の専門家として、私は毎日さまざまな独創的なソリューションを目にしています。その多くはあまり理にかなっていませんが、時折、非常にシンプルかつエレガントで、特定のサイトには確かに有効な戦略に出会うことがあります。
この記事では、デスクトップ向けのレスポンシブなフォントプリロードと、Flash Of Unstyled Text（FOUT）を排除するための font display:optional の実装方法を解説します。モバイルではフォントを「デフォルト読み込み」し、font-display: swap を使用します。
ヒント: この戦略は、クリティカルレンダリングパスが大きいサイトに適しています。
早期フォント読み込みの問題点
Core Web Vitals を最適化する際、常に適用されるシンプルなルールがあります：
「Largest Contentful Paint の前に行うすべてのことが、その Largest Contentful Paint を遅くする」
この原則は Web フォントにも適用されます。ページ読み込み時に Web フォントの読み込みを優先すると user experience は向上しますが、サイトが Core Web Vitals のしきい値を満たすのに苦労している場合、特に特定のデバイスタイプにおいては、UX と LCP の改善のバランスを取る必要があるかもしれません。
以下のオランダの新聞サイトの例を見てみましょう。モバイルデバイスでは、LCP 要素の前に 3 つのフォントがキューに入れられています。これにより、3 つのフォントが初期のネットワークリソースを奪い合い、画像のタイミングが遅れます。
レスポンシブフォント戦略が解決策に！
このように初期のネットワーク競合が激しい場合、デバイスタイプを区別することは理にかなっています。一般的に、有線接続（およびより高速なネットワーク接続）の高速なデスクトップデバイスは、多くの初期ネットワークリソースを一度に処理でき、重要なフォントファイルをプリロードすることは非常に合理的です。
一方、モバイルデバイスは通勤中など最適でないネットワーク環境で使用されることがあります。モバイルデバイスはデスクトップと比較して CPU が遅く、利用可能なメモリも少ないことが多いです。これらの制約は、デバイスタイプに基づいてフォントの読み込みを異なる方法で処理することが理にかなっていることを意味します。
- Desktop： フォントのプリロードにより、帯域幅と処理能力に優れたデバイスでのレンダリングパフォーマンスが向上します。font-display: optional を使用してブロッキングを最小化し、フォントスワップの問題を排除します。これにより、フォントはリクエストから 100ms 以内に利用可能な場合のみ使用され、プリロードによりその目標が達成されます。
- Mobile： ネットワーク競合のため、フォントをプリロードしないでください。font-display: swap を使用してテキストレンダリングを高速化します。このアプローチでは、カスタムフォントがバックグラウンドで読み込まれ続ける間、フォールバックフォントが即座に表示され、性能の低いデバイスでより良い体験を提供します。
<link rel="preload"> とメディアクエリを使用した実装
フォントを一律に読み込む代わりに、HTML の <link> タグの media 属性と CSS を使用して、デバイスタイプに基づいて異なるフォント戦略を適用できます。
HTML の構造
<head>
<!-- Preload font for desktop only -->
<link rel="preload" href="/fonts/custom-font.woff2"
as="font" crossorigin="anonymous"
media="(min-width: 768px)">
<style>
/* Global font settings */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: swap;
}
/* Desktop font settings */
@media (min-width: 767px) {
@font-face {
font-display: optional;
}
}
body {
font-family: 'CustomFont', sans-serif;
}
</style>
</head> このアプローチのメリット
- Desktop の UX に注力： デスクトップでは Web フォントが即座にレンダリングされ、FOUT や FOIT を防ぎます。
- Mobile のパフォーマンスに注力：
font-display: swapにより、カスタムフォントがまだ読み込まれていなくても、ユーザーはすぐにテキストを見ることができます。 - 宣言的なシンプルさ： JavaScript を避けることで、複雑さを軽減し、保守性を向上させます。
実際のユースケース
冒頭で述べたように、この戦略は私が出会った実例に基づいています。デスクトップとモバイルの両方のユーザーをターゲットとする e コマースサイトがこの戦略を実装しました。その結果：
- Desktop： CLS と UX が改善され、スタイル付きフォントがほぼ即座に表示されるようになりました。
- Mobile： First Contentful Paint と Largest Contentful Paint の高速化により、低速な接続でも高速な user experience が確保されました。
CrUX data is 28 days late.
Google provides data 28 days late. CoreDash provides data in real-time. Debug faster.
- Real-Time Insights
- Faster Debugging
- Instant Feedback
