前回、ウェブフォントの表示方法で記事の題名に反してGoogle Fontsを使う場合をあまり考慮していなかったのでもう一度。
- ウェブフォントを読まない場合
- Google Fonts推奨の方法
- Google Fonts推奨の方法でCSSをPreloadで非同期読み込み
- サーバにウェブフォントを置いて普通にCSSで指定
- サーバにウェブフォントを置いてCSSで遅延指定で読み込み
- Google FontsのCSSを改変して遅延指定で読み込み
- Google FontsのCSSを改変して遅延指定で読み込み+CSSをPreloadで非同期読み込み
この7つの場合をPageSpeed Insightsで計測して比較してみた。
せっかくなのでそれぞれサンプルページを悪いインターネットに作った。
6,7番用に改変したCSSは以下2つ。
Noto Sans JP (ゴシック)
Noto Serif JP (明朝)
サンプルの目次ページにも書いたが結論として5番と6番が正解っぽい。
特にGoogle FontsのNoto系フォントを使うなら6番の方法はChromeでの文字入れ待ちが解消するので良さそう。
絶対NGなのは3番と7番、あまりオススメできないのは2番と4番。