Webfont の読み込み中にテキストが表示されたままになるようにする方法

Google PageSpeed Insights などの一般的なツールを使用して Web サイトのパフォーマンス監査を実行しているときに、警告が表示されることがよくあります。 私たちは通常、これらの警告を無視し、わざわざ修正することもありません。その結果、これらの警告は、UX (ユーザー エクスペリエンス)、SEO (検索エンジン最適化)、Web サイトのパフォーマンス、およびその他の関連要因に有害であることが判明します。 この記事では、非常に人気のある Lighthouse の警告「Web フォントの読み込み中にテキストが表示されたままになるようにしてください」について学び、さまざまな方法でそれを修正する方法を学びます。

「Webフォントの読み込み中にテキストが表示されたままになるようにする」警告の調査

あなたが開発者であるか、Web サイトを所有している場合、PageSpeed インサイトで Web サイトのパフォーマンス監査を実行しているときに、この一般的な警告に遭遇した可能性があります。 この警告は、Web ページの読み込み中に Web ページ上のテキストが表示されないという問題を強調するのに役立つ Lighthouse からの推奨事項です。

これは最近では一般的な問題です。なぜなら人々はしばしば凝ったフォントや見た目に美しいフォントを求め、そのために Font Awesome、Google Fonts、または Adob​​e Fonts などの最新のフォント ライブラリを使用しますが、残念ながらこれらは訪問者のシステムには存在しません。そのため、最初にインターネットからダウンロードして、Web ページにレンダリングする必要があります。 これは時間のかかるプロセスであるため、Lighthouse はこれに注意して、「Web フォントの読み込み中にテキストが表示されたままになるようにしてください」という警告をスローします。 これが本質的に意味することは、Web フォントがまだ読み込まれていない場合でも、テキストが表示されたままになる必要があるということです。

Web フォントの読み込み中にテキストを再表示する必要がある主な理由は、ユーザー エクスペリエンスです。 訪問者に空白のテキスト画面を表示させて、フォントがシステムに読み込まれるのを待つべきではありません。これは、エンドユーザー エクスペリエンスの低下につながる可能性があるためです。Lighthouse は、これを Web サイトの開発者/所有者にとって重要なこととしてマークしています。できるだけ早く解決します。

この警告が何であるかがわかったので、それをよりよく理解し、関連する関係をより適切にマッピングするのに役立ついくつかの関連する概念について深く掘り下げてみましょう。

Flash of Invisible Text (FOIT) とは何ですか?

Flash of invisible text (FOIT) は、Web フォントが Web ページで使用されている場合の現象を説明するために使用される一般的な用語です。 新しい Web ページを開くと、ブラウザは関連するフォント ファイルを最初にダウンロードする必要があるため、Web フォントを読み込むのにかなりの時間がかかります。 このようなフォントは、デフォルトでは訪問者のシステムで使用できないため、その Web フォントのテキストはそのロード期間中は表示されません。 通常、これらはより大きなファイルであるため、このロード時間は顕著になる可能性があります。 これは、目に見えないテキストのフラッシュ(FOIT)と呼ばれます。 この概念は特に、Web フォントの読み込み中にテキストが表示されないという同じ問題を反映しているため、Lighthouse の警告「Web フォントの読み込み中にテキストが表示されたままにする」と非常によく関連しています。

関連記事

2023 年版 WordPress でのフォント読み込み最適化ガイド

FOIT は、ブラウザが Web フォントをダウンロードするのに時間がかかるため、インターネット接続が不十分な場合や、Web ページで複数の Web フォントが使用されている場合によく発生します。 この問題は、モバイル デバイスではさらに顕著になる場合があります。

Font-Display: スワップ vs フォールバック vs オプション

FOIT の問題を解決するには、フォントのプリロードや、テキストをすぐに表示できるフォールバック フォントを使用できるようにする font-display プロパティなど、複数の手法を使用できます。その間、Web フォントを適切に読み込んでから表示されます。

font-display プロパティには、スワップ、フォールバック、オプションの 3 つがあります。

これらのそれぞれと、それらが FOIT にどのように影響するかを簡単に調べてみましょう。

1.フォント表示：スワップ

このプロパティをコード レベルで WordPress サイトに追加する方法を簡単に見てみましょう。

Web フォントがロードされるプロジェクトの CSS ファイルで、Web フォントをロードする @font-face ルール内に font-display: swap を追加できます。 CSS ファイル内の @font-face プロパティは次のようになります。

これは FOIT を修正するのに役立ちます。その結果、Google Lighthouse PageSpeed Insights に「Web フォントの読み込み中にテキストが表示されたままになるようにする」という警告が表示されなくなります。

2. フォント表示: フォールバック

このプロパティは font-display: swap one に似ていますが、FOIT の問題を解決するために 1 レベル進んでいます。 では、ダウンロードする必要のある Web フォントが利用できないと仮定すると、どうなるでしょうか? これはまさに font-display: fallback の出番です。 これは、swap プロパティが行うこととほとんど同じですが、Web フォントが利用できない場合や適切にダウンロードできない場合のユースケースも処理する点が異なります。 ダウンロードする必要がある Web フォントが既知または未知の理由で利用できない場合に備えて、フォールバック フォントを使用し続けるようブラウザに指示するだけです。

font-display: fallback を使用すると、Web フォントの準備が整うまでフォールバック フォントが表示されるため、Web フォントの読み込みにかなりの時間がかかる場合、スタイル設定されていないテキスト (FOUT) のフラッシュが発生する可能性があります。

3. フォント表示: オプション

このプロパティは、font-display: fallback と同様に動作しますが、ここでは、Web フォントが使用可能な場合にのみ使用し、使用できない場合はフォールバック フォントを使用するようにブラウザに指示します。 これが本質的に意味することは、たとえば、Web フォントの読み込みに時間がかかる場合、ブラウザーはフォールバック フォントをまったく表示しないことを選択する可能性があり、その結果、FOIT につながる可能性があるということです。

全体として、これら 3 つのプロパティすべてを比較すると、font-display: swap が FOIT の問題を克服するための最良のプロパティであると思われ、次に font-display: fallback が続きます。読み込みにかなりの時間、次に font-display: オプション。 font-display: fallback またはfont-display: optional の選択は独断であり、好みによって異なります。

ウェブフォントの読み込み中に非表示のテキストが UX と SEO に与える影響は?

UX (ユーザー エクスペリエンス) と SEO (検索エンジン最適化) は、今日の Web サイトにとって最も重要な要素の 2 つであり、これらが Web フォントの読み込み中に目に見えないテキストによってどのように影響を受けるかを知ることは非常に重要です。 以下でこれらの両方を調べてみましょう。

UX（ユーザーエクスペリエンス）

目に見えないテキストを見ると、エンド ユーザーにとって悪夢になる可能性があります。 Web フォントがバックグラウンドで読み込まれているため、訪問者は Web ページにアクセスして、目に見えないテキストや説明のつかないシフトやレイアウトの変更を見たいとは思いません。 これは確かにエンド ユーザー エクスペリエンスの低下につながり、サイトの訪問者をイライラさせ、二度とサイトにアクセスしない可能性があります。 目に見えないテキストは、ユーザーが Web ページのコンテンツを読むのを非常に困難にします。特に、テキストがナビゲーション リンクや見出し、行動を促すボタンなど、ユーザー エクスペリエンスの重要な部分である場合はなおさらです。

LCP (Largest Contentful Paint)、 CLS (Cumulative Layout Shift)、 FID (First Input Delay) などの指標は、ウェブページの読み込みとユーザー インタラクションへの応答の速さなど、ウェブページのエンド ユーザー エクスペリエンスを決定する 3 つの重要な指標です。 目に見えないテキストは、これらの指標と他の同様の指標の両方に非常に悪影響を及ぼします。

目に見えないテキストがそれらに与える影響を調べてみましょう。

1. LCP (Largest Contentful Paint)

