Cloudflare Web Analytics の LCP がひどかったので Google Fonts をやめた
このブログの Cloudflare Web Analytics を眺めていたら、LCP（Largest Contentful Paint）の評価がなかなかひどいことになっていた。
体感では全然遅くないんだけどなぁ、と思いつつ、Claude さんに原因を調べてもらった。
結論：Google Fonts
Claude さん、さすがに早い。表題の通りの結論でした。
どうやら、デザインで使っていた、M+PLUS+Rounded+1c という日本語の丸ゴシックフォントが犯人。
グリフ数が数万文字規模になるので、ファイルサイズが英字フォントとは桁違いに重いとのこと。
詳しく説明してもらいました。
Hugo の設定を見たら、こういう記述があった。
googleFontsLink = "https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap"しかも外部 CDN（fonts.googleapis.com）へのリクエストが発生するので：
- DNS 解決
- TCP 接続
- TLS ハンドシェイク
- フォント CSS の取得
- 実際のフォントファイルの取得
という連鎖が初回訪問のクリティカルパスに入ってくる。LCP がテキスト要素（見出し）だったとすれば、フォントが読み込まれるまでレンダリングがブロックされる。
体感と計測がズレる理由
キャッシュだよ、キャッシュ。
Claude さんに言われて気づいたわ。
自分のブラウザに既にあるんだもん、そりゃ速いはずだよ。
Cloudflare Web Analytics は実際の訪問者のブラウザで計測した RUM（Real User Monitoring）データを集めている。
訪問者のほとんどは初回訪問でキャッシュなし。
見た人は、「おっそ！」って思ってたことでしょう。
ほんとすみません。
システムフォントに切り替えた
ということで、Google Fonts をやめてシステムフォントに切り替えました。「丸みがあれば何でもいい」という半ば投げやりな姿勢で選んでもらった。
"Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "BIZ UDPGothic", "Noto Sans JP", sans-serif
| OS | 使われるフォント |
|---|---|
| macOS / iOS | ヒラギノ丸ゴ ProN（丸みは M PLUS とほぼ同等） |
| Windows 10/11 | BIZ UDPGothic（UD 系、やや丸み） |
| Android / Linux | Noto Sans JP |
コードブロックの JetBrains Mono も同様にシステムフォントへ：
ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace
変更は hugo.toml から googleFontsLink を削除して、custom.css の CSS 変数を書き換えるだけ。外部へのフォントリクエストがゼロになった。めでたしめでたし。
重ね重ね申し訳ございませんでした…
監視は大切
先日 Lighthouse の対応して一安心だったんだけど、今回の Cloudflare の Web Analytics はびっくりした。監視できるところがあるって良いですね。Cloudflare にしといてよかった。