本記事はプロモーションを含みます

対策法「ウェブフォント読み込み中のテキストの表示」PageSpeed Insights テーマLuxeritas

2021年2月5日2021年3月21日

1. 問題点
- 1.1. エラー内容詳細
2. 対策方法
3. 対策完了後の結果
4. 注意点
5. その他、編集後記

問題点

PageSpeed Insights の診断結果で「ウェブフォント読み込み中のテキストの表示」という警告が出る。パフォーマンススコアには直接影響はしませんとは記載があるが、可能であれば表示しないように対策したい。

エラー内容詳細

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

icomoon.woff

対策方法

対策概要

このエラーの発生は、エラー内容に記載されている通りとなりますので、CSSの「@font-face」の「format('svg’)」にWebフォントの読み込み中にユーザーがテキストを読めるようにすれば改善します。

対策方法 WordPressテーマLuxeritas編

Luxeritasの親テーマのCSSを直接いじるので、失敗するとページにつながらなくなります。（壊れた場合は、FTPでテーマのファイルを上書き等が必要になります。）

外観 > テーマエディター > Luxeritasを選択 > ルートにある「style.async.min.css」を選択

「style.async.min.css」は「@font-face」の設定に使われているみたいなので、その中の「format('svg’);」の後の「font-display: auto」を「font-display: swap」に変更すれば完成です。なお、「 swap 」と「 } 」の間に「 ; 」を入れますと正常に動作しませんので、注意が必要です。

対策方法 WordPressのその他のテーマ

基本的にはLuxeritasのテーマと同じです。外部CSSで「@font-face」の宣言をしているところを探して、「format('svg’);」の後に「font-display: swap」を足すだけです。

format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;

大体こんな感じで、「format('svg’);」の後には、「font-weight」や「font-style」があるので、そのあとにでも足しておけばいいです。Luxeritasテーマでも記載しましたが、最後の宣言だけ、文末の「 ; 」がいらないかもです。なお、理由はわかりません。

対策完了後の結果

PageSpeed Insights の診断結果で「ウェブフォント読み込み中のテキストの表示」という警告を無事に消すことができました。

注意点

親テーマのCSSを特設いじっているので、テーマのバージョンアップされると、再度対策を入れる必要があります。子テーマ側から「!important」で上書きでいじるのも可能だとは思いますが、親テーマの変更で不具合が出ていることに気づかない可能性があるので、子テーマからいじる場合は、注意が必要です。

また、この方法自体は、CSSで、Webフォントの読み込みが遅い場合にも使う方法となります。

その他、編集後記

この変更後、「キーリクエストのプリロード」が発生する可能性があります。どちらの方が速度早いかで、採用する方を決定すればいいかと思います。後の読み込みに回したものを優先的に読んでねって言われているので、どっちが良いかは、速度の結果次第かな・・・

<link rel="preload" href="https://kobewing.com/wp-content/themes/luxeritas/style.async.min.css" crossorigin>

今回の対策をやめて、代わりにヘッダーに上記のように今回いじったファイルをpreloadで先読みにした方が「キーリクエストのプリロード」になり、結果的にPageSpeed Insights の診断結果が上がるときがありそうです。この記事記載後の、このサイトは最終的には、この記事の内容の採用を辞め、ヘッダーにこのコードを入れる方が点数がよかったです。