和文 Web フォントをやめて FCP 4.1 秒が 1.7 秒に。理由の半分は再現ページで確かめられませんでした

body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic Medium", "Yu Gothic", Meiryo, var(--font-dm-sans), system-ui, sans-serif;
}

import localFont from "next/font/local";
 
const dmSans = localFont({
  src: [
    { path: "../../fonts/dm-sans-latin-300-normal.woff2", weight: "300", style: "normal" },
    { path: "../../fonts/dm-sans-latin-400-normal.woff2", weight: "400", style: "normal" },
    { path: "../../fonts/dm-sans-latin-500-normal.woff2", weight: "500", style: "normal" },
  ],
  display: "swap",
  variable: "--font-dm-sans",
  adjustFontFallback: "Arial", // 代替書体との字幅差を詰めて、入れ替わりの揺れを小さくする
});
 
const dmMono = localFont({
  src: [{ path: "../../fonts/dm-mono-latin-400-normal.woff2", weight: "400", style: "normal" }],
  display: "swap",
  variable: "--font-dm-mono",
  adjustFontFallback: "Arial",
});

// server.js — node server.js で起動（localhost:8765）
const http = require('http');
const pad = '/*' + 'x'.repeat(120000) + '*/\nbody{font-family:sans-serif}'; // 約 120KB の CSS
const pages = {
  // スクリプトが head で <link rel=stylesheet> を挿入する
  '/inserted': `<!doctype html><html><head><meta charset=utf-8><script>
    var l=document.createElement('link');l.rel='stylesheet';l.href='/slow.css';document.head.appendChild(l);
  </script></head><body><h1>こんにちは</h1><p>本文です</p></body></html>`,
  // HTML に直接書いた <link>
  '/plain': `<!doctype html><html><head><meta charset=utf-8>
    <link rel=stylesheet href=/slow.css></head><body><h1>こんにちは</h1><p>本文です</p></body></html>`,
  // media=print で読み込み、onload で all に切り替える定番の回避策
  '/swap': `<!doctype html><html><head><meta charset=utf-8>
    <link rel=stylesheet href=/slow.css media=print onload="this.media='all'"></head>
    <body><h1>こんにちは</h1><p>本文です</p></body></html>`,
  // 外部 CSS なし（端末フォントだけ）
  '/none': `<!doctype html><html><head><meta charset=utf-8>
    <style>body{font-family:"Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif}</style></head>
    <body><h1>こんにちは</h1><p>本文です</p></body></html>`,
};
http.createServer((q, r) => {
  if (q.url === '/slow.css') { // 800ms 遅らせて返す
    setTimeout(() => { r.writeHead(200, {'content-type':'text/css'}); r.end(pad); }, 800);
    return;
  }
  const p = pages[q.url];
  if (p) { r.writeHead(200, {'content-type':'text/html; charset=utf-8'}); r.end(p); return; }
  r.writeHead(404); r.end();
}).listen(8765, () => console.log('up'));

// probe.js — NODE_PATH を通して node probe.js
const { chromium } = require('playwright');
(async () => {
  const b = await chromium.launch();
  for (const path of ['inserted', 'plain', 'swap', 'none']) {
    for (let i = 0; i < 3; i++) {            // 1 回では判断しない
      const ctx = await b.newContext();      // 毎回まっさらなキャッシュで
      const pg = await ctx.newPage();
      await pg.goto('http://localhost:8765/' + path, { waitUntil: 'load' });
      const r = await pg.evaluate(() => new Promise(res => {
        new PerformanceObserver(l => {
          const e = l.getEntriesByName('first-contentful-paint')[0];
          if (e) res({
            fcp: Math.round(e.startTime),
            rb: performance.getEntriesByType('resource').map(x => x.renderBlockingStatus).join(',')
          });
        }).observe({ type: 'paint', buffered: true });
        setTimeout(() => res({ fcp: -1 }), 4000); // 4 秒待っても出なければ -1
      }));
      console.log(path, i, JSON.stringify(r));
      await ctx.close();
    }
  }
  await b.close();
})();

# Google Fonts への参照が、実行時にもビルド時にも残っていないか
grep -rnE "fonts\.googleapis|fonts\.gstatic|next/font/google" src --include=*.tsx --include=*.ts --include=*.css