ウェブでの応答性の測定計画に関する最新情報。
今年の初め、Chrome Speed Metrics Team は、応答性に関する新しい指標について検討していたいくつかのアイデアを公開しました。Google では、個々のイベントのエンドツーエンドのレイテンシをより正確に把握し、ページ全体の応答性をより包括的に把握できる指標を設計したいと考えています。
Google はこの数か月でこの指標に多くの進歩を遂げてきました。そこで、インタラクション レイテンシの測定方法に関する最新情報と、ウェブページの全体的な応答性を定量化するために検討している特定の集計オプションをいくつか紹介します。
ページの全体的な入力応答性に最も適したオプションについて、デベロッパーやサイト所有者の皆様からのフィードバックをお待ちしています。
インタラクション レイテンシを測定する
復習として、First Input Delay(FID)指標は入力レイテンシの遅延部分をキャプチャします。つまり、ユーザーがページで操作を行ってから、イベント ハンドラを実行できるまでの時間です。
この新しい指標では、最初のユーザー入力から、すべてのイベント ハンドラが実行された後、次のフレームがペイントされるまでのイベント期間全体をキャプチャするように拡張する予定です。
個別のイベントではなくインタラクションも測定する予定です。インタラクションとは、同じ論理的なユーザー操作(pointerdown
、click
、pointerup
など)の一部としてディスパッチされるイベントのグループのことです。
個々のイベント継続時間のグループから合計インタラクション レイテンシを測定するには、次の 2 つの方法を検討しています。
- 最大イベント時間: インタラクション レイテンシは、インタラクション グループの任意のイベントからの単一イベントの最大継続時間と等しくなります。
- 合計イベント継続時間: インタラクション レイテンシは、重複を無視して、すべてのイベント継続時間の合計です。
下の図は、keydown
イベントと keyup
イベントで構成されるキー操作の例を示しています。この例では、これら 2 つのイベントの間に期間が重複しています。キー押下操作のレイテンシを測定するには、max(keydown duration, keyup duration)
または sum(keydown duration, keyup duration) - duration overlap
を使用します。
それぞれの方法には長所と短所があります。レイテンシの定義を確定する前に、より多くのデータとフィードバックを収集する必要があります。
ページごとのすべてのインタラクションを集計する
すべてのインタラクションのエンドツーエンドのレイテンシを測定できるようになったら、ページ訪問(複数のインタラクションを含む可能性がある)の集計スコアを定義します。
いくつかのオプションを検討した結果、選択肢を次のセクションで説明する戦略に絞り込みました。各戦略では現在、Chrome で実際のユーザーデータを収集しています。十分なデータを収集してから結果を公開する予定ですが、ページのインタラクション パターンを最も正確に反映する戦略について、サイト所有者の皆様から直接フィードバックをお寄せください。
集計方法のオプション
次の各戦略を説明するために、4 つのインタラクションで構成されるページ訪問の例を考えてみます。
インタラクション | レイテンシ |
---|---|
。 | 120 ミリ秒 |
。 | 20 ミリ秒 |
キー操作 | 60 ミリ秒 |
キー操作 | 80 ミリ秒 |
最悪のインタラクション レイテンシ
ページで発生した個々のインタラクションの最大レイテンシ。上記のインタラクションの例では、最悪のインタラクション レイテンシは 120 ms です。
予算戦略
ユーザー エクスペリエンスの調査では、特定のしきい値を下回るレイテンシをユーザーが負のものと認識しないことが示唆されています。この調査に基づいて、イベントタイプごとに次のしきい値を使用するいくつかの予算戦略を検討しています。
インタラクションの種類 | 予算のしきい値 |
---|---|
クリック/タップ | 100 ミリ秒 |
抗力 | 100 ミリ秒 |
キーボード | 50 ミリ秒 |
これらの各戦略では、インタラクションあたりの予算しきい値を超えるレイテンシのみが考慮されます。上記のページ訪問の例を使用すると、予算超過額は次のようになります。
インタラクション | レイテンシ | 予算に対するレイテンシ |
---|---|---|
[ | 120 ミリ秒 | 20 ミリ秒 |
[ | 20 ミリ秒 | 0 ミリ秒 |
キーの押下 | 60 ミリ秒 | 10 ミリ秒 |
キーの押下 | 80 ミリ秒 | 30 ミリ秒 |
予算内でのインタラクション レイテンシが最悪
予算内での単一インタラクションの最大レイテンシ。上記の例を使用すると、スコアは max(20, 0, 10, 30) = 30 ms
になります。
合計インタラクション レイテンシが予算を超過
予算を超過したすべてのインタラクション レイテンシの合計。上記の例を使用すると、スコアは (20 + 0 + 10 + 30) = 60 ms
になります。
予算を超過した平均インタラクション レイテンシ
予算超過時のインタラクション レイテンシの合計を、インタラクションの合計数で割った値。上記の例を使用すると、スコアは (20 + 0 + 10 + 30) / 4 = 15 ms
になります。
高分位点近似
予算内で最大のインタラクション レイテンシを計算する代わりに、高分位点近似を使用することも検討しました。これは、インタラクションが多く、大きな外れ値を持つ可能性が高いウェブページに適しています。Google が好む可能性のある高分位点近似戦略を 2 つ特定しました。
- 方法 1: 予算を超えて最も大きいインタラクションと 2 番目に大きいインタラクションを追跡する。新しいインタラクション 50 件ごとに、以前の 50 件のインタラクションから最も大きいインタラクションを削除し、現在の 50 件の中から最も大きいインタラクションを追加します。最終的な値は、予算内で残っているインタラクションの最大値になります。
- オプション 2: 予算を超過したインタラクションの上位 10 件を計算し、そのリストからインタラクションの合計数に応じて値を選択します。合計インタラクション数が N の場合、インタラクション数が 500 を超えるページの場合は、(N / 50 + 1)番目に大きい値、または 10 番目の値を選択します。
JavaScript でこれらのオプションを測定する
次のコードサンプルを使用すると、上記の最初の 3 つの戦略の値を決定できます。なお、JavaScript ではページ上のインタラクションの合計数を測定できないため、この例には、予算を超える平均インタラクション数や高分位数近似戦略は含まれていません。
const interactionMap = new Map();
let worstLatency = 0;
let worstLatencyOverBudget = 0;
let totalLatencyOverBudget = 0;
new PerformanceObserver((entries) => {
for (const entry of entries.getEntries()) {
// Ignore entries without an interaction ID.
if (entry.interactionId > 0) {
// Get the interaction for this entry, or create one if it doesn't exist.
let interaction = interactionMap.get(entry.interactionId);
if (!interaction) {
interaction = {latency: 0, entries: []};
interactionMap.set(entry.interactionId, interaction);
}
interaction.entries.push(entry);
const latency = Math.max(entry.duration, interaction.latency);
worstLatency = Math.max(worstLatency, latency);
const budget = entry.name.includes('key') ? 50 : 100;
const latencyOverBudget = Math.max(latency - budget, 0);
worstLatencyOverBudget = Math.max(
latencyOverBudget,
worstLatencyOverBudget,
);
if (latencyOverBudget) {
const oldLatencyOverBudget = Math.max(interaction.latency - budget, 0);
totalLatencyOverBudget += latencyOverBudget - oldLatencyOverBudget;
}
// Set the latency on the interaction so future events can reference.
interaction.latency = latency;
// Log the updated metric values.
console.log({
worstLatency,
worstLatencyOverBudget,
totalLatencyOverBudget,
});
}
}
// Set the `durationThreshold` to 50 to capture keyboard interactions
// that are over-budget (the default `durationThreshold` is 100).
}).observe({type: 'event', buffered: true, durationThreshold: 50});
フィードバック
デベロッパーの皆様には、これらの新しい応答性指標をサイトでお試しいただき、問題が見つかった場合はお知らせください。
ここで説明するアプローチに関する一般的なフィードバックについては、件名に「[レスポンシブ指標]」と記入して、web-vitals-feedback Google グループにメールで送信してください。皆様からのご意見、ご感想をお待ちしております