2019.10.08

PageSpeed Insights の『ウェブフォント読み込み中のテキストの表示』対策方法

いつもの様に、何かサイトにとって悪い所がないかをPageSpeed Insights で自分のサイトを診断した所、『ウェブフォント読み込み中のテキストの表示』にひっかかっていましたので修正を行いました。同じ悩みを抱えている方に修正に至るまでの過程をお伝えできれば幸いです。

1. 『ウェブフォント読み込み中のテキストの表示』って何がいけないの？
2. 『ウェブフォント読み込み中のテキストの表示』の改善方法
3. おまけ：ウェブフォントを使うときの事前読み込み

『ウェブフォント読み込み中のテキストの表示』って何がいけないの？

PageSpeed Insights上での警告

自分もよくは分かっていないんですが、PageSpeed Insights の警告文をすごく簡単に説明しますと、

ウェブフォントをダウンロードしてる時間、そのフォントを使っている場所のレンダリングが止まるから、変わりに何をそこに表示するかを設定しないとサイトの表示速度が遅くなるよ！

って事だと思います。間違っていたらすいません。

『ウェブフォント読み込み中のテキストの表示』の改善方法

@font-face と font-display を使って改善すればいいよって書いてあったので、それで改善してみました。

私は、FontAwesome5 と googleフォントの『poppins』 を使っていたので、以下の内容をcssに追加しました。

@font-face {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	src:url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.woff2") format("woff2");
	font-display: swap;
 }
@font-face {
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	src:url("https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.woff2") format("woff2");
	font-display: swap;
 }
@font-face {
	font-family: 'Poppins';
	font-display: swap;
	src: local('Poppins'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
}

src:url()の中に入れるURLは、PageSpeed Insightsで出てきたURLをぶち込んどきました。

PageSpeed Insightsの監査に合格

以上で、『ウェブフォント読み込み中のテキストの表示』の改善は終わりです。

おまけ：ウェブフォントを使うときの事前読み込み

ウェブフォントをcss内で使う時に、事前にウェブフォントを読み込んでおけば、サイト表示が早くなるらしいんで、下記の内容を <head>　～　</head> の中にぶちこんでおきましょう。
もちろん自分が使っているウェブフォントにURLは直して使ってください。

<link rel="preload prefetch" as="font" type="font/woff2" href="https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-regular-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="https://use.fontawesome.com/releases/v5.6.3/webfonts/fa-solid-900.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2" crossorigin>

お疲れ様でした！