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

ウェブフォント読み込み中のテキストの表示-fontawesome-svg_eyecatch

Googleが提供するサイト診断ツール「PageSpeed Insights」で“ウェブフォント読み込み中のテキストの表示”という指摘が出ていたので対処しました。

対処方法はCSSの@font-face{}内にfont-display:swap;というプロパティを設定すれば良いのですが、記述していても効かない感じで詰まりました...

結局@font-faceを別の場所に追記したところ無事に反映され、解決できました。

fontawesomeとsvgの読み込みで怒られ、これに対処した時の内容です。

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

ウェブフォント読み込み中のテキストの表示-fontawesome-svg_001

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

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

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

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

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

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

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

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

  1. サイトにアクセス
  2. とりあえず各端末(PC内)にあるフォントでサイトの文字を表示する
  3. Webフォントのダウンロードが終わり次第、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
}

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

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

スポンサーリンク

font-display:swap;が効かない

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

  • fontawesome-webfont.woff2
  • svg.ttf

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

ウェブフォント読み込み中のテキストの表示-fontawesome-svg_002

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

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

ウェブフォント読み込み中のテキストの表示-fontawesome-svg_003

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;」は先に書いた(読み込まれた)設定が優先され、後から上書き/変更することは出来ないようです。

参考

「font-display:swap;」に対して「!important;」を使っても上書き不可でした。

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

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

当サイトのCSS編集例
PageSpeed Insightsで指摘されたURL(ファイル)編集するCSSファイル名
https://~/fontawesome-webfont.woff2?v=4.7.0public_html/~/font-awesome.min.css
https://~/stsvg.ttf?poe1v2public_html/~/style.css

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

ウェブフォント読み込み中のテキストの表示-fontawesome-svg_004

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でサイトを再検証してみます...

ウェブフォント読み込み中のテキストの表示-fontawesome-svg_005

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">

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

ウェブフォント読み込み中のテキストの表示-fontawesome-svg_006

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

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

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



まとめ

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

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

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

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

-WordPress
-,

site-logo
ありがとうございました!
良かったらシェアしてネ・w・
当サイトはピンバックを受け付けます。
  • この記事を書いた人
ザキ

ザキ

X:@sologaku

プログラミングに興味があり情報系の大学を卒業。

新卒で社会人になるも数年で退職し今はフリーランスとして生きています。

少しでも誰かの役に立てれば...と思い、当サイトでIT関係のハウツーを発信しています。


ソロ学運営者:ザキの自己紹介

© 2020 sologaku