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

【対策】フォント表示の 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点になるとかの時ぐらいしかやる必要性はないですが、気になる人はチャレンジしてみてください。

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