訪問者のシステムではデフォルトで使用できない Web フォントを使用する WordPress ページがあるとします。 そのため、訪問者が Web ページにアクセスすると、ブラウザーは、フォント ファイルを使用するテキストをレンダリングする前に、フォント ファイルのダウンロードを開始します。 ブラウザーが Web フォントをダウンロードしているときに Web ページに非表示のテキストがある場合、ブラウザーはフォント ファイルがダウンロードされるのを待ってから、表示されているテキストを画面に描画する必要があります。

その結果、最大のペイントがテキストの場合、LCP で大幅な遅延が発生する可能性があります。これは、ブラウザーがページに最大の可視コンテンツを表示する前に、最初にフォント ファイルがダウンロードされるのを待つ必要があるためです。

2.累積レイアウトシフト（CLS）

Web フォントの読み込み中にテキストが見えなくなると、さまざまな形で累積レイアウト シフト (CLS) に悪影響を及ぼします。 理解を深めるために、Web ページの読み込みプロセスの例を見てみましょう。 Web ページが読み込まれると、ブラウザーは、そのページで使用される可能性のあるカスタム フォントを含め、そのページを表示するために必要なすべてのリソースをダウンロードしてレンダリングする必要があります。 カスタム フォントが利用できない場合、ブラウザはフォールバック フォントを使用することがあります。これにより、カスタム フォントが読み込まれたときとは異なるテキストが表示される可能性があります。 その結果、カスタム フォントが読み込まれると、テキストが別の位置またはサイズにジャンプするため、予期しないレイアウト シフトが発生する可能性があります。

3. 最初の入力遅延 (FID)

通常、FID はフォントの読み込みの影響を受けません。 これは、適切にレンダリングされていなくても、テキスト要素がインタラクティブである可能性があるためです。

Web フォントの読み込み中に非表示のテキストは、Google の PageSpeed Insights スコアにどのように影響しますか?

Google の PageSpeed Insights スコアは、LCP、CLS、FID、およびその他の指標を含むさまざまな要因に基づいて計算されます。 非表示のテキストが LCP と CLS の両方に悪影響を与えることは既に確認しました。 Web ページの Web フォントが原因でこれらのメトリクスにマイナスの遅延が発生している場合、表面上ではページの読み込みが速いように見えても、PageSpeed はマイナスの影響を受ける可能性があります。 全体として、非表示のテキストが Web ページの PageSpeed Insights の全体的なスコアに悪影響を与える上で大きな役割を果たしていることがわかります。

要約すると、Web フォントの読み込み中の非表示テキストの影響は、UX に悪影響を及ぼします。

SEO (検索エンジン最適化)

Web フォントの読み込み中に非表示のテキストが SEO にどのように影響するかを理解するには、検索エンジンが Web サイトをランク付けする方法を一般的に理解する必要があります。 検索エンジンは Web ページのコンテンツを使用して、そのページの内容を判断し、適切にインデックスを作成します。 一般に、この目に見えないテキストは読み込み中のみ残り、その後はすべてが正常になるため、影響はあまりありません。 フォントが正しく読み込まれず、後で表示されない場合や、テキストの表示に時間がかかりすぎる場合に影響する可能性があります。

ただし、別の影響も重要です。悪い UX (前のセクション) は、悪い訪問者シグナルと低い CWV および PageSpeed スコアを意味します。 検索ランキング アルゴリズムは、検索結果ページで結果をランク付けする際にユーザー シグナルとパフォーマンス メトリックを考慮に入れるため、これらすべてが SEO に悪影響を及ぼします。

全体として、UX と SEO の両方が、Web フォントの読み込み中に表示されないテキストによって悪影響を受けます。 したがって、「ウェブフォントの読み込み中にテキストが表示されたままになるようにする」という警告をできるだけ早く修正する必要があります。そうしないと、多くのマイナスの結果に直面する必要があります。

関連記事

WordPress SEO 監査チェックリスト: 検査すべき 11 の重要な領域

Webfont の読み込み中にテキストが表示されたままになるようにする方法は?（WordPress修正）

