Interactive
Core Web Vitals計測アルゴリズム可視化
「なぜその数値になるのか」を、ブラウザ内部と同じ手順で追えます。CLSを計算するタブでは要素の大きさと移動量を動かしてimpact fraction × distance fractionを実計算し、 複数のシフトをセッションウィンドウでまとめる過程まで示します。INPの決まり方タブではinput delay + processing + presentationの内訳と、 インタラクション数に応じた外れ値の間引きを確認できます。
1回のシフトのスコア
和集合が75%＝impact 0.75、移動が25%＝distance 0.25、積は 0.1875。記事が示す数値そのもの。
破線=前 / 実線=後
impact fraction
0.7500
和集合 240,000 ÷ ビューポート 320,000
distance fraction
0.2500
移動 200px ÷ 大きい方の辺 800px
layout shift score
0.1875
単体なら Needs Improvementdistance fraction の分母はビューポートの大きい方の辺です （移動方向に対応する辺ではありません）。縦長画面では両者が一致するので差が出ませんが、横長にすると同じ移動量でも値が変わります——上のボタンで切り替えて確かめられます。
セッションウィンドウ（最大5秒・ギャップ1秒）
連続するシフトを1つのウィンドウにまとめ、合計が最大のウィンドウがページのCLSになります。 単純合計ではないので、長く滞在しても不利になりません。
ボタンを押すとhadRecentInputを切り替えられます。ユーザー操作の直後500ミリ秒以内のシフトは 「想定内の変化」としてCLSに数えません。
このページのCLS
0.200Needs Improvement
ウィンドウは3個。 最大は2番目（2.4s〜3.6s、3件で合計0.200）。 全シフトの単純合計は0.290で、これは採用されません。
しきい値はフィールド評価では全訪問の75パーセンタイルで判定します。 ここで示すのは1回分の計算なので、そのまま合否になるわけではありません。
ここが分かる
- 広く動いても、動く量が小さければスコアは伸びない——画面全体を覆う要素が8pxだけ動いてもスコアはごくわずか。impactだけの式から
× distanceへ改定された理由が、スライダーを動かすと数値で分かる。 - distance fractionの分母はビューポートの大きい方の辺——移動方向に対応する辺ではない。縦長画面では一致するので気づきにくいが、横長に切り替えると同じ移動量でも値が変わる。実際に切り替えて確かめられる。
- CLSは単純合計ではなく最大ウィンドウの合計——ギャップ1秒か開始から5秒でウィンドウが切り替わり、その中で合計が最大のものだけが採用される。長く滞在するページが不利にならない設計が、タイムライン上で見える。
- FIDが見ていたのは3区間のうち最初の1つだけ——重いハンドラや重い再描画はFIDに現れなかった。プリセットを切り替えると、同じ合計遅延でも内訳の偏り方がまったく違うことが分かる。
- INPは操作回数が50を超えると挙動が変わる——
floor(N/50)件の最悪値を捨てるため、N=49までは実質的な最大値、N=50でいちばん遅い1件が無視される。スライダーでNを動かすとINPが階段状に切り替わる。