はじめの頃は「まぁ…いっかな？」なんて思っていた時期もありました。
「パフォーマンス スコアには直接影響しません。」と書いていた為、そんなに気にしてはいなかったのです。
しかしある時、「ウェブフォント読み込み中のテキストの表示」という診断とその症状に悩まされる事になるのです…
それはローディングアニメーションを作っていた時でした。
JSでローディング画面をフェードアウトさせるタイミングを調整するため、
ブラウザの再読み込みを何度か行っていると、Webフォントを使っているテキストが表示されずにローディングアニメーションが終わってしまうのです。
なんだこれ！？とても焦りました。
すぐにGoogle先生に助けを求め、Webフォントが読み込まれるまでにテキストを表示するという設定を行えば解決できると分かりました。
先生！いつもありがとうございます！
解決方法
とても簡単です。
CSSに1行追記するだけスピード解決です。
font-display: swap;
上記をCSSファイルでWebフォントを読み込ませている「@font-face」内に追記するのです。
追記例
@font-face {
font-family: 'フォント名';
src: ローカル・Webフォントパス指定;
font-display: swap;
}
再度「PageSpeed Insights」を使って確認すると解決できているかと思います。
Google Fonts の場合
こちらも簡単で、Google Fontsを読み込んでいるURLの末尾に「&display=swap」を追記するだけ。
追記例
<link href="https://fonts.googleapis.com/css?family=フォント名:400,700&display=swap" rel="stylesheet">
まとめ
さて、この方法でページ読み込み時にフォントが表示されない問題は解決できたのですが、ローディング中のテキストは一瞬システムフォントが表示されてしまいます。。
これは美しくない…
結局、ローディング画面に表示するテキストは画像にして対応することと相成りました。
ページ読み込み時に一瞬システムフォントが表示されてWebフォントに切り替わると「ガクッ！」とする現象（このブログがそうですね）があるので、これが気になる方はページ読み込み時にローディングアニメーションを入れたりすると良いですね。
最近はいろいろなWebフォントが使えるようになってとっても便利になりました。
Webフォントって良いですね。
コメント