問題自体と、関連する用語と概念について、まともな議論が行われました。 それでは、この問題の解決策または修正について詳しく見ていきましょう。 問題を解決するには、WordPress の 2 つの方法があります。 1 つは手動で修正する方法で、もう 1 つは WordPress プラグインを使用して修正する方法です。 以下でそれらの両方を簡単に調べてみましょう。

手動で修正

Web フォントの読み込みプロセス中にテキストが表示されたままになるようにするには、いくつかの手動の方法があります。 主要なもののいくつかをリストし、以下に説明します。

1.代替フォントを指定する

この問題に対処する優れた方法は、Web フォントの読み込みが完了するまで使用されるフォールバック フォントを指定することです。 実装も簡単です。 必要な作業は、Web サイトのスタイルシート (CSS) に CSS ルールを追加して、 font-family プロパティを Arial や Helvetica などの一般的に利用可能なシステム フォント、または利用可能なサンセリフ タイプのシステム フォントに設定することだけです。デバイス。

次のコード スニペットは、CSS ファイルに適用する CSS ルールを示しています。

2. CSS font-face ルールで font-display プロパティを使用する

スワップ、フォールバック、およびオプションなど、さまざまなフォント表示プロパティが FOIT を防ぐのにどのように役立つかについては既に説明しました。 詳細が必要な場合は、そのセクションまでもう一度スクロールしてください。

3. Web フォントをプリロードする

これは、Web フォントをプリロードすることで効果的な手法です。Web フォントをダウンロードして事前に利用できるようにすることで、ページのロード中に Web フォントのロードに時間がかからないようにすることができます。

これを実装するのはとても簡単です。 必要なことは、フォント ファイルを指すリンク要素を HTML ドキュメントの head に追加することだけです。

HTML ドキュメントの head に追加するリンク要素を視覚的に示すコード スニペットを見てみましょう。

4.システム フォントを使用する

Web フォントを使用すると、すべての問題が発生しますよね? では、プライマリ フォントとしての Web フォントを取り除き、システム フォント (エンド ユーザーのデバイスで既に利用可能なフォント) をプライマリ フォントとして割り当てるのはどうでしょうか? それは単に問題を解決するでしょう。 しかし、これにはトレードオフがあります。 システム フォントは見栄えがよくない場合があるため、この小さなトレードオフに対処する必要があります。 しかし、これはあなたの好みとあなたのウェブサイトが持っているウェブページコンテンツのタイプにすべて帰着するので、独断的なものです.

システム フォントを使用することで、Web フォントの読み込みに時間がかかる場合でも、テキストを表示したままにすることができます。 次のコード スニペットは、CSS ファイルを変更してシステム フォントのリストをデフォルトのプライマリ フォントとして追加する方法を示しています。

5.フォントサブセットを使用する

フォント サブセットは、特定の Web ページで使用される文字のみを含む Web フォントのカスタム バージョンです。 フォントのファイル サイズを小さくすることで、フォント サブセットは Web フォントの読み込みを高速化し、読み込みプロセス中にテキストが消える可能性を減らすことができます。 Google Fonts などの一部の Web フォント サービスでは、フォント サブセットを生成するオプションが提供されています。

要約すると、上記の手動手法を 1 つ以上使用することで、Web フォントの読み込み中にテキストが表示されたままになるようにすることができます。

WordPressプラグインで修正

WordPress プラグインは、手動のルートに行きたくない場合や、適切なプラグインを使用して Web フォントの読み込み中にテキストが表示されない問題を解決したい場合に最適なオプションです。 選択できる適切なプラグイン オプションは複数ありますが、利用可能な最高のものである10Web Boosterを使用することをお勧めします。 10Web Booster を使用すると、何もコーディングする必要はありません。プラグインはすぐに使用でき、フォントの読み込みを自動的に最適化します。

次のようなさまざまな最適化手法を使用して、Web フォントの読み込み中にテキストが表示されない問題を解決します。

1. 重要なフォントの読み込み –デフォルトで有効になっており、ほとんどの場合、スタンドアロンで問題を解決できます。

2. フォント スワップ –デフォルトでは無効になっています。

