オプションのフォントをプリロードして、レイアウト シフトと非表示テキスト（FOIT）の点滅を防ぐ

Chrome 83 以降では、link rel="preload" と font-display: optional を組み合わせてレイアウトのジャンプを完全に解消できます

Houssein Djirdeh

Chrome 83 では、レンダリング サイクルを最適化することで、オプションのフォントをプリロードしたときのレイアウトのずれを解消しています。 <link rel="preload"> と font-display: optional を組み合わせることで、カスタム フォントのレンダリング時にレイアウトのジャンプが発生しないように できます。

ブラウザの互換性

最新のクロスブラウザ サポート情報については、MDN のデータをご覧ください。

フォントのレンダリング

レイアウトのずれ（再レイアウト）は、ウェブページ上のリソースが動的に変更されたときに発生し、コンテンツが「ずれる」原因となります。ウェブフォントの取得とレンダリングは、次の 2 つの方法でレイアウトのずれを直接引き起こす可能性があります。

  • フォールバック フォントが新しいフォントに置き換えられる（スタイルなしテキストのフラッシュ）
  • 新しいフォントがページにレンダリングされるまで「不可視」のテキストが表示される（不可視テキストのフラッシュ）

CSS の font-display プロパティを使用すると、 サポートされているさまざまな値（auto、block、 swap、fallback、optional）を使用して、カスタム フォントのレンダリング動作を変更できます。使用する値は、非同期で読み込まれたフォントの優先動作 によって異なります。ただし、これまで、サポートされているこれらの値はすべて、上記の 2 つの方法のいずれかで再レイアウトをトリガーする可能性がありました。

オプションのフォント

font-display プロパティは、レンダリングする前にダウンロードする必要があるフォントを処理するために、3 つの期間のタイムラインを使用します。

  • Block: 「不可視」のテキストをレンダリングしますが、読み込みが完了するとすぐにウェブフォントに切り替えます。
  • Swap: フォールバック システム フォントを使用してテキストをレンダリングしますが、読み込みが完了するとすぐにウェブフォントに切り替えます。
  • Fail: フォールバック システム フォントを使用してテキストをレンダリングします。

以前は、font-display: optional で指定されたフォントのブロック期間は 100 ミリ秒で、スワップ期間はありませんでした。つまり、フォールバック フォントに切り替わる前に「不可視」のテキストが短時間表示されます。100 ミリ秒以内にフォントがダウンロードされない場合は、フォールバック フォントが使用され、スワップは行われません。

フォントの読み込みに失敗したことを示す図。
以前の font-display: optional フォントが 100 ミリ秒のブロック期間後にダウンロードされた場合の Chrome での動作

ただし、フォントが 100 ミリ秒のブロック期間が完了する前にダウンロードされた場合は、カスタム フォントがレンダリングされてページで使用されます。

図は、フォントが時間内に読み込まれた場合の以前のオプションのフォントの動作を示しています。
Chrome での以前の font-display: optional の動作。フォントが 100 ミリ秒のブロック期間前にダウンロードされた場合

フォールバック フォントが使用されるか、カスタム フォントが時間内に読み込みを完了するかに関係なく、どちらの場合でも Chrome はページを2 回 再レンダリングします。これにより、不可視テキストがわずかにちらつき、新しいフォントがレンダリングされると、ページ コンテンツの一部が移動するレイアウトのジャンプが発生します。 これは、フォントがブラウザのディスク キャッシュに保存されていて、ブロック期間が完了する前に読み込むことができる場合でも発生します。

最適化が Chrome 83 に導入され、オプションのフォントの最初のレンダリング サイクルを完全に削除しました <link rel="preload'>でプリロードされます。 代わりに、カスタム フォントの読み込みが完了するか、一定の時間が経過するまでレンダリングがブロックされます。このタイムアウト期間は現在 100 ミリ秒に設定されていますが、パフォーマンスを最適化するために近い将来変更される可能性があります。

フォントの読み込みに失敗した場合の新しいプリロード オプション フォントの動作を示す図。
フォントがプリロードされ、フォントが 100 ミリ秒のブロック期間後にダウンロードされた場合の Chrome での新しいfont-display: optionalの動作（不可視テキストのフラッシュなし）
フォントが時間内に読み込まれた場合の新しいプリロードされたオプションのフォントの動作を示す図。
フォントがプリロードされ、フォントが 100 ミリ秒のブロック期間前にダウンロードされた場合の Chrome での新しいfont-display: optionalの動作（不可視テキストのフラッシュなし）

Chrome でオプションのフォントをプリロードすると、レイアウトのジャンプとスタイルなしテキストのフラッシュが発生する可能性がなくなります。これは、CSS Fonts Module Level 4 で指定されている必要な動作と一致します。オプションの フォントは再レイアウトを引き起こしてはならず、ユーザー エージェントは適切な期間 レンダリングを遅らせることができます。

オプションのフォントをプリロードする必要はありませんが、特にブラウザのキャッシュにまだ保存されていない場合は、最初のレンダリング サイクル前に読み込まれる可能性が大幅に高まります。

まとめ

Chrome チームは、これらの新しい最適化を適用してオプションのフォントをプリロードした際のエクスペリエンスについて、皆様からのご意見をお待ちしています。 問題が発生した場合や、機能に関するご提案がありましたら、 問題を報告してください。