使っていない日本語フォントを3.7MB先読みしていた

自分のサイトの表示速度を測っていて、変な数字が出ました。

お問い合わせページで、フォントファイルを124個読み込んでいる。合計3.7MB。フォームと文章しか無いページです。

数え間違いだと思いました。キャッシュを消して開き直して、もう一度数える。やっぱり124個。解析タグでもアイコンでもなく、全部フォントでした。

この感じ、知ってるんですよね。修理で預かった端末が、言われたとおりの症状をどうしても出してくれないとき。電源を入れ直して、同じ手順をもう一度踏んで、それでも同じ顔をしている。あの黙り込む時間と、深夜に124という数字を睨んでいた時間は、たぶん同じ種類のものです。

業種別の事例ページだけ、見出しに明朝体を使っていました。落ち着いた雰囲気を出したくて入れたものです。

端末の標準の明朝で済ませる案も考えたんですよ。ただ Mac と Windows と iPhone で出る顔がぜんぜん違う。見出しが端末任せでバラつくのは嫌でした。それで Web フォントを1本だけ足した。

候補は夜中に一人で、切り替えては戻し、切り替えては戻し。決めた理由は「これがいちばん静かに見えたから」で、正直それ以上の根拠はありません。この一行に30分くらい溶かしています。あとで3.7MBの請求書が届くとも知らずに。

Next.js のフォント機能は、既定でそのフォントを先読み（preload）する設定になっています。欧文フォントなら1〜2ファイルなので気になりません。

ところが日本語フォントは文字数が多いので、文字の範囲ごとに100本以上のファイルに分割されます。先読みの指示も、その分割ぶんだけ全部出る。しかも、そのフォントを1文字も使わないページにまで出ていました。

そのフォントの読み込み設定に preload: false を足すだけです。定義そのものは残るので、実際に画面へ出た文字ぶんだけブラウザが取りに行きます。

うちの場合は Shippori_Mincho({ ... }) の中に1語足して終わりでした。

そこへ辿り着くまでが、われながら遠回りでした。最初は解析タグを疑って外した。次に画像の読み込み方を見直した。どちらも数字は1ミリも動かない。関係のない場所を掃除していただけです。修理でも似たことをやります。バッテリーを疑って交換して、症状が変わらず、結局ケーブル1本だった、みたいな。

確認も難しくない。ネットワークタブを Font に絞ってリロードし、行数を見るだけ。両手で数えられる本数なら正常。スクロールしないと最後まで見えないなら、何かがおかしい。開発中の環境と本番で読み込むものは違うので、本番のURLでも一度やってください。

たった1語ですが、知らないと一生気づきません。エラーも警告も出ないからです。ページは正常に表示されるし、見た目も何も変わらない。ただ帯域だけが消えていく。

同じ調査で、サイト全体が指定したフォントで描画されていなかったことも分かりました。

フォントの変数を body に付けていたのに、CSS側は別の場所を見ていた。全部が端末の標準フォント任せです。しかも欧文フォントなので、日本語には最初から1文字も効いていない。

気づいた瞬間、手が止まりました。「読み込んでいるのに使っていない」の完成形です。3.7MB払って、何も得ていない。完全に私のミスで、自分では半年近く気づけませんでした。

半年ぶんの訪問者に、1文字も使っていないフォントを配っていたわけです。誰からも文句は来ません。重いサイトは、重いと言われる前に閉じられるだけなので。

店にいると、その「閉じられる側」を毎日見ます。年配のお客さんが、なかなか開かないページを前にして、黙ってホーム画面に指を戻す。怒っているわけじゃなくて、ただ諦めているんですよね。12年、割れた画面ごしにその手つきを見てきた人間が、自分のサイトで同じことをやらせていたかもしれない。これはけっこう効きました。

いまは見出し用の日本語フォントを1つだけ入れて、本文は端末のフォント任せ。もちろん preload は切ってあります。

速度は体感で分かるところから直すもの、だと思っていました。今回のは体感では絶対に気づけない類です。回線が速ければ一瞬で終わるし、2回目からはキャッシュに乗る。

ただ、初めて来た人は必ず1回目を踏みます。電波の細い場所で開く人もいる。速い回線の自分のMacだけ見て「問題なし」と言っていたのが、いちばん恥ずかしい。

気づけたのは、ページを開いたときのファイル数を数えたからでした。合計サイズではなくファイル数を見るのは、正直あまりやっていなかった。異常な数は、異常な設定の証拠です。

いま自分に課しているのは3つ。日本語フォントは先読みを切る。ページを足したらファイル数を数える。指定したフォントが画面へ本当に出ているか、実物で見る。どれも1分で終わります。時間がかかるのは、やると決めるところだけでした。

とはいえ、まだ怖い。フォントは数えました。でも画像もスクリプトも、同じ理屈で誰も見ていない場所に積み上がっているかもしれない。半年気づけなかった人間が「もう大丈夫です」と言っても、説得力はないですよね。今日の答えは「たぶん、まだある」です。

もし Next.js で日本語の Web フォントを使っているなら、閉じる前に一度だけやってみてください。ネットワークタブを Font に絞って、リロードして、行を数える。3個なら健康、124個なら私の仲間です（笑。変な数字が出たら、よかったら教えてください。「なんとなく重い気がする」くらいの段階でも、お問い合わせから気軽にどうぞ。

この手の話は開発ブログにまとめています。制作実績のほうは、転んだ記録ごと全部です。

フォントであれだけ出たので、画像も裏で同じことをやっている気がしてなりません。数え終わったら、また書きます。

124個。この数字は、しばらく忘れられそうにないです。