https://daitai.dev/tags/cloudflare/Recent content in Cloudflare on 大体動かないHugojaMon, 13 Apr 2026 02:33:01 +0900https://daitai.dev/posts/lcp-result/Mon, 13 Apr 2026 02:33:01 +0900https://daitai.dev/posts/lcp-result/<blockquote> <p><strong>TL;DR</strong> — Google Fonts をシステムフォントに切り替えた結果、Cloudflare の LCP が「100% Good」になり、ページ読み込み時間が 56% 削減（514ms）された。</p> </blockquote> <p>やったね！</p> <p><img src="https://daitai.dev/posts/lcp-result/image.png" alt="Cloudflare Web Analytics。LCP が 100% Good、ページ読み込み時間 514ms（-56.88%）"></p> <p><a href="https://daitai.dev/posts/google-fonts-lcp/">先日 Google Fonts をやめてシステムフォントに切り替えた</a>記事を出してから今日早速確認してみたところ、大幅に改善されてた。いやほんと申し訳ない。海よりも深く反省しています。</p> <p><strong>LCP：100% Good。</strong> ページ読み込み時間は 514ms で、改善前から 56% 削減。</p> <p>このブログ、frontend-design スキルにすべて任せて既存テンプレートのデザインを改修してもらったんだけど、こういう重くなる要素に考えが至らなかった。</p> <p>事象を確認してはじめて自分の失態に気づく、という結果だったので、改めて監視って大事だなと思いました(小並)。</p>https://daitai.dev/posts/google-fonts-lcp/Sat, 11 Apr 2026 22:40:21 +0900https://daitai.dev/posts/google-fonts-lcp/<blockquote> <p><strong>TL;DR</strong> — 日本語 Google Fonts（M PLUS Rounded 1c）は初回訪問者の LCP を大幅に悪化させる。システムフォントに切り替えれば外部フォントリクエストがゼロになる。</p> </blockquote> <p>このブログの Cloudflare Web Analytics を眺めていたら、LCP（Largest Contentful Paint）の評価がなかなかひどいことになっていた。</p> <p><img src="https://daitai.dev/posts/google-fonts-lcp/cloudflare-webanalytics-lcp.png" alt="Cloudflare Web Analytics の Core Web Vitals。LCP が Good 0%、Needs Improvement 50%、Poor 50%"></p> <p>体感では全然遅くないんだけどなぁ、と思いつつ、Claude さんに原因を調べてもらった。</p> <h2 id="結論google-fonts">結論：Google Fonts</h2> <p>Claude さん、さすがに早い。表題の通りの結論でした。</p> <p>どうやら、デザインで使っていた、<code>M+PLUS+Rounded+1c</code> という日本語の丸ゴシックフォントが犯人。</p> <p>グリフ数が数万文字規模になるので、ファイルサイズが英字フォントとは桁違いに重いとのこと。</p> <p>詳しく説明してもらいました。</p> <blockquote> <p>Hugo の設定を見たら、こういう記述があった。</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">googleFontsLink</span> <span class="p">=</span> <span class="s2">&#34;https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;700&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap&#34;</span> </span></span></code></pre></div><p>しかも外部 CDN（fonts.googleapis.com）へのリクエストが発生するので：</p> <ol> <li>DNS 解決</li> <li>TCP 接続</li> <li>TLS ハンドシェイク</li> <li>フォント CSS の取得</li> <li>実際のフォントファイルの取得</li> </ol> <p>という連鎖が初回訪問のクリティカルパスに入ってくる。LCP がテキスト要素（見出し）だったとすれば、フォントが読み込まれるまでレンダリングがブロックされる。</p> </blockquote> <h2 id="体感と計測がズレる理由">体感と計測がズレる理由</h2> <p>キャッシュだよ、キャッシュ。</p> <p>Claude さんに言われて気づいたわ。</p> <p>自分のブラウザに既にあるんだもん、そりゃ速いはずだよ。</p> <p>Cloudflare Web Analytics は実際の訪問者のブラウザで計測した RUM（Real User Monitoring）データを集めている。</p> <p>訪問者のほとんどは初回訪問でキャッシュなし。</p>