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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ICTリテラシー

無料レンタルサーバーとDokuWiki で作る自分用情報サイト

本サイトに パソコン内に自分専用の情報データベースをつくる というページがあります。詳細はリンク先を見て頂くとして、本ページではこれに関連して、「自分専用の情報サイトを作る」ためのオススメの方法につい …

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。

Amazon ページ右端のカート内商品リストを非表示にする方法

Amazon ページ右端のカート内商品リストを非表示にする方法について説明します。

Web

Chrome で SameSite=None に関する Cookieについての警告が表示される

Chrome で SameSite=None に関する Cookieについての警告が表示される理由について説明します。

Web

インターネット上の情報とテレビ・新聞の情報

「ワイドナ」ネタツイートを宮崎駿監督発言と紹介? (日刊スポーツ) – Yahoo!ニュース(https://headlines.yahoo.co.jp/hl?a=20170529-018 …