Font-Awesome 5を使うときのPageSpeed Insights「ウェブフォント読み込み中の全テキストの表示」対策
目次
Pagespeed Insightsでフォントの代替表示を求められた
ページ装飾のアクセントにアイコンフォントとしてFont-Awesome 5 のフォントをCDN経由で読み込んで使用しているのですが、Pagespeed Insightsでページの分析をした際、以下のような改善案が表示されました。
ウェブフォント読み込み中の全テキストの表示
フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。
この改善案に対して、どうのような対策を採ればいいのか調べたとことCSSに@font-faceの設定を加えればいいみたいなので、やってみたことをメモ。
３つのフォントファイルに対して対策が必要
Font-Awesome 5（Free）を以下のコードで読み込んでいるのですが、ページを表示する際に以下の3つのフォントファイルがFont-Awesome 5のスタイルシートから読み込まれます。その３つのフォントに対して代替表示の対策をしなければなりません。
Font-Awesome 5（Free）の読み込みコード
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"> |
上記のスタイルシートから読み込まれるフォントファイル
この３つに対して対策が必要。
- fa-brands-400.woff2
- fa-regular-400.woff2
- fa-solid-900.woff2
スタイルシートに@font-faceを追加して解決
ページのスタイルシートに以下のコードを追記することで解決できました。@font-faceに３つのフォントファイルを指定。
@font-face { font-family: 'Font Awesome 5 Brands'; font-style: normal; font-weight: 400; src: url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/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/[email protected]/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/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/[email protected]/webfonts/fa-brands-400.woff2" crossorigin><link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff2" crossorigin><link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff2" crossorigin> |
参考にしたページ
後日再発
解決したつもりが後日またPageSpeed Insightsで「ウェブフォント読み込み中の全テキストの表示」について警告が出ました。
all.cssを改造して読込
Font-Awesome 5 の all.css をCDNからの読み込みではなくローカルに置き、一部を以下のように変更しました。all.cssの最下位部分にあります。2パターンで試したところ、どちらでも警告が出ないようになりました。
パターン1
font-display: Auto;をswapに変更し、意味はわかりませんがlocal("@")を挿入し、urlはCDNのパスに変更してしています。
@font-face { font-family: 'Font Awesome 5 Brands'; font-style: normal; font-weight: normal; font-display: swap; src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.svg#fontawesome") format("svg"); } .fab { font-family: 'Font Awesome 5 Brands'; } @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.eot"); src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.svg#fontawesome") format("svg"); } .far { font-family: 'Font Awesome 5 Free'; font-weight: 400; } @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; font-display: swap; src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.svg#fontawesome") format("svg"); } |
パターン2
パターン1との違いはlocalのパスの部分です。
@font-face { font-family: 'Font Awesome 5 Brands'; font-style: normal; font-weight: normal; font-display: swap; src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-brands-400.woff2") , url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.svg#fontawesome") format("svg"); } .fab { font-family: 'Font Awesome 5 Brands'; } @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.eot"); src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-regular-400.woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.svg#fontawesome") format("svg"); } .far { font-family: 'Font Awesome 5 Free'; font-weight: 400; } @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; font-display: swap; src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-solid-900.woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.svg#fontawesome") format("svg"); } |