PageSpeedの「Webフォントのロード中にテキストが表示されたままになるようにする」エラーを修正する方法

Googleのページ速度の洞察を確認しているときに「 Webフォントの読み込み中にテキストが表示されたままであることを確認してください」というエラーが発生し、この問題を解決する方法がわかりませんか？ 一般的に、私はカスタムPHPまたはHTMLベースのWebサイトでこの問題を解決する方法を知っていますが、WordPressに関しても苦労しました。

したがって、このガイドでは、WordPressでこの問題を解決し（カスタムPHPおよびHTMLベースのサイトでこの問題を修正する手順も共有します）、このエラーを削除してページ速度スコアを上げる方法について説明します。

PageSpeedで「Webフォントのロード中にテキストが表示されたままであることを確認してください」というエラーが表示されるのはなぜですか

GoogleのPageSpeedInsightでウェブサイトをテストすると、「ウェブフォントの読み込み中にテキストが表示されたままになるようにする」エラーの問題が発生する場合があります。エラーをクリックすると、フォントファイルの完全なURLが表示されます。

上の画像でわかるように、このWebサイトで「Webフォントの読み込み中にテキストが表示されたままであることを確認してください」というエラーも表示されます。クリックすると、GoogleFontファイルの完全なURLが表示されます。

なぜエラーが表示されるのですか？

Webサイトがブラウザに読み込まれ、テキストに適用されているカスタムフォントファイルを検出すると、フォントがダウンロードされるまで待機し、その時点までテキストは非表示になります。 カスタムフォントファイルがダウンロードされると、すぐにWebサイトに適用されます。これは、非表示テキストのフラッシュと呼ばれます。

非表示のテキストのフラッシュを修正する方法は？

非表示のテキストのフラッシュを修正すると、Webサイトの「Webフォントの読み込み中にテキストが表示されたままになるようにする」エラーも修正できます。この問題の修正は非常に簡単です。

追加することでこの問題を簡単に修正できます

フォント表示：スワップ;

現在のコード

@ font-face {

}

CSSプロパティ。

しかし、@ font-faceとは何ですか？

@ font-faceは、カスタムフォントをテキストに適用できる単純なCSSルールです。 woff2、woff、ttfなどの拡張子があります。たとえば、@font-faceコードは次のようになります。

 @ font-face {

font-family：Roboto、sans-serif;

フォント表示：スワップ; //--->この問題は修正されます。

フォントスタイル：通常;

フォントの太さ：400;

src：url（Roboto.woff2）;

}

次に、;を使用してこのフォントを段落に適用します。

 p {

font-family：Roboto、sans-serif;

フォントサイズ：18px;

}

Webサイトが読み込まれると、段落タグに「 Roboto 」フォントが適用されていることを示し、段落タグで使用されているフォントのダウンロードを即座に開始します。 フォントをダウンロードするまで、テキストは表示されません。

これが、pagespeedとfont-displayの追加で「 webfontのロード中にテキストが表示されたままであることを確認してください」というエラーが表示される理由です。 現在の@font- faceCSSでこの問題を解決できます。

WordPressでこの問題を修正する方法

WordPressを使用していて、ページ速度の洞察にこのエラーが表示される場合は、簡単な手順でこの問題を簡単に解決できます。 ローカルフォントとGoogleフォントの両方でこのエラーを解決する手順を共有しました。

GoogleFontsのソリューション

最初、GoogleFontsはfont-displayを追加しません：swap; フォントにルールを設定しますが、font-displayを適用するための新しいクエリパラメータをサポートするようになりました。swap; googleフォントファイルの最後に＆display=swapパラメータを追加します。

ここにそれがどのように見えるか;

テーマ開発者であるか、WordPressでテーマファイルを編集する方法を知っている場合は、Googleフォントファイルに＆display=swapパラメーターを簡単に追加できます。

ただし、WordPressテーマファイルの編集に慣れていない場合でも、 Asset CleanUpなどのさまざまなプラグインを使用してこのパラメーターを追加し、「Webフォントの読み込み中にテキストが表示されたままになるようにする」問題を解決できます。

「アセットクリーンアップ」プラグインを使用してこの問題を解決する方法

GoogleFontsファイルにdisplay=swapパラメータを適用するには、無料で利用できるWordPressライブラリからAssetCleanUpプラグインをダウンロードしてインストールする必要があります。

プラグインをダウンロードしてアクティブ化したら、WordPress管理パネルの[アセットクリーンアップ]オプションをクリックし、[アセットクリーンアップ]の下の[設定]をクリックして最適化ページを開きます。

設定ページが表示されたら、[ GoogleFonts ]オプションをクリックします。 Google Fontsオプションをクリックすると、さらに設定が開き、さまざまな設定を簡単に管理してGoogleフォントファイルを最適化できます。

これらの設定の一部には、次のものが含まれます。

Googleフォントファイルの設定が完了したら、[フォント表示の適用：CSSプロパティ値]設定を[適用しない（デフォルト） ]から[スワップ（最もよく使用される） ]に変更すると、＆display=が追加されます。パラメータをすべてのGoogleフォントファイルに交換します。

テーマとプラグインフォントのソリューション

ほとんどの場合、WordPressテーマまたはプラグインは、font-awesomeフォントやiconフォントなどの他のフォントをロードしますが、GooglePageSpeedInsightでも同じ問題が発生します。

これも簡単な修正ですが、WordPressの編集に関する知識が少し必要です。 コードの編集に慣れていない場合は、プレミアムバージョンの「 AssetCleanUp Pro 」プラグインを使用して、 font-display：swap;を自動的に追加することもできます。 WordPressテーマまたはプラグインスタイルシートのCSSプロパティ。

Asset CleanUp Proを使用してこの問題を解決するには、WordPress管理パネルの[ Asset CleanUp ]オプションをクリックし、[AssetCleanup]の下の[設定]をクリックして最適化ページを開きます。

[アセットのクリーンアップ]> [設定]ページが表示されたら、[ローカルフォント]オプションをクリックして、ローカルフォントのカスタマイズ設定を開きます。

ブラウザで「ローカルフォント」のカスタマイズ設定を開いたら、「フォント表示：CSSプロパティ値の適用」の下にある選択オプションから「スワップ（最もよく使用される） 」を選択して、フォント表示：スワップを自動的に追加します。 すべてのスタイルシートで。

まとめ

このガイドでは、ページスピードインサイトの「ウェブフォントの読み込み中にテキストが表示されたままになる」または「非表示のテキストのフラッシュ」の問題を修正する方法を説明するために最善を尽くしました。

ページの読み込み時間とページ速度は、優れたユーザーエクスペリエンスを提供するための重要な要素であり、この問題を修正すると、はるかに優れたユーザーエクスペリエンスを提供できます。 また、ページ上にすべてのものが表示されていない限り、ページはロードされているとは見なされません。

そのため、ページがタイムアウトしないように、ページでのコンテンツの読み込み時間を短縮する必要があります。これにより、ユーザーは必要なバランス、速度、安定性を得ることができます。 ウェブサイトの速度が遅いという問題もある場合は、ウェブサイトの速度の最適化に関する投稿を確認して、正しく最適化することができます。