日本語の Web フォントがページを重くする理由

先に結論を言います。日本語の Web フォントが重くなるのは、ファイルが大きいからというより、細かく分かれた数十個のファイルが届くたびに、文字の配置を計算し直すからです。本文にも Web フォントを使うなら、太さごとに1つのファイルにまとめて自分のサイトから配ると、操作を受け付けにくい時間を大きく減らせます。

和文フォントは、細かく分かれて届く

日本語のフォントには、漢字だけで数千の文字が入っています。全部をまとめて送ると重すぎるので、Google Fonts などのサービスは、フォントを細かく分割して配っています。ブラウザは、ページで使っている文字を含む分割ファイルだけを読み込みます。

うまい仕組みですが、文章の多いページでは、使う文字が多いぶん分割ファイルの数も増えます。私が文章の多いページで確かめたところ、1ページで40〜50個のファイルが届いていました。

届くたびに、文字の配置をやり直す

問題は、ファイルの大きさよりも、その届き方です。

フォントが届くまでの間、ブラウザは端末のフォントで文章を表示しておき、届いたら差し替えます。差し替えのたびに、その文字が使われている部分の配置を計算し直します。40〜50個のファイルが少しずつ届くと、この計算が何十回もくり返されることになります。

そのあいだ、ブラウザはほかの操作を受け付けにくくなります。本文に Web フォントを使ったページで、私がスマートフォンを想定して計測したところ、その時間は次のとおりでした。¹Note 1手元の検証用の環境で、Chrome の開発者向けの機能を使い、CPU の速さを4分の1に落として、各ページを5回ずつ計測した中央値です。数字は「操作を受け付けにくい時間」の合計（Total Blocking Time）です。

トップページ（動きの多いページ）

約0.43秒

記事のページ

約0.50秒

サービス紹介のページ

約0.60秒

PageSpeed Insights では、この時間が 0.2秒（200ミリ秒）を超えると、評価が下がっていきます。

自分のサイトで確かめる方法

Chrome なら、次の手順で、自分のサイトに同じことが起きているかを確かめられます。

1. 開発者ツールを開くページの上で右クリックして「検証」を選びます。
2. フォントの数を見る「ネットワーク」の欄で「フォント」に絞り込み、ページを読み込み直します。和文フォントのファイルが何十個も並んでいたら、分割の配信です。
3. 重さを測るLighthouse（または PageSpeed Insights）で、Total Blocking Time を見ます。フォントを止めた状態と比べると、フォントの影響がわかります。

対策：1つのファイルにまとめて、自分のサイトから配る

対策の一つは、和文フォントを太さごとに1つのファイルにまとめ、自分のサイトから配信することです。私の検証では、Zen Kaku Gothic New でこの形を試しました。

私がファイルに入れたのは、英数字・記号・かな・JIS 第1水準の漢字（よく使われる約3,000字）と、サイトで使っているほかの文字です。検証では1つのファイルが約450KB、太さ2つで約900KB になりました。文字を絞ったファイルは、fontTools という道具の pyftsubset で作れます。

pyftsubset ZenKakuGothicNew-Regular.ttf --text-file=chars.txt \
  --flavor=woff2 --layout-features='palt,vpal,halt,kern,liga,calt,ccmp,locl,vert,vrt2' \
  --output-file=zen-kaku-gothic-new-400.woff2

chars.txt は、入れたい文字を並べただけのテキストです。--layout-features には、文字詰め（palt）や縦書き（vert）など、使う機能を残しておきます。

見た目は変わりません。届く和文フォントのファイルが2つになるので、文字の配置のやり直しも2回で済みます。同じページで比べた結果は次のとおりです。

トップページ（動きの多いページ）

約0.43秒 → 約0.25秒

記事のページ

約0.50秒 → 約0.09秒

サービス紹介のページ

約0.60秒 → 約0.12秒

文章の多いページほど、差が大きく出ました。トップページは、フォント以外の処理も多いため、差は小さめです。

本文に使う太さのファイルは、ページの読み込みの最初から取りに行くように指定（preload）しておいてください。また、Google のサーバーに接続しなくなるので、プライバシーポリシーで外部への送信として書く項目も1つ減ります。

引き換えにすること

• 最初の1ページ目の読み込みは重くなる。Google Fonts は、そのページで使う文字の分だけを少しずつ読み込む形です。自前の配信では、最初に約900KB をまとめて読み込み、2ページ目からはブラウザに残ったものを使います。
• まれな漢字は、端末のフォントで表示される。JIS 第1水準にない漢字は、そこだけ端末のゴシック体になります。
• フォントの更新は自分で行う。文字を足したいときは、ファイルを作り直します。

フォントの使用許諾も確かめてください。Google Fonts で配られているフォントの多くは SIL Open Font License で、文字を絞ったファイルを作って自分のサイトから配ることが認められています。ただし条件はフォントごとに違うので、使う前に必ず確かめて、許諾の文書はフォントのファイルと一緒に置いておいてください。

どんなサイトに向いているか

文章が多く、本文にも Web フォントを使っているサイトでは、効果が大きくなります。逆に、見出しだけに Web フォントを使い、本文は端末のフォントで表示しているサイトなら、分割の配信のままでも大きな問題にはなりません。

本文まで Web フォントにするかどうかは、デザインの判断です。端末のフォント（Mac や iPhone のヒラギノ、Android の Noto Sans など）も十分に美しく、速さの面ではいちばん有利です。どの書体で、どこまで統一したいか。そこから配信のしかたを決める。私はその順番で決めています。

速さの数字は、検索の評価だけでなく、スマートフォンで「もたつかない」という手ざわりにも直結します。デザインを変えずに速くできるところは、まだ残っていることが多いものです。

よくある質問

見出しだけ Web フォントにするのは、どうですか？

使う文字が少ないので、分割の配信のままでも軽く済みます。速さを優先するなら、いちばん手堅い選び方です。

font-display: swap は付けた方がいいですか？

付けておくと、フォントが届く前から文字を表示できます。ただ、差し替えのたびに配置の計算は起きるので、ファイルの数を減らすこととあわせて考えてください。

表示の速さの見直しは、ウェブサイト制作や運用・保守の中でお受けしています。