Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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

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

Hongbo Song

今年、Chrome 速度指標チームは、検討していたいくつかのアイデア新しい応答性指標を導入しました目標は、発生した時間やイベントをより適切にキャプチャするレイテンシの全体像を把握できるため、全期間を通じたページの全体的な応答性

この数値はここ数か月で着実に進歩しておりインタラクションのレイテンシの測定方法に関する最新情報を具体的な集計オプションをいくつか紹介しますウェブページ全体の応答性が向上します。

Google では、デベロッパーやサイト所有者からフィードバックをお待ちしています。全体的な入力を最もよく表す選択肢は、次のうちどれですか。ページの応答性を高めるのに役立ちます。

インタラクションのレイテンシを測定する

復習として、First Input Delay（FID）指標は、遅延部分を表します。つまり、イベントハンドラが初期化されるまでユーザーがページを操作したとき実行できます。

この新しい指標を使って、イベント全体を取得できるように展開する予定です。 duration、すべてのイベントハンドラが終了し、次のフレームが描画され��まで、最初のユーザー入力が継続されます。確認できます。

また操作個別のイベントではありませんインタラクションとは同じ論理ユーザー操作（例: pointerdown、click、pointerup）。

個々のイベントのグループからインタラクションのレイテンシの合計を測定するため次の 2 つのアプローチを検討しています。

最大イベント時間: インタラクションレイテンシの最大イ��ント時間インタラクショングループ内の任意のイベントの 1 つのイベント期間。
合計イベント時間: 操作のレイテンシは、すべてのイベントの合計です。重複は無視します。

例として、以下の図はキー押下操作を示しています。 keydown イベントと keyup イベントの 2 番目の要素です。この例では、重複した期間があります。関連付けられますキー操作のレイテンシを測定するには、 max(keydown duration, keyup duration) または sum(keydown duration, keyup duration) - duration overlap を使用できます。

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

それぞれの方法には長所と短所があるため、より多くのデータを収集し、フィードバックを送信してから、レイテンシの定義を確定します。

<ph type="x-smartling-placeholder">で確認できます。 <ph type="x-smartling-placeholder">

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

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

すべてのインタラクションのエンドツーエンドのレイテンシを測定できるようになったらステップはページ訪問の集計スコアを定義することです。です。

さまざまな選択肢を検討した結果、選択肢を次のセクションで概説します。各戦略は現在 Chrome で実際のユーザーのデータを収集しています今後、十分なデータを収集できましたがサイト所有者から直接フィードバックを求めるページのインタラクションパターンを最も正確に反映している。

集計戦略のオプション

次の各戦略を説明するために、ページ訪問の例を考えてみます。 4 つのインタラクションで構成されます

インタラクション	レイテンシ
クリック	120 ミリ秒
クリック	20 ミリ秒
キー操作	60 ミリ秒
キー操作	80 ミリ秒

インタラクションレイテンシが最悪

ページで発生した個々のインタラクションの最大レイテンシ。与えられたインタラクションの例の場合、インタラクションレイテンシの最悪は 120 になります。ミリ秒。

予算戦略

ユーザーエクスペリエンス調査特定のしきい値を下回るレイテンシをユーザーが除外しますこの調査に基づいて複数の予算戦略を検討中各イベントタイプに対して次のしきい値を使用します。

インタラクションの種類	予算しきい値
クリック/タップ	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 になります。

高分位近似

バジェットに対する最大インタラクションレイテンシを計算する代わりに、高分位近似を使用することも検討してください。インタラクション数が多く、サイズが大きくなる可能性が高いウェブページ外れ値。高分位近似戦略の可能性を 2 つ特定した私たちが好きなもの:

オプション 1: 最も大きいインタラクションと 2 番目に大きいインタラクションを追跡するできます。新しいインタラクションが 50 回発生するたびに、最も大きなインタラクションを現在のセットの 50 から最大のインタラクションを追加します。最終的な値は、予算を超えて残る最大のインタラクションとなります。
オプション 2: 予算全体で最大 10 件のインタラクションを計算し、インタラクションの合計数に応じて、このリストから値が選択されます。N の場合合計インタラクション数の場合は、（N / 50 + 1）番目に大きな値または 10 番目の値を選択アクセスが 500 回を超えるページを表示することもできます

これらのオプションを JavaScript で測定する

次のコード例を使用すると、最初の 3 つの戦略について説明しますなお、総インタラクションの合計数が平均インタラクション数と予算戦略、または高スコアの分位近似戦略について説明します。

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});