このページは Cloud Translation API によって翻訳されました。

フィードバックのお願い: 試験運用版の応答性指標

ウェブでの応答性の測定計画に関する最新情報。

Hongbo Song

今年の初め、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 を使用します。

イベントの期間に基づくインタラクションレイテンシを示す図

それぞれの方法には長所と短所があります。レイテンシの定義を確定する前に、より多くのデータとフィードバックを収集する必要があります。

注: キーボード操作の場合、通常は keydown と keyup を測定します。ただし、中国語や日本語の入力方法などの IME については、compositionstart と compositionend の間の input イベントを測定します。

ページごとのすべてのインタラクションを集計する

すべてのインタラクションのエンドツーエンドのレイテンシを測定できるようになったら、ページ訪問（複数のインタラクションを含む可能性がある）の集計スコアを定義します。

いくつかのオプションを検討した結果、選択肢を次のセクションで説明する戦略に絞り込みました。各戦略では現在、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});