定義
「性能改善をしたが、本当に速くなったのか」を判断しようとしているのに、同じページを再読み込みするたびに数字が乱高下して、改善なのか偶然なのか区別がつかないとき、この概念を使う。一度の測定ではなく何度か測り直し、中央値で比較する方法だ。
Lab 性能測定のばらつき(実験室測定、つまり実ユーザーデータではなく自分の端末で直接測る測定で、値が毎回跳ねる度合い)は、同一ページ・同一コードでも開発サーバーの reload trace(再読み込みの性能記録)ごとに LCP・TTFB・CLS が大きく変わる現象だ。ここで LCP(Largest Contentful Paint、画面で最も大きな要素が描かれるまでにかかった時間)・TTFB(Time To First Byte、サーバー応答の最初のバイトが到着するまでにかかった時間)・CLS(Cumulative Layout Shift、画面が急にどれだけずれたかの累積スコア)は代表的なウェブ性能指標だ。比較プロトコルは、環境メタデータを固定し、単一の run ではなく N 回 reload の median(何度か再読み込みした値の中央値 — 平均と違い、跳ねる値に揺れにくい)で before/after を判断する手順だ。
なぜ必要か
next dev 系の環境は on-demand compile(要求が来たときにそのページをその都度コンパイル)、HMR(Hot Module Replacement、コードを保存すると再読み込みなしで変わった部分だけ差し替える開発機能)、source map、unoptimized bundle により TTFB と LCP が run ごとに跳ねる。一度の trace で「回帰」(性能が悪化)または「改善」を断定すると、環境 noise と実際の変更を取り違える。逆に、実際の回帰を outlier(他の値からかけ離れた跳ねた測定値)一度で見逃すこともある。リリース前には production build で同じプロトコルで再確認するのが良い。
動作原理
LCP はおおむね TTFB + load delay + load duration + render delay に分解される。dev で TTFB が 300ms↔1000ms で変われば、LCP 全体が比例して動く。CLS も、単一の run での遅い shift 一度がスコアを大きく上げうる。
記録するメタデータ: URL、認証状態、データシナリオ、dev vs start、git commit、throttle、測定ツール。
集計: 同一 Chrome セッションで reload trace 3 回 → median(LCP)、median(CLS)、median(TTFB)。median の 2× 以上の run は outlier として別途記録するが、headline には使わない。
環境間の比較: dev median と production median の絶対値の比較は無意味 — 各環境内の before/after delta だけを見る。
実務での適用
Lighthouse の Performance 0–100 と trace の LCP ms は異なる計測だ。A11y/SEO カテゴリのスコアで LCP を代替しない(lighthouse-measurement-accuracy)。
トレードオフ
| 選択 | 利得 | 費用 |
|---|---|---|
| dev 3× median | 速い iteration | abs ms は prod と異なる |
| prod only | 高い信頼度 | 測定・auth setup が遅い |
| single run | 最も速い | 誤判のリスクが大きい |
使ってはいけない場合
- すでに RUM(Real User Monitoring、実ユーザーのブラウザで収集した現場の性能データ)で十分な標本があり、lab は回帰スモークだけ必要な場合(プロトコルは単純化できる)。
- throttle・ネットワークプロファイルを変えながら単一 run だけを比較する場合。
よくある間違い
- dev 単一 run で PR の性能結論を出す。
- Lighthouse カテゴリ 100 点 = LCP 最適と解釈する。
- cold な最初の run だけを測定して baseline として保存する。
- dev median の数値を production SLA に直接マッピングする。
関連概念
- lighthouse-measurement-accuracy — スコア vs ms の混同を防ぐ
- largest-contentful-paint — LCP の構成・改善
- critical-rendering-path — TTFB・render パイプライン