日本語WEB FONTは本当に遅いのか? Google、Adobe、モリサワの各WEB FONTで表示スピードを検証してみた

Pocket
LINEで送る

見出しなどFONTを凝りたい箇所を画像書き出しして配置していたのも昔の話し、今はデバイスフォントでも綺麗だし、WEBフォントでさらにFONTを選べるようになりました。
しかし、仕事でWEBサイトを構築しているときに「ページ読み込みが遅くなる」=「SEOに影響が」「ユーザーの離脱率が跳ね上がる」との懸念からWEB FONTの使用を避けることも何度かありました。

実際各社の日本語WEB FONTでどの程度読み込みスピードに影響が出るのか? 漠然とではなく、実際に検証してみます。

デモページを作成

デモページのテキストは宮沢賢治の「オッペルと象」です。文字数はざっと5700文字。岩手で育つと何かっちゃあ宮沢賢治を読まされるんです。

CSS等の読み込み、キャッシュの影響を避けるため、analytics.jsとWEB FONT使用時のjs以外の記述は無くし、font-sizeやmarginなどはstyleタグ、あるいはインラインで指定しています。

デバイスフォント

まずは、ただのデバイスフォントです。
これはこれで慣れて親しんだFONTなので見やすいですね。

デバイスフォントのデモページ

Google 日本語FONT

日本語WEB FONTの代表格、Googleさんです。ここのWEB FONTを見出しやMVなどポイントで使う使い方が一般的かと思います。

今回はさわらび明朝を使用してみました。明朝体とはいえ文字の太さを確保して視認性を高めています。ちょっと活版っぽいのも味がありますね。
(このデモページはIE対応済です。IE対応の仕方はこちらのページをご参照ください。

Google日本語フォントのデモページ

Google Fonts

思い出しました、WEB FONTといえばNotoもありました! どう扱いが違うのかちゃんと理解してないのですが、こちらは日本語FONTではなく普通のGoogle Fontsで選択できます。

フリーで使えてカチッとした明朝体を探していたので、Noto Serif JPで試してみます。

漢字が四角いけど、アルファベットや仮名は柔らかい雰囲気です。
(このデモページはIE対応済です。IE対応の仕方はこちらのページをご参照ください。

Google Fontsのデモページ

Adobe Web Font

Adobe CCを契約してるなら追加料金無しで使えます。

TB新聞明朝 Stdを使用してみました。他のFONTより体が大きい分、字間は詰まって見えます。

Adobeフォントのデモページ

モリサワWEBフォント

さくらインターネットで契約してるためモリサワが使えます(X Serverも同様のサービスがあります)。
リュウミンや新ゴなどDTPで馴染みのFONTが揃っています。

ナウ-GMを使用してみました。文字がはっきりとしてるし丁度良い丸みでなかなか見やすいですね。

モリサワフォントのデモページ

測定

ここでの測定結果は2019年8月の時点のものです。その後、WEB FONTを提供している各社がスピードを改善している可能性も無いとはいえません。

Chromeの機能拡張Lighthouseで表示スピードを測定していきます。
Time to Interactiveという項目を見ます。ページにアクセスしてから、ページを完全に読み込み、表示し終わるまでの時間のことです。

デフォルト Google日本語 Google Adobe モリサワ
1.1秒 1.8秒 2.0秒 2.8秒 2.3秒

デバイスフォント

Google 日本語FONT

Google Fonts

Adobe FONT

モリサワ FONT

体感ではAdobe FONTが、ひとまずページを読み込んで表示させてからFONTを反映させています。
Google FONTとモリサワはFONTが反映されるのとページが表示されるのがほぼ同時です(その分、ページ読み込み時の真っ白な状態がちょっとある)。

Adobe FONTはダイナミックサブセットというページ内で使用している文字を全部一文字ずつダウンロードしています。
今回のデモページのように使用文字の種類が多いと重くなってしまいますが、見出しだけとかワンポイントで使うといいかもしれません。

Google 日本語FONTは早期アクセス時はちょっと遅かったのですが、正式版になるにあたりFONTのデータを細分化し、分割ストリーミングの形で素早くダウンロードできるよう改善がされています。

じゃあ、見出しだけWEB FONTだと表示スピードは早くなるのか?

長くなるのでキャプチャは貼りませんが、先ほどは全部のテキストをWEB FONTに指定していたのをH1〜H5のみの指定に変更、本文はデバイスフォントのデモページを作成し、こちらで再度表示速度を測定してみます。

Google日本語フォントのデモページ
Google Fontsのデモページのデモページ
Adobeフォントのデモページ
モリサワフォントのデモページ
デフォルト Google日本語 Google Adobe モリサワ
1.1秒 1.9秒 1.8秒 2.3秒 1.7秒

Google 日本語FONTだけ遅くなりました。測定結果に若干揺らぎがある可能性もありますが、基本的に表示スピードが早くなるようです。

Pocket
LINEで送る

back to top