「ウェブフォント読み込み中のテキストの表示」とは？改善方法も解説【PageSpeed Insights】

Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「ウェブフォント読み込み中のテキストの表示」とはどういう意味か、また診断結果を改善する方法についても解説します。

　

「ウェブフォント読み込み中のテキストの表示」とは？

webサイトに表示されるフォントは、元々はユーザー側の端末にインプットされているフォントしか表示できませんでした。ウェブフォントとはサーバー側があらかじめ用意したフォントデータを、ユーザー側の端末が読み取り、web上に表示させる事ができる機能の事を指します。しかし、良い事ばかりではありません。英数字だけならデータも軽量なのですが、漢字・ひらがな・カタカナなどを含めると膨大なデータ量になります。読み取りの遅延などが起きた場合に、変わりのテキストを表示させたり、サブセット化するなどの対処法も必要です。ページローディングが遅れると、ユーザー体験を損ねてしまいます。

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

ウェブフォントの読み込みが起因するページローディング遅延の改善策は大きく三つあります。サブセット化、フォントの太さの調整などは比較的、容易な部類といわれていますので優先的に行いましょう。

サブセット化

ウェブフォントのサブセット化とは、必要のない文字データを間引くことを指します。例えば、漢字などは日常的に使うものと、そうでないものがありますので、「日常的につかうであろう漢字だけを残す」等です。必要のない文字を間引くことで、フォントデータの容量の軽量化を目指しましょう。軽量化に成功すれば、ユーザー側の読み込み速度をあげることが可能です。日本語では「カタカナ・ひらがな・第一水準漢字」あたりを残すのがベターだといわれていますが、管理者側のポリシーなどによって優先順位は変わりますのでご注意ください。自身のサイトに適した文字を残すようにしましょう。ネット上には様々な用途に向けた「サブセット化されたフォントデータ」が配布されているので、いくつか試してみることが肝心です。

フォントの太さを変更する

ウェブフォントは種類によって様々な文字の太さのパターンがあります。例えば、代表的なウェブフォントソフトウェアでは日本語だけでも7,8種類のパターンが用意されています。しかし、それらの文字データを全て自身が運営するサイトの中で使用する事は稀です。全てのフォントデータをユーザー側の端末に読み込ませてしまっては、ページローディングの遅延に繋がってしまいます。使用する文字の太さのデータだけを自サーバーに入力して、ユーザー側の端末に読み込ませるようにするのがベターです。

ローカルフォント設定を変える

CSS文法などの知識が必要になりますが、ユーザー側の端末に同じフォントデータが存在した場合は、そちらを優先的に読み込むように設定することが有効です。注意点としては「ユーザー側の端末にフォントデータが存在しなかった」時には、サーバー側から読み込むように設定する事を忘れないことです。忘れてしまえば、文字列がないサイトが表示される事態になりかねません。
サイトが改善されたかなどはpage speed insights等をつかって確認しましょう。