【Webフォントの高速化】サブセット化で実現する方法

TanakaYuta SEO Div. コンサルタント

現在までに100社以上のSEO対策に従事し、様々なジャンル・キーワードで上位表示を実現。薬機法管理者の資格を有しているいること、SEOライターとして自身でもライティングができることから、広告表現が難しい医療・美容・健康を得意領域としている。「成分名」や「〇〇効果」などの難関キーワードでの上位表示実績多数。SNSでの情報発信にも力を入れており、約10,000名のフォロワーを獲得している。

執筆者の投稿をみる

Webで何らかの事業を行ったり、コンテンツを更新したりする際に使用することが多いWebフォントですが、フォントの中でも比較的重いことが特徴です。そのため、最適化されたWebフォントを使用しなければ、Webサイトやページスピードが遅くなるデメリットが生じます。

本記事では、Webフォントの概要や高速化のために知っておくべきこと、併せてサブセット化についてご説明します。また、日本語Webフォントのサブセット化方法に関してもご紹介しますので、高速化のためにもぜひ参考にしてください。

1 Webフォントとは？
2 Webフォント高速化のために知っておくべきこと
- 2.1 使用しない文字と書体を読み込まない
- 2.2 使わないWebフォントを把握する
3 サブセット化とは？
4 日本語Webフォントのサブセット化方法
5 まとめ：Webフォントの高速化を実現しましょう

Webフォントとは？

まず、Webフォントの概要についてご説明します。Webフォントとは、サーバー上に予め置かれているフォントや、インターネット上で提供されているフォントのことです。WebフォントはCSS3にて策定された技術になります。

一昔前のWebサイトでは、Webサイトを制作する段階で、予め要素ごとに使用するフォントを指定していました。しかし、予め指定する上記の方法では、Webサイトを閲覧しているユーザーのPC等にフォントがインストールされていなければなりませんでした。その結果、製作者が指定した見え方とは異なる結果で表示されてしまうこともあったのです。

したがって、これらの問題を解決できるのがWebフォントです。Webフォントでは、読み込みの段階でフォントデータをネットワークからダウンロードできるため、製作者の意図するフォントをユーザーに表示できます。

Webフォント高速化のために知っておくべきこと

ここまで、Webフォントの概要をご説明しました。ここでは、Webフォント高速化のために知っておくべき下記2つをご紹介します。

使用しない文字と書体を読み込まない
使わないWebフォントを把握する

それぞれ順番に見ていきましょう。

使用しない文字と書体を読み込まない

まずは、使用しない文字と書体を読み込まないことが大切です。たとえば、ページ内の特定の一部にしかWebフォントを使用しないとします。そこで、titleタグしかWebフォントを使用しないのに、ページ内のすべてでWebフォントが読み込まれる記述がされているなどの例が挙げられます。

この場合、当然ながらWebフォントはtitleタグのみで良いため、その他が読み込まれる分表示速度は遅くなります。これらを防ぐためにも、必ず使用しない文字と書体は読み込まない記述をするようにしましょう。

使わないWebフォントを把握する

次に、使用しないWebフォントを把握することも大切です。しかし、前提として使用しないWebフォントが分からない方も多いのではないでしょうか。たとえば、titleタグなど特定の一箇所にのみWebフォントを使用するのであれば、使用しないWebフォントを把握するのは容易かもしれません。しかし、リード文や本文など、至るところでWebフォントを使用するのであれば、使用しないWebフォントを把握するのは非常に困難です。

そこで有用なのが、日本語のWebフォントのそれぞれの特徴を把握することです。

JIS第1水準漢字
JIS第2水準漢字
ひらがな
カタカナ
全角英数字
半角英数字
記号

日本語Webフォントは上記の種類に分けられるため、それぞれの特徴を理解し、使用しないで済む文字列を特定することから始めましょう。特に、日本語Webフォントは漢字が非常に多いため、すべてを読み込むと高速化に悪影響が出ます。したがって、日本語Webフォントの種類を含め、使用しない漢字も特定できれば確実に高速化は実現できると言えます。