ウェブサイトの速度テスト中に、 PageSpeed Insightsで「Webフォントの読み込み中にテキストが常に表示されるようにしてください」という警告が表示されたことがあるかもしれません。Webフォントが完全にダウンロードされる前に、ブラウザがウェブサイトの描画を開始する場合があります。そのため、Webフォントがダウンロードされるまで、ユーザーはコンテンツを表示したりアクセスしたりすることができません。この間、Webフォントは非表示になります。これは「見えないテキストのちらつき（FOIT）」 問題と呼ばれています。
ウェブフォントの読み込みプロセス中にテキストが常に表示されるようにすることで、ユーザーエクスペリエンスを向上させることができます。これにより、空白ページや不要なレイアウト変更を回避できます。.
Web フォントの読み込みはページのパフォーマンスにどのような影響を与えますか?
次のような影響があります。
- PageSpeed Insightsスコアに影響を与える
- 累積レイアウトシフトグレードに影響します
- 最初のコンテンツ ペイントと最大のコンテンツ ペイントのグレード (Core Web Vitals)
- ユーザーエクスペリエンスとコンバージョン率
テキストがないことは、Webフォントの読み込み中のユーザーエクスペリエンスにも影響を及ぼします。空白ページのウェブサイトにアクセスしたい人は誰もいません。ユーザーは数秒で、メインタイトルとテキストを読むだけで、そのサイトに探している情報が含まれているかどうかを判断できます。.
累積レイアウトシフト（CLS）グレードを最適化・向上させるには、Webフォントによる突然のレイアウトシフトを回避することが不可欠です。読み込み中にテキストが常に表示されるようにすることで、（ユーザーの操作なしに）予期せぬコンテンツの移動を防ぐことができます。Webフォントは、ダウンロードおよびレンダリング時に非表示のテキストが点滅すると、レイアウトシフトを引き起こす可能性があります。.
ウェブフォントの読み込み中にテキストが表示され続けるようにする方法
この瞬間は、不可視テキストのフラッシュ（FOIT）と呼ばれます。「Webフォントの読み込み中はテキストが常に表示されるようにしてください」というエラーメッセージは、このFOITが原因で表示されます。.
フォント表示: スワップ
font-displayプロパティは、すべての最新のウェブブラウザでアクセスできるCSS記述子です。font-display記述子は、フォントがダウンロードされたかどうか、そしてダウンロードされた日付に基づいて、フォントの表示方法を決定します。例えば、@font-faceを使用するルールは、font-display属性を利用します。.
フォントの表示方法には、ブロック、スワップ、フォールバック、オプションなど、さまざまな変数があります。FOIT の発生を防ぐにはスワップ値、テキストが人間が可能な限り速く画面に表示されるようにするにはスワップ値を使用します。
これを自動化するには、WordPressのSwap Google Fonts Displayプラグインを使用します。ElementorにはGoogle Fontsの入れ替え機能が組み込まれています。WP Rocket、Flyingpress、Perfmattersなどの他の最適化プラグインも、この機能を標準で提供しています。
フォントの読み込みを高速化するには、 preconnects と preload を使用します。
<link rel='preload' href='/font.woff2' as='font' crossorigin>
これによって CLS も削減されます。.
まとめ
このガイドでは、Web フォントの読み込み中にテキストが表示され続けるようにすることで、ページ スピード インサイトの「目に見えないテキストの点滅」問題を修正する方法について説明します。.
ページの読み込み時間とページ速度は、優れたユーザーエクスペリエンスを提供する上で重要な要素であり、この問題を修正することで、ユーザーエクスペリエンスを大幅に向上させることができます。ページ上のすべてのコンテンツが表示されていない場合、ページは読み込まれていないとみなされます。したがって、タイムアウトを回避し、ユーザーが求めるバランス、速度、安定性を提供するには、ページ上のコンテンツの読み込み時間を短縮する必要があります。.
当社のWordPress サイト最適化サービスで WordPress のパフォーマンスを高速化しましょう。
