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

Sun, 03 Mar 2019 22:06:49 +0900

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/fontawesome-free@5.6.3/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/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**に対応していないブラウザがあります。

https://caniuse.com/#search=font-display https://caniuse.com/#search=font-display

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

対策ついでに以下のコードを～間に入れておくことでページを読み込む間（レンダリングが開始される前）に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>

参考にしたページ

https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/ https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/

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

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

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

後日再発

解決したつもりが後日また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: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/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/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/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: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/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: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot");
 src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-brands-400.woff2") , url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/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/fontawesome-free@5.11.2/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/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/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: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot");
   src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-solid-900.woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

@Font-Face on qwerty.work