의견 요청: 실험용 응답성 측정항목

웹에서 응답성을 측정하기 위한 Google의 계획 업데이트

Hongbo Song

<ph type="x-smartling-placeholder">

</ph> 핵심 사항: 이 도움말은 웹페이지의 엔드 투 엔드 지연 시간을 측정하기 위해 새로운 반응성 측정항목을 개발 중인 기간에 작성되었습니다. 이 새 측정항목은 Interaction to Next Paint (INP)라는 이름으로 출시되었습니다. 2024년 3월 12일에 INP는 FID를 대체하는 Core Web Vital이 되었습니다.

올해 초 Chrome 속도 측정항목팀은 아이디어를 얻기 위해 새로운 반응도 측정항목을 사용할 수 있습니다. 사용자의 관심을 더 잘 포착하는 측정항목을 개별 이벤트의 엔드 투 엔드 지연 시간을 측정하여 전체 기간 동안 페이지의 전반적인 응답성입니다.

지난 몇 달 동안 이 측정항목은 많은 진전을 이루었고, 상호작용 지연 시간을 측정하는 방법에 대한 데이터를 수치화하기 위해 고려 중인 몇 가지 특정 집계 옵션을 소개합니다. 전반적인 응답성을 측정할 수 있습니다.

개발자 및 사이트 소유자로부터 의견 전체 입력 값을 가장 잘 나타내는 옵션은 무엇인가요? 확인할 수 있습니다.

상호작용 지연 시간 측정

검토 시 첫 입력 지연 (FID) 측정항목은 지연 부분을 지정합니다. 즉, 사용자가 페이지와 상호작용할 때 이벤트 핸들러가 호출될 때까지 실행할 수 있습니다

이 새로운 측정항목을 통해 전체 이벤트를 포착할 수 있도록 확장할 계획입니다. 길이, 모든 이벤트 핸들러가 실행된 후 다음 프레임이 페인트될 때까지의 초기 사용자 입력 확인할 수 있습니다

또한 Google은 상호작용 개별 이벤트가 아니라 상호작용은 사용자가 동일한 논리적 사용자 동작의 일부로 전달됩니다 (예: pointerdown, click, pointerup)

개별 이벤트 그룹에서 발생한 총 상호작용 지연 시간 측정 Google에서는 다음과 같은 두 가지 가능한 접근 방식을 고려하고 있습니다.

• 최대 이벤트 기간: 상호작용 지연 시간이 최대 이벤트 기간과 동일합니다. 단일 이벤트 기간을 정의할 수 있습니다.
• 총 이벤트 기간: 상호작용 지연 시간은 모든 이벤트의 합계입니다. 중복을 무시하고 재생 시간을 지정합니다.

예를 들어 아래 다이어그램은 다음과 같이 구성된 키 누름 상호작용을 보여줍니다. keydown 및 keyup 이벤트의입니다. 이 예시에서는 확인할 수 있습니다. 키 누름 상호작용의 지연 시간을 측정하려면 max(keydown duration, keyup duration) 또는 sum(keydown duration, keyup duration) - duration overlap를 사용할 수 있습니다.

각 접근 방식에는 장단점이 있으며, 더 많은 데이터를 수집하여 의견을 보내주시기 바랍니다.

<ph type="x-smartling-placeholder">

</ph> 참고: 이벤트 기간은 이벤트 하드웨어 타임스탬프에서 이벤트가 처리된 후 다음 페인트가 수행되는 시간까지의 시간입니다. 하지만 이벤트가 업데이트를 일으키지 않는 경우 기간은 이벤트 하드웨어 타임스탬프부터 업데이트가 발생하지 않을 것이 확실한 시점까지의 시간입니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> 참고: 키보드 상호작용의 경우 일반적으로 keydown 및 keyup를 측정합니다. 하지만 중국어 및 일본어의 입력 방법과 같은 IME의 경우 compositionstart와 compositionend 사이의 input 이벤트를 측정합니다.

페이지당 모든 상호작용 집계

모든 상호작용의 엔드 투 엔드 지연 시간을 측정할 수 있게 되면 더 많은 정보를 포함할 수 있는 페이지 방문에 대한 집계 점수를 한 번의 상호작용으로 충분합니다.

