ウェブでの応答性の測定に関する計画の最新情報です。
今年、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">ページごとにすべてのインタラクションを集計する
すべてのインタラクションのエンドツーエンドのレイテンシを 測定できるようになったら ステップはページ訪問の集計スコアを定義することです。 です。
さまざまな選択肢を検討した結果、選択肢を 次のセクションで概説します。各戦略は現在 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});
フィードバック
デベロッパーの皆様には、 問題が見つかった場合は Google までお知らせください。
ここで説明するアプローチに関する一般的なフィードバックをメールで: web-vitals-feedback Google 「[レスポンシブネスの指標]」を含むグループ」と入力します。私たちは ご意見をお待ちしています。