今回の実験

まずは適当な実験土台を用意しました。今回はフォントがテーマなので、何かしら文章を入れてみることにしました。
著作権を気にしなくてよいように、青空文庫から森鴎外の舞姫を借りることにします。

上図はフォントを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]