PageSpeed Insightsのウェブフォント読込中のテキスト表示の改善方法

寝坊して今年の鉄剣マラソンに参加できなかったjyunzyです。
起きてすぐマラソン会場に行けるように、ランニングウェアを着て寝たのに爆睡していました。。。

さて、PageSpeed Insightsに「診断」という項目がありますが、その中に「ウェブフォント読み込み中のテキスト表示」というものがあります。

これはWebフォントを利用している場合、ページが初回表示されるときにフォントをダウンロードする必要があるため、その間は標準フォントなどで代替表示してね、というものです。

CSSの＠font-faceにて以下のようにfont-display:swap;を追加してやればこの問題をクリアする事ができます。

＠font-face { font-display: swap; }

スコアもいくらか上がります。まだの人は試してみて下さい。