WordPressテーマSANGOの質問

pagespeed insightsでの問題点の解消について

アバター
マツモト

Googleの提供しているpagespeed insightsにて分析をした結果
sangoデフォルトの設定で
「ウェブフォント読み込み中のテキストの表示」と問題点改善を指摘されてしまいます。

指摘されているURLは以下2点です。
https://use.fontawesome.com/releases/v5.7.2/webfonts/fa-solid-900.woff2
https://use.fontawesome.com/releases/v5.7.2/webfonts/fa-brands-400.woff2

自分なりに色々と調べてやっているのですが、改善されません。

以下が私なりに調べて子テーマのスタイルシートに記入したものです。
何か問題がありますでしょうか?

/*ウェブフォントの読み込み中テキスト*/
@font-face {
font-family: ‘Font Awesome 5 Brands’;
font-style: normal;
font-weight: 400;
src: url(“https://use.fontawesome.com/releases/v5.7.2/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://use.fontawesome.com/releases/v5.7.2/webfonts/fa-solid-900.woff2”) format(“woff2”);
font-display: swap;
}
/*END ウェブフォントの読み込み中テキスト*/

よろしくお願い致します。

SANGOで使用するWebフォント(Google Fonts)を変える方法
コメントへの回答
サルワカくん
サルワカくん
2019/09/28

前提として、SANGOではFontAwesomeをWebフォントとして読み込んでいます。フォントとして1つ1つのアイコンを読み込んでいるというわけです。Page Speed Insightsでは、「あいうえお」のような文字列を表現するWebフォントと、アイコンを表示するWebフォントを同じものとしてとらえているようです。

Page Speed Insigthsの指摘はおそらく以下のようなものだと思います。

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

例えば「あいうえお」と書かれている部分にWebフォントが使われている場合、設定次第ではWebフォントが読み込まれるまで「あいうえお」が表示されません(空白になります)。

そこで、「Webフォントを読み込む間は、ローカル(ユーザーの端末)に含まれるフォントでとりあえず「あいうえお」を表示しておいて、読み込みが完了したら表示するフォントを入れ替えてね」ということをPagespeed Insightsは指摘しているというわけです。

で、今回指摘されているWebフォントはアイコンです。「あいうえお」ではありません。アイコンなので、別のフォントで一旦表示しておく、ということはできません。

「アイコンの読み込みが完了するまでの間、ユーザーの端末にある別のフォントを表示しておいてね」という無茶を言われているわけです。

Pagespeed Insightsの指摘を解消するための対策はできるかもしれませんが、それはユーザーにとっては全く価値のないことです。

Pagespeed Insightsで指摘されている部分を必ずしもすべて修正する必要はないと思います。