ウェブフォント読み込み中のテキストの表示
警告: オリジンの URL の `font-display` の値を Lighthouse で確認できませんでした。
https://pagespeed.web.dev/ の分析結果で上記のような警告が表示されていました。この警告はフォント読み込めない最中の代替えフォントを指定することで解決できます（https://www.rectus.co.jp/archives/407を読むとなんとなく解決方法がわかります）。
ワードプレスのテーマでいくつかfontawesomeのフォント（font-awesome.min.css?ver=4.5.0）が利用されていました。
問題は以下２点。
- pagespeedで「ウェブフォント読み込み中のテキストの表示」の警告が出る
- 表示を確認したところfontawesome利用箇所のフォントが何も表示されていない😭
実際、どこでfontawesomeのフォントを利用しているのかを調べたところ5種類程度でした。
（「”fa 」で調べる（grep）と比較的簡単にわかります。）
- ページの先頭に戻るアイコン[fa fa-angle-up]
- カテゴリ [fa fa-folder-open-o]
- タグ [fa fa-tags]
- 更新日 [fa fa-clock-o]
- スマホ用のアコーディオンアイコン [fa fa-bars]
- その他SNSシェアボタン←これは削除しました
Googleのマテリアルフォントに変更しようかと検討しましたが、そもそも種類少ないのでUTF-8でいいんじゃない？
UTF-8の代替え文字（これに置き換えました）｛その他候補｝
- （🔝）｛⇪｝ページの先頭に戻るアイコン[fa fa-angle-up]
- （📂）｛📁｝カテゴリ [fa fa-folder-open-o]
- （🏷）タグ [fa fa-tags]
- （🕒）｛🕐🕑🕓｝更新日 [fa fa-clock-o]
- （☰）スマホ用のアコーディオンアイコン [fa fa-bars
まとめ：使っている種類が少ないならUTF-8置き換えが簡単です
pageinsigtの指摘に取り組むと、cssやwof（フォントデータ）のpreload対応やfont-display:swap対応などが必要になることがあります。
今回UTF-8に置き換えたことでこの辺りの警告は無くなりました☺️
コメント