お問い合わせはコチラから

【対策】フォント表示の CSS 機能を使用して、Webフォントの読み込み中にユーザーがテキストを読めるようにしてください。

サイト運営

Page Speed Insight(以下PSI)の『ウェブフォント読み込み中のテキストの表示という項目 』 で、『フォント表示の CSS 機能を使用して、Web フォントの読み込み中にユーザーがテキストを読めるようにしてください。 』 というアドバイス?が出る人は多いと思います。

点数には影響しませんと書かれているので無視しても良いのですが、点数が少しでもよくなるかも?と思って気になる人は多いと思います。ところがこいつが相当な曲者で、親テーマ起因の場合は消すのは一苦労です。

この記事では、TCDテーマを例にとって、 『フォント表示の CSS 機能を使用して、Web フォントの読み込み中にユーザーがテキストを読めるようにしてください。 』 を解消する方法を説明します。

『ウェブフォント読み込み中のテキストの表示という項目 』 はテーマのどの部分が影響しているのか?

『フォント表示の CSS 機能を使用して、Web フォントの読み込み中にユーザーがテキストを読めるようにしてください。 』 という警告は、多くの場合、webフォントやサーバーのローカルフォントをCSSの中で@font-faceで定義する際に、font-display:swapの指定がないために出ます。

対策は、 @font-faceで定義する際に、font-display:swap を追加すればよい

自分で追加していないものであれば、親テーマやプラグインのCSSファイルの内部で定義されているはずです。

TCDテーマだと確実に『ウェブフォント読み込み中のテキストの表示という項目 』が出ます。

TCDテーマでは、design_plus.woff?v=1.3とか design_plus.woff?v=1.2とかで、ほぼ確実に『ウェブフォント読み込み中のテキストの表示という項目 』に引っ掛かります。

今回、この警告を消すのにかなり悩みました。結果的に警告を消すことに成功しました。

TCDテーマのどこに@font-faceがある?

なぜか、複数のcssファイルの中に@font-faceが定義されています。

誰でも気が付く一番簡単な場所は、親テーマのstyle.cssの先頭にあります。

他には、使用したテーマでは次のような小さなCSSファイルの中にも@font-faceの定義がありました。

  • admin/css/my_admin.css
  • css/design-plus.css
  • css/footer-bar.css
  • css/sns-botton.css

これらのファイルのどの部分が警告の対象になっているというのではなく、すべてが対象になっていると考える方がよいです。

いくつも定義してあるのに加えて、バージョンのクエリが違ったり(v1.3とv1.2とか)しているので、同名フォントなのに、クエリのちがいで別扱いになるなど、厄介な定義になっています。

対策は、font-display:swapを追加!というけど?

ネットで検索すると、 『ウェブフォント読み込み中のテキストの表示という項目 』 の対策は、@font-faceに、font-display:swap;を追加せよ、です。

しかし、親テーマに追加するのはイヤだとすると、子テーマで追加することを考えるのが自然な流れになりますが、実はまともな子テーマ実装の場合は追加しても99%有効になりません。

この時点で、ネットで検索して出てきた対策がなんで効かないのか?と路頭に迷うことになります。

理由は意外なところにあります。

@font-faceは上書きできないのです。

@font-faceが上書きできないならどうすればよいか?

@font-faceを上書きしたい箇所が親テーマだとすると、子テーマで @font-faceを追加しても、親テーマを読み込んだ後なので、上書きできないのは当然です。

そうなると、対策は2つ考えられます。

@font-faceが上書きできない時の対策
  1. 親テーマの@font-faceに直接font-display:swapを追加
  2. Autoptimzeを使って親テーマのCSSを書き換える

親テーマの@font-faceに直接font-display:swapを追加

親テーマのファイルを検索して、@font-faceを定義している箇所を探して、直接書き足していきます。

別々のファイルに同じような定義が何か所かあっても、すべて修正する必要がありますので、探すのが結構大変です。

また、この方法の大きなデメリットとして親テーマの更新があると修正が消えます。

Autoptimzeを使って親テーマのCSSを書き換える

この方法は、修正量が少ないのでおススメです。

具体的には、autoptimizeを使ってCSSをまとめる際にautoptimize_css_after_minifyというfilter_hookを使って、font-displayを置き換えます。

autoptimizeをインストールしていないと使えない方法ですが、PSIの点数を気にしている時点でAOは使っていると思いますので、この方法が使える人は多いと思います。

Autoptimzeを使って親テーマのCSSを書き換えるコード
function optm_css($code)
    {
            // Add font-display:swap to each css property
        return    $code =  str_replace('@font-face{','@font-face{font-display:swap;', $code);
    }
    ;

add_filter('autoptimize_css_after_minify', 'optm_css');
autoptimize_css_after_minify filter hookの定義
            // Filter results.
            $tmp_code = apply_filters( 'autoptimize_css_after_minify', $code );
            if ( ! empty( $tmp_code ) ) {
                $code = $tmp_code;
                unset( $tmp_code );
            }

preloadも追加した方がサイトの表示速くなる

<link rel="preload prefetch" as="font" type="font/woff" href="https://URL/wp-content/themes/xxxxx/design_plus.woff?v=1.3" crossorigin>

まとめ

この件は、ずーっと警告が消えなくて悩みの種だったのですが、ようやく解決方法が見つかってスッキリしました。

ポイントは、@font-faceは上書きできないことと、親テーマの複数のファイルに@font-faceが多重で定義されていたことでした。

この2点がクリアになった時に、直接親テーマを書き換えるか、なんらかのフックで書き換える必要があるだろうと思いました。幸い、AutoptimizeですべてのCSSをマージしていればfont-face部分を一括で変更することができます。

PSIの点数は少ししか上がらないので、88点が90点になるとかの時ぐらいしかやる必要性はないですが、気になる人はチャレンジしてみてください。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました