PageSpeed Insights などで気になるウェブフォントの存在

画像よりも軽くて表現力豊かなページを作る上で Webフォントは欠かせないのですが、日本語は文字が多いため読み込みに時間が掛かります。

PageSpeed Insights を使用していると、ページの表示スピードは常に気になるものです。日本語フォントセットは文字数が多く重いだけに、外部フォントの読み込みは特に気になりますね。

また、PageSpeed Insights の診断結果の課題として、具体的に「ウェブフォント読み込み中のテキストの表示」と出ることがあったりします。
Google は、『表示されないテキスト＝検索エンジン最適化スパム』と疑い、検索結果順位にペナルティを科す可能性もあるため、この課題はできるだけ早く解決すべきです。

解決策についてですが、Google Fonts を使用している場合は簡単な解決策があります。
具体的には、”&display=swap” を読み込む CSS ファイルのパラメータに付記するだけです。

<link href=”https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap” rel=”stylesheet”>

Google Fonts 以外を使用している場合は、大きく二つあります。

• 外部フォントを読み込む <link> タグに、rel=”preload” を付与して、表示がはじまるよりも前に読み込んでしまいます。
• 外部フォントを読み込んでいる間に、一時的にシステムフォントを割り当ててテキストを表示させ、ウェブフォントが用意できたら差し替えるという CSS で調整を行います。（具体的な CSS は font-display: swap です。）

意図せずして、非表示文字でペナルティを受けたりしないよう、ウェブフォントを利用しましょう。