Web

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

投稿日:2021年10月1日 更新日:

1. はじめに

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

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

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

この動作を観察します。

2. 実験環境

これを観察するために作成したのが、Google Fonts を使う(外部リンク利用) というWebページです。

Google Fonts を適用する部分には、以下の文章を記述しています。

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


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

「春と修羅(宮沢賢治)」より引用

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

3. Google Fonts の導入

Google Fonts を使う(外部リンク利用) ページに、Google Fonts を導入した手順は以下となります。

(1) Browse Fonts – Google Fonts にアクセスします。

(2) 今回は「RocknRoll One」というフォントを利用することとし、該当するフォントをクリックします。

(3) 同ページ上でスタイルを選択すると、利用方法が表示されます。

使い方が表示されます

この説明に従い、以下のタグをHTMLに記述します。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">

より高速化させるために、以下の追記しておきます(上の記述の3行目に追記しました)。

<link href="https://fonts.googleapis.com/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] パネルで、このページを解析しました。

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

パフォーマンス解析結果

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

  • <link rel=preload ...> を追記したおかげで、HTMLのパース処理より先に、https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap (これはCSSファイルです)へのリクエストが送信されています。
  • https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap には、120個の@font-face が定義されていたのですが、unicode-range 記述子で文字の範囲が指定されているので、実際に使用されている文字に合致した @font-face のフォントファイルしかリクエストしません。今回は25個のフォントファイルが合致したようです。その1つ1つのサイズは 20kB もないくらいです。
  • CSSファイルを取得したら、そのスタイルシートをパースして処理し、その後 画面のレイアウトを計算しています。このフェーズで、必要なフォントファイルを取得するために25回リクエストを送信しています。
  • その後、1回目のペイント処理(画面をレンダリングする)を行っています。
  • それと同時に各フォントファイルをダウンロードしながら、スタイルを再計算 → レウアウト計算 → ペイント処理(画面のレンダリング)を何度も繰り返しています。

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

[Network] パネルでフォントファイルのサイズを確認する

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

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

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

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

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

5. おわりに

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

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

6. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web Vitals

highlight.js が引き起こすレイアウト・シフトを防止する

highlight.js が引き起こすレイアウト・シフトを防止する方法を紹介します。

Web

ウェブ上の「名前を付けて画像を保存」ができない画像をダウンロードする方法

目次1. 「名前を付けて画像を保存」ができない画像2. この手の画像を保存する方法3. おわりに4. Chrome のデベロッパーツールを使った別の方法(追加:2021-08-04) 1. 「名前を付 …

DokuWiki

DokuWiki のプラグイン開発に関する情報

DokuWiki をなるべくスマートにカスタマイズしようとすると(設定変更以上のことをやりたい場合です)、テンプレートかプラグインを自作せざるを得ません。他の方法があまり用意されていないためです。 テ …

Web

モバイル ユーザビリティで問題が検出された?

モバイル ユーザビリティで問題が検出された?

Web Components

Web Components でスタイルシートを再利用する

Constructable Stylesheet Objects の使い方を説明します。