3. フォントの遅延読み込み– デフォルトでは無効になっています。

最初の最適化手法、つまり重要なフォントの読み込みは、通常、問題を解決するのに十分ですが、使用されない場合もあります。 重要なフォントの読み込みが実装するのに理想的な手法ではないいくつかのケースを見てみましょう。

1. 読み込むフォントの太さやスタイルが複数ある場合

複数のウェイトまたはスタイルを持つ Web フォントを使用している場合、重要なフォントの読み込みがあっても、必要なすべてのフォント ファイルを読み込むのに時間がかかることがあります。 この場合、フォント スワップを使用して、必要なフォントが読み込まれるまでフォールバック フォントを一時的に表示できます。 これにより、Web フォントが読み込まれている間でも、テキストが常にユーザーに表示されます。

2. ウェブサイトのコンテンツが多い場合

Web サイトに多くのコンテンツがある場合、重要なフォントの読み込みに時間がかかり、ユーザーがテキストを表示するのにまったく時間がかかることがあります。 この場合、フォントの遅延読み込みを使用して、ユーザーがコンテンツをスクロールするときにオンデマンドでフォントを読み込むことができます。 この手法は、最初のページの読み込み時間を短縮するのに役立ち、ユーザーがより迅速にコンテンツにアクセスできるようにします。

3. Web フォントがユーザー エクスペリエンスに不可欠でない場合

Web フォントが Web サイトの重要なコンポーネントではなく、それがなくてもユーザー エクスペリエンスに大きな影響がない場合は、フォント スワップを使用してシステム フォントまたは Web セーフ フォントに置き換えることができます。 これにより、Web フォントの読み込みに失敗した場合でも、テキストが常に表示されるようになります。

そのため、このような少数のユース ケースでは、手法 2 と 3 を使用して問題を解決できます。

まだ Web フォントの読み込みの問題を修正できませんか?(一般的な問題が修正されました)

上記の解決策に加えて、まだ Web フォントの読み込みの問題に直面しており、次の一般的な問題のいずれかに遭遇している場合は、このセクションを読む価値があります。

Webfont の読み込み中にテキストが表示されたままになるようにする – Google Fonts

一部のカスタム Google Web フォントを使用しているときに、「Web フォントの読み込み中にテキストが表示されたままになるようにしてください」という同じ警告が表示される場合があります。 これは通常、フォントを表示する前にフォント ファイルをダウンロードしてロードする必要があるため、ダウンロードに時間がかかるか、フォントのロードに失敗する可能性があり、その結果、コンテンツのテキストが見えなくなる可能性があるためです。または代替フォントで表示します。

この問題を解決するには、次の方法を使用できます。 前のセクションでそれらについて説明しました。

1. 「font-display」プロパティを使用する
2. システム フォントまたは Web セーフ フォントをフォールバックとして使用する
3. フォント サブセットを使用してフォント ファイルのサイズを縮小する

Webfont の読み込み中にテキストが表示されたままになるようにする – Font Awesome

アイコンに適した Web フォントを自由に選択できます。 Font Awesome、Material Symbols、またはローカル アイコン セットのいずれかです。 ただし、使用するフォント ライブラリが何であれ、フォントが十分に最適化されていること、適切かつ迅速に読み込まれること、および「Web フォントの読み込み中にテキストが表示されたままであることを確認してください」などの顕著なエラーや警告が発生しないことを確認してください。

Font Awesome フォントは、この警告を受けないように処理および使用することもできます。 Font Awesome を使用している場合、次のテクニックを使用してこの警告を取り除くことができます。

1. Font Awesome の非同期読み込みスクリプトを使用する

Font Awesome は、Web フォントを残りの Web ページ コンテンツとは別にロードする非同期ロード スクリプトを提供します。これにより、テキスト レンダリングのブロックを防ぐことができます。

HTML ファイルの head セクションに次のスクリプトを追加することで、このスクリプト メソッドを簡単に実装できます。

注: 「your_kit_id」を Font Awesome キット ID に置き換える必要があります。

