【PSI対策】“ウェブフォント読み込み中のテキストの表示”がFontAwesomeとSVGに出た。

ウェブフォント読み込み中のテキストの表示の対処法

PageSpeed Insightsで当サイトを診断した結果

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

多くのサイトで「Noto Sans」や「FontAwesome」といったWebフォントが使われていますが、これの読み込み手順の改善が今回の目的です。

ウェブフォント読み込み中のテキストの表示とは、インターネットからWebフォントをダウンロードして表示するまでの間に、とりあえず直ぐに表示できる代替フォントで文字を読める状態にして待ってもらおう！...という内容です。

代替フォントを使用しないサイトの場合は、Webフォントのダウンロードが完了するまで文字が表示されず、真っ白な画面のまま少し待つという状態が起こりえます。

この待ち時間がユーザービリティ的にも、サイトスピード的にも良くないのです。

対処法：CSSの「font-display:swap;」を使う

WebフォントのCSSにfont-display:swap;というプロパティを設定することで、以下のような流れでスムーズにWebフォントを読み込むことが出来ます。

以上の内容を文字にしたのが“ウェブフォント読み込み中のテキストの表示”ですね。

サイトをより早く閲覧可能な状態にするという点で、font-display:swap;の使用にはメリットがありますが、一方で代替フォント→Webフォントの切り替わり時には一瞬だけチラつきが発生することもあり、これはデメリットとも言えます。

チラつきの大小はサイト環境にもよるので、sawpを試してみてから考えましょう。

font-display:swap;の書き方

ウェブフォントの読み込み中にテキストを表示させるには、Webフォントに使うCSSの@font-face{}内にfont-display:swap;というプロパティを追記するだけでOKなので比較的簡単に解決できる内容です。

@font-face {
    font-family: 'FontAwesome';
    font-display: swap;
    src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') ～省略～ format('svg');
    font-weight: normal;
    font-style: normal
}

上記のコードの２行目がポイントです。対処はこれだけで終了です！
このように作業自体は簡単ですが、編集すべきCSSの場所はサイトによって異なるので、ある程度の知識がないと難しいかもしれませんが...。

ただ当サイトの場合はfont-display:swap;が反映されずに詰まりました...

font-display:swap;が効かない

当サイトを「PageSpeed Insights」で診断したところ、以下の２つのWebフォントの読み込み（速度）に改善の余地ありという判定でした。

当サイトはWordPressで運営しており、プラグインの「LiteSpeed Cache」を使って、CSSのキャッシュ作成時に自動でfont-display:swap;を付与しているのですが、上記の「.woff2」と「svg.ttf」にこれが効いていない様子です。

プラグイン「LiteSpeed Cache」の設定画面

プラグインの設定画面を見てもちゃんとswapを付与する感じになっています...。
念のため自動作成されたCSSキャッシュの中身も見てみます。

CSSには「font-display:swap」が入っているが効かない

圧縮されているので見にくいですが、@font-face{}の内にfont-display:swap;という記述が確認できました。う～んCSS内に「font-display:swap」はあるけどダメ...

font-display:swap;は後から上書きできない

なぜCSS内に「font-display:swap;」を書いているのに効かないのか...？

色々調べていた時に、ふと親テーマのCSS内にも「font-display:swap;」を書いてみたところ、あっさり効きました。どうやらCSSの「font-display:swap;」は先に書いた（読み込まれた）設定が優先され、後から上書き/変更することは出来ないようです。

WordPressの場合は親テーマの方が優先順位が高いようで、子テーマ内にあるCSSに「font-display:swap;」を書き込んでも多分効きません。

ということで、当サイトは子テーマ内の以下の場所にあるCSS内の@font-face{}内にfont-display:swap;を追記しました。

編集するCSSの場所はサイト構造（WordPressテーマ）によって異なりますが、基本はWebフォントが入っているフォルダ内のCSSでOKなはずです。

style.cssに「font-display:swap;」を追記

該当のCSSに「font-display:swap;」を追記したところ、Linterの文法チェックで

Unknown property 'font-display'：'font-display'なんてプロパティは無いよ！

と怒られたのですが、これで普通に効きました。警告が出た時は無視してOKです。

ウェブフォント読み込み中のテキストの表示に合格したか確認

「PageSpeed Insights」で“ウェブフォント読み込み中のテキストの表示”と怒られた該当のWebフォントに使用するCSSの@font-face{}の内にfont-display:swap;を追記したら、早速確認しましょう。

サーバーキャッシュをクリアした後、PSIでサイトを再検証してみます...

OKですね！
なお冒頭で触れたとおり、font-display:swapを画像やアニメーションで重たいサイトで使うと、文字の切り替わり時にチラつく可能性があるので確認しておきましょう！

当サイトの場合は、swapを使ってもフォントの切り替わり時に気になるレベルのチラつきは発生しなかったので、このまま行こうと思います。

Google Fontsには初めからswapが入っている

最後にGoogle Fontsについての補足です。

人気のWebフォントである「Noto Sans」などがあるGoogle Fontsですが、読み込みにCDNを使っているのであれば「font-display:swap;」は必要ありません。

CDNで読み込む場合は、初めからURLの後ろにdisplay=swapが付与されています。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

つまり、何もしなくても“ウェブフォント読み込み中のテキストの表示”が出来る状態になっています。

Webフォント読み込み用のURLの後ろにdisplay=swapがある

上の画像は実際に、Chromeのデベロッパーツールで「Noto Sans」の読み込み用URLを確認した時の様子です。このように初めからdisplay=swapが効いています。

Google Fontsは何もしなくてもPageSpeed Insightsで怒られないんですね・ｗ・

まとめ

以上、PageSpeed Insightsで“ウェブフォント読み込み中のテキストの表示”が出た時の対処方法でした。

記事中でも触れた通り、font-display:swap;を使うと代替フォントからWebフォントに切り替える時にチラつきが発生します。また、FontAwesomeではWebフォントがダウンロードされるまでアイコンが四角（□）になってしまったりもします...。

こんな問題があるのでWordPressの有名テーマでもswapは使っていないテーマが多いみたいです。こればっかりはトレードオフになるのでお好みで決めましょう。
文章が少ないサイトなら、Webフォントを使わないという選択肢もアリですね。

PSIによると、当サイトは130ms（0.13秒）ほどのスピードアップらしいです...
まぁ簡単な作業だったので良しとします...ではではこのへんで・ｗ・