Font-Awesome 5を使うときのPageSpeed Insights「ウェブフォント読み込み中の全テキストの表示」対策

目次

Pagespeed Insightsでフォントの代替表示を求められた

ページ装飾のアクセントにアイコンフォントとしてFont-Awesome 5 のフォントをCDN経由で読み込んで使用しているのですが、Pagespeed Insightsでページの分析をした際、以下のような改善案が表示されました。

ウェブフォント読み込み中の全テキストの表示
フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。

この改善案に対して、どうのような対策を採ればいいのか調べたとことCSSに@font-faceの設定を加えればいいみたいなので、やってみたことをメモ。

3つのフォントファイルに対して対策が必要

Font-Awesome 5(Free)を以下のコードで読み込んでいるのですが、ページを表示する際に以下の3つのフォントファイルがFont-Awesome 5のスタイルシートから読み込まれます。その3つのフォントに対して代替表示の対策をしなければなりません。

Font-Awesome 5(Free)の読み込みコード

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">

上記のスタイルシートから読み込まれるフォントファイル

この3つに対して対策が必要。

  • fa-brands-400.woff2
  • fa-regular-400.woff2
  • fa-solid-900.woff2

スタイルシートに@font-faceを追加して解決

ページのスタイルシートに以下のコードを追記することで解決できました。@font-faceに3つのフォントファイルを指定。

@font-face {
     font-family: 'Font Awesome 5 Brands';
     font-style: normal;
     font-weight: 400;
     src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2") format("woff2");
     font-display: swap;
 }

 @font-face {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-weight: 900;
     src:url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2") format("woff2");
     font-display: swap;
 }

診断に合格

スタイルシートに@font-faceを加えた後に、再度Pagespeed Insightsでページを分析したら無事合格しました。「診断」の欄から「合格した監査」の欄に移動していました。

@font-faceでFont-Awesome 5を指定するときはfont-weightに注意

FontAwesome5を使うときは必ず font-weight:400; または font-weight:900; を指定しないとうまくいきません。font-weight:normal;とか使うとダメです。

また、ブラウザによっては@font-faceに対応していないブラウザがあります。

ついでに「Preload」や「Prefetch」で高速化

対策ついでに以下のコードを<head>~</head>間に入れておくことでページを読み込む間(レンダリングが開始される前)にWEBフォントを事前に読み込んでおくことができます。多少の高速化が図れます。

Preloadだけでもいいのですが、Preloadは一部のブラウザが対応していないので、幅広く対応しているPrefetchと併用しています。

<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2" crossorigin>

参考にしたページ

[css]web制作者が知っておきたい、webフォントを快適に表示するcssの新しいプロパティ「font-display」 | コリス

https://coliss.com/articles/build-websites/operation/css/about-font-display.html

ウェブフォントの最適化  |  web fundamentals  |  google developers

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja

cssでwebフォントの読み込みが遅い問題を改善する方法 - qiita

https://qiita.com/oreo/items/2e82bfeb42e351557c3c

前へ

ブログの目次をアンカーリンク付きで自動作成して表示するJS「TOC.js」

次へ

2019年3月のWindows Update 月例ロールアップ (Windows10/8.1/7)