2. フォント スタックでフォールバック フォントを定義する

何らかの理由で Font Awesome Web フォントの読み込みに失敗したか、ブロックされたとします。 この場合、既知または未知の理由でロードに失敗した Web フォントの代わりに、フォールバック フォントを表示する必要があります。 フォント スタックでフォールバック フォントのリストを定義できます。 それらは、ほとんどのデバイスで使用できるシステム フォントまたは Web セーフ フォントである可能性があります。

以下の CSS ファイルに追加する必要があるコードを定義する小さなコード スニペットを使用して、これを行う方法を見てみましょう。

このようなフォールバック フォントを追加すると、font awesome の代わりに文字「i」などの文字が表示されます。 良くはありませんが、何もないよりはましです。少なくとも、何らかのアイコンがそこにあることを示します。

3. Font Awesome CSS をプリロードする

別の解決策として、Font Awesome CSS をプリロードして、Web フォントの読み込みを高速化し、FOUT (スタイルのないテキストのフラッシュ) の可能性を減らすことができます。

次のコード スニペットは、リンク タグ スクリプトを介して Font Awesome CSS をプリロードする方法を示しています。

「style」の値で「as」属性を使用することにより、Font Awesome CSS がスタイルシートとしてプリロードされます。

Webfont の読み込み中にテキストが表示されたままになるようにする – ローカル フォント

通常、この警告は Web フォントにのみ適用されますが、ローカル フォントを使用しているにもかかわらずこの警告が引き続き表示される場合は、次の手順で警告を取り除くことができます。

1. ローカル フォントの読み込みを最適化する

FontFaceObserver のようなフォント読み込みライブラリを使用して、ローカル フォントを非同期的に読み込むことができます。つまり、代替フォントを使用してテキストが表示されている間、フォントはバックグラウンドで読み込まれます。 これにより、フォントの読み込み中にテキストが表示されたままになります。

2. ローカル フォントのサイズを小さくする

大きなフォント ファイルは読み込みに時間がかかり、テキストのレンダリングが遅れる可能性があります。 FontSquirrel などのフォント サブセット ツールを使用してフォント ファイルから不要な文字を削除することにより、ローカル フォントのサイズを小さくすることができます。

3. CDN を使用する

CDN を使用すると、スマートな手法になる可能性があります。 Web コンテンツを複数のサーバーに分散することで、読み込み時間が短縮され、その結果、Web サイトのパフォーマンスと信頼性が向上します。 ローカル フォントは、ローカルの CSS および JS ファイル、ローカルの画像、または Web ページ全体と同じように、CDN を介してキャッシュおよび保存することもできます。

通常、CDN 経由で読み込まれたコンテンツは、Web サイト サーバーから読み込まれたコンテンツよりも高速です。 要約すると、CDN は、ローカル フォントの「Web フォントの読み込み中にテキストが表示されたままになるようにする」という警告を解決するのに役立つ非常に効果的な手法であることがわかります。

関連記事

WordPress に最適な CDN: どちらが適していますか?

WordPress CDN – CDN でウェブサイトの読み込み時間を改善する方法

4. システム フォント スタックを使用する

システム フォントはほとんどのデバイスにプリインストールされており、通常は Web フォントやローカル フォントよりも高速にロードできます。 システム フォント スタックを使用すると、フォント ファイルの読み込みに失敗した場合でも、Web サイトのテキストが常に表示されるようにすることができます。

これらの手法に従えば、ローカル フォントを使用している場合でも、「Web フォントの読み込み中にテキストが表示されたままになるようにする」という警告を取り除くことができます。

結論

要約すると、この警告は非常に重要です。なぜなら、これが SEO、UX、PageSpeed Insights コアなどを含む多くのことに悪影響を与える可能性があることが分かっているからです。 したがって、この警告を修正するために説明した適切な方法のいずれかに従うことで、この Lighthouse 警告を取り除くことができます。
しかし、この面倒なことを手動で行いたくない場合は、10Web Booster プラグインがこの警告を解決するための優れた選択肢となるはずです.

よくある質問