ユーザー体験の目標

Google の Web Vitals を取得して読み、理解した内容を自分の言葉で書いたもの。 本文の引用はしていない。

なぜあるのか

指標もツールも増えすぎて追いきれない、という問題への答えとして作られた。 Web の体験の質を表す指標を、統一された形で少数に絞るのが狙い。

可観測性の 「SLO はできるだけ少なく」と同じ発想。

Core Web Vitals(3つ)

指標測るもの良好の基準
LCP (Largest Contentful Paint)読み込みの体感2.5秒以内
INP (Interaction to Next Paint)操作への反応200ミリ秒以下
CLS (Cumulative Layout Shift)表示の安定性0.1以下

INP は FID を置き換えた指標。 2023年に実験的から保留状態へ格上げされ、2024年に正式な Core Web Vital になった。 FID を使っている資料は古い。

測り方

75パーセンタイルで測り、モバイルとデスクトップを分ける。

平均ではなく75パーセンタイルなのは、 可観測性で書いたのと同じ理由。 平均はテールを覆い隠す。

分けるのは、片方が良くてももう片方が悪ければ、その利用者にとっては悪いから。

フィールドとラボ

何を測るか限界
フィールド実際の利用者のデータ出してからでないと取れない
ラボ開発中、リリース前の測定INP は測れない。実際の操作が必要なため

両方いる。ラボだけだと現実の分布が分からず、フィールドだけだと出す前に気づけない。

補助的な指標

Core Web Vitals が悪いときに、原因を切り分けるために見る。

指標用途
TTFB (Time to First Byte)サーバー応答の遅れが LCP に効いているかを診断する
FCP (First Contentful Paint)レンダリングをブロックしている資源が LCP に効いているかを見る
TBT (Total Blocking Time)ラボ指標。INP の問題を検知する代理指標

TTFB が悪ければサーバー側、FCP と LCP の差が大きければフロント側、 という切り分けの入口になる。

このリポジトリでの位置づけ

性能を測るが資源の側から見るのに対して、こちらは利用者の側から見る

そして可観測性の枠組みで言えば、 Core Web Vitals はそのまま SLI になる。閾値を SLO として置ける。

スケールするリーダーにあった 「レイテンシを偶発的な副作用ではなく第一級のゴールとして扱う」を、 フロントエンドで具体化したものと読める。

関連