Google Fonts がフォントファイルを読み込む様子を観察する

記事
IT・テクノロジー

1. はじめに

Google Fonts を使った Webページを作成し、フォントファイルがどのように読み込まれるのか観察します。

Google Fonts は Web フォント です。外部のサーバーからフォントファイルをダウンロードして利用します。一般的に Webフォントは、フォントファイルを丸ごと全てダウンロード(しかも外部のサーバーから)するので、「 Webページの読み込み&表示 」が大幅に遅くなるものと見られています(日本語のフォントデータはかなりのサイズになります)。

しかし、Google Fonts の場合、なるべく必要最低限のフォントデータだけが、ダウンロードされるようになっているため、Webページの読み込みパフォーマンスにそこまでの影響を与えません。

この動作を観察します。

2. 実験環境

これを観察するために作成Webページでは、Google Fonts を適用する部分に、以下の文章を記述しています。

----- ここから -----
わたくしといふ現象は
仮定された有機交流電燈の
ひとつの青い照明です
(あらゆる透明な幽霊の複合体)
風景やみんなといつしよに
せはしくせはしく明滅しながら
いかにもたしかにともりつづける
因果交流電燈の
ひとつの青い照明です
(ひかりはたもち その電燈は失はれ)

これらは二十二箇月の
過去とかんずる方角から
紙と鉱質インクをつらね
(すべてわたくしと明滅し
 みんなが同時に感ずるもの)
ここまでたもちつゞけられた
かげとひかりのひとくさりづつ
そのとほりの心象スケツチです
「春と修羅(宮沢賢治)」より引用
----- ここまで -----

このページを、Chrome ブラウザのデベロッパーツール (DevTools) の [Performance] パネルで解析し、その結果を観察します。

3. Google Fonts の導入

実験ページに、Google Fonts を導入した手順は以下となります。

(1) Google Fonts のサイトにアクセスします。
(2) 今回は「RocknRoll One」というフォントを利用することとし、該当するフォントをクリックします。
(3) 同ページ上でスタイルを選択すると、利用方法が表示されます。
2021-09-30_001.min.png

この説明の中にある <link> の内容を、HTMLに記述します。
より高速化させるために、以下を追記しておきます。

----- ここから -----
<link href="{ココナラブログの制約によりドメインを省略}/css2?family=RocknRoll+One&display=swap" rel="preload" as="style">
----- ここまで -----

また、先程の画面最下部にある「Download all」ボタンを押すと、このフォントのファイルをダウンロードすることができます。ちなみにダウンロードしてみると、RocknRollOne-Regular.ttf というフォントファイル入っていました。サイズは 5MB くらいです。

(4) Google Fonts を利用するための CSS を記述します。

----- ここから -----
.g-font {
  font-family: 'RocknRoll One', sans-serif;
}
----- ここまで -----

(5) この .g-font というクラスを、2 で説明した「Google Fonts を適用させる文章」の要素に指定します。

以上です。

4. 解析した結果を観察する

Chrome DevTools の [Performance] パネルで、このページを解析しました。

その結果が以下です(いろいろ書き加えています)。

2021-09-30_002d.min.png
拡大する場合は、右クリックして別タブで開いてください

主なポイントを箇条書きにします。

・ <link rel=preload ...>を追記したおかげで、HTMLのパース処理より先に、{}/css2?family=RocknRoll+One&display=swap (これはCSSファイルです)へのリクエストが送信されています。

・{}/css2?family=RocknRoll+One&display=swap には、120個の font-face が定義されていたのですが、unicode-range 記述子で文字の範囲が指定されているので、実際に使用されている文字に合致した font-face のフォントファイルしかリクエストしません。今回は25個のフォントファイルが合致したようです。その1つ1つのサイズは 20kB もないくらいです。

・CSSファイルを取得したら、そのスタイルシートをパースして処理し、その後 画面のレイアウトを計算しています。このフェーズで、必要なフォントファイルを取得するために25回リクエストを送信しています。

・その後、1回目のペイント処理(画面をレンダリングする)を行っています。

・それと同時に各フォントファイルをダウンロードしながら、スタイルを再計算 → レウアウト計算 → ペイント処理(画面のレンダリング)を何度も繰り返しています。

次に、[Network] パネルを使ってフォントファイルのサイズを調べました。

2021-09-30_004a.min.png

画面上部の「Font」の部分を選択することにより、フォントファイルだけを表示させています。

このとき、画面下部にファイルの合計サイズが表示されます。

transferred が「圧縮されたサイズ」で resources が「圧縮されていないサイズ」なのですが、今回のフォントファイルの場合圧縮はされていないようで、そのせいか「圧縮されたサイズ」の方が大きくなっています。とはいえ、大きな違いはないのでだいたいのサイズを掴むには困りません。ということで、だいたい 430kB くらいであることが分かりました。

120個の font-faceに記述された全てのフォントファイルを調べたわけではないので、フォントファイル全ての合計サイズは分からないのですが、今回のように 430kB くらいで済むのであれば実用的なレベルではないでしょうか。

また、フォントファイルの通信で使われている(Google のサーバーとの通信)HTTPのプロトコルは h3-Q050 という新しいバージョンが使用されているので、複数のフォントファイルのダウンロードであっても高速な処理が期待できます。

5. おわりに

Google Fonts は Webフォントとしては、読み込み負荷がかなり小さいですので、検討の価値ありだと思います。

ただそれでも、他に大きなファイルを使用しているなどの理由で、Webページの読み込み&表示を少しでも改善したい場合は、font-face を定義するCSSと、分割されたフォントファイルを Webサイトと同じWebサーバーに配置してみましょう。それでもダメなら、Google Fonts の使用は諦めた方がよいでしょう。

ラボラジアンでは、Webに関するサービスを出品しております。こちらもよろしくお願い致します。

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す