今回の実験
まずは適当な実験土台を用意しました。今回はフォントがテーマなので、何かしら文章を入れてみることにしました。
著作権を気にしなくてよいように、青空文庫から森鴎外の舞姫を借りることにします。
上図はフォントをNoto Sans JPに変更した状態です。
この状態でDevToolsにて速度を測定してみることにします。
ハイライトで示している部分が、今回の検証箇所です。
-F62fjtqLzI2JPCgQBnw7HFYyQgM.otf
上記ファイルがNoto Sans JPのフォントであり、上図から本環境において1.8MBのフォントファイルが367msで読み込まれていることが分かります。読み込み毎にこの値は変化するため、ここで5回ほどロードを行い、その平均値を取ると、
518[ms]+374[ms]+443[ms]+417[ms]+505[ms])/5=451.4[ms]
の結果が得られました。
今度は、フォントを”Noto Serif JP”にしてみました。ちなみに、”Serif”とは飾りのことであり、明朝体などはこれに該当します。”Sans-serif”の”Sans”はフランス語で”without(無し)”の意味となり、飾りのないゴシック体などがこれに該当します。
先程と同様に、5回の平均値を取ってみることにします。
993, 607, 658, 803, 640
平均読み込み速度704.2[ms]の結果が得られました。やはり、Serif体は装飾が多い分ファイルサイズも大きくなり、2.5MB分のファイルが読み込まれています。また、このファイルサイズはページ内のコンテンツに関わらず一定となります。
ロード高速化のためにできること
Googleフォントファイルを、
- Google Fonts CDNからロードする
- サーバに一度ダウンロードして、そこからロードする
どちらが早いかは今回は検証を行いません。
日本語
M PLUS 1p
865KB, 275[ms]
M PLUS Rounded 1c
1.4MB, 285[ms]
Sawarabi Gothic
932KB, 408[ms]
Sawarabi Mincho
534KB, 287[ms]
Noto Sans JP
1.8MB, 667[ms]
Noto Serif JP
2.5MB, 618[ms]
簡体中国語(简体中文)
Noto Sans SC
6.9MB, 1.76[s]
Noto Serif SC
9.2MB, 2.48[s]
ZCOOL KuaiLe
1.5MB, 4.21[s]
ZCOOL QingKe HuangYou
2.4MB, 2.43[s]
ZCOOL XiaoWei
2.7MBm 0.823[ms]
繁体中国語(繁体中文)
Noto Sans TC
4.7MB, 2.32[s]
Noto Serif TC
4.8MB, 1.34[s]
韓国語
Nanum Gothic
625KB, 204[ms]
Noto Sans KR
259KB, 86[ms]
Nanum Myeongjo
710KB, 364[ms]
Gothic A1
240KB, 227[ms]
Nanum Gothic Coding
618KB, 280[ms]
Nanum Pen Script
357KB, 347[ms]
Do Hyeon
269KB, 228[ms]
Nanum Brush Script
759KB, 376[ms]
Noto Serif KR
629KB, 326[ms]
Sunflower
230KB, 244[ms]
Black Han Sans
266KB, 272[ms]
Song Myung
626KB, 340[ms]
East Sea Dokdo
696KB, 515[ms]
Jua
692KB, 361[ms]
Gaegu
699KB 357[ms]
Stylish
526KB 352[ms]
Black And White Picture
413KB 281[ms]
Kirang Haerang
2.0MB, 759[ms]
Gugi
318KB, 246[ms]
Poor Story
216KB, 201[ms]
Gamja Flower
594KB, 466[ms]
Hi Melody
571KB, 341[ms]
Cute Font
255KB, 189[ms]
Yeon Sung
951KB, 495[ms]
Dokdo
684KB, 377[ms]