여러 옵션을 살펴본 후 선택지를 좁혀 현재 각 입찰 전략에 대해 수집하기 시작했습니다. 이제 충분한 데이터를 수집할 시간이 생기고 사이트 소유자로부터 어떤 전략을 사용해야 하는지에 대한 의견을 페이지의 상호작용 패턴을 가장 정확하게 반영할 수 있어야 합니다.

집계 전략 옵션

다음 각 전략에 대한 이해를 돕기 위해 페이지 방문 예제를 보십시오. 네 가지 상호작용으로 구성됩니다.

상호작용	지연 시간
클릭	120 ms
클릭	20ms
키 누르기	60 ms
키 누르기	80 ms

최악의 상호작용 지연 시간

페이지에서 발생한 개별 상호작용의 최대 지연 시간입니다. 주어진 위에 나열된 상호작용 예시에서 최악의 상호작용 지연 시간은 120 밀리초

예산 전략

사용자 환경 연구 이는 사용자가 특정 기준점 미만의 지연 시간을 인식하지 못할 수 있다는 음수입니다. 이 조사를 바탕으로 몇 가지 예산 전략을 고려하고 있습니다. 각 이벤트 유형에 대해 다음 기준을 사용합니다.

상호작용 유형	예산 기준액
클릭/탭	100ms
드래그	100ms
키보드	50ms

이러한 각 전략은 상호작용당 예산 기준액 위의 페이지 방문 예를 사용하여 예산 초과 금액은 다음과 같습니다.

상호작용	지연 시간	예산을 초과하는 지연 시간
클릭	120 ms	20ms
클릭	20ms	0ms
키 누르기	60 ms	10ms
키 누르기	80 ms	30 ms

예산 대비 최악의 상호작용 지연 시간

예산을 초과하는 단일 상호작용 지연 시간이 가장 깁니다. 위의 예를 사용하여 점수는 max(20, 0, 10, 30) = 30 ms점입니다.

예산을 초과하는 총 상호작용 지연 시간

예산을 초과한 모든 상호작용 지연 시간의 합계입니다. 위의 예를 사용하여 점수는 (20 + 0 + 10 + 30) = 60 ms점입니다.

예산을 초과하는 평균 상호작용 지연 시간

예산 초과 상호작용의 총 지연 시간을 상호작용한다는 것입니다. 위의 예를 사용할 경우 점수는 (20 + 0 + 10 + 30) / 4 = 15 ms입니다.

고분위수 근사

예산을 초과하는 최대 상호작용 지연 시간을 계산하는 대신 높은 분위수 근사치를 사용하는 것도 고려되는데, 이는 상호작용이 많고 상호작용이 많을 가능성이 큰 이상점과 관련이 있습니다. 잠재적 고분위수 근사치의 두 가지 전략이 확인되었습니다. 선호사항:

• 옵션 1: 지난 몇 년 동안 발생한 최대 상호작용과 두 번째로 발생한 있습니다. 새로운 상호작용이 50번 발생할 때마다 현재 50개 집합에서 가장 큰 상호작용을 더합니다. 최종 값은 예산을 초과하는 남은 상호작용 중 가장 큰 값입니다.
• 옵션 2: 예산을 초과하는 최대 10개의 상호작용을 계산하고 총 상호작용 수에 따라 해당 목록의 값이 달라질 수 있습니다. 주어진 N 총 상호작용 수를 조회하려면 (N / 50 + 1)번째 값 또는 10번째 값을 선택하세요. 500회 이상의 상호작용이 발생한 페이지

JavaScript에서 이러한 옵션 측정

다음 코드 예를 사용하여 첫 번째 세 가지 전략이 있습니다. 아직 Ad Exchange의 상호작용 수를 보여주므로 이 예에서는 예산 전략에 대한 평균 상호작용이나 분위수 근사치 전략을 지원합니다.

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

드림 <ph type="x-smartling-placeholder">

</ph> 주의: 현재 Chrome에는 신고된 상호작용 타임스탬프의 정확성에 영향을 미치는 몇 가지 버그가 있습니다. 이 버그는 버전 98에서 수정되었으므로 개발자는 Chrome Canary에서 이러한 전략을 테스트하여 가장 정확한 결과를 얻는 것이 좋습니다.

의견

개발자가 문제가 있으면 Google에 알려주세요.

여기에 설명된 접근 방식에 대한 일반적인 의견이 있으면 web-vitals-feedback을 사용하세요 '[응답성 측정항목]'이 포함된 그룹 있습니다. 정말로 의견을 들려주세요.