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

웹에서의 응답성 측정 계획에 관한 업데이트입니다.

Hongbo Song

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

올해 초 Chrome 속도 측정항목팀은 새로운 응답성 측정항목에 관한 몇 가지 아이디어를 공유했습니다. 개별 이벤트의 엔드 투 엔드 지연 시간을 더 잘 파악하고 전체 기간 동안 페이지의 전반적인 응답성을 보다 전체적으로 파악할 수 있는 측정항목을 설계하려고 합니다.

Google은 지난 몇 개월 동안 이 측정항목에 많은 진전을 이루었습니다. Google에서는 상호작용 지연 시간을 측정하는 방법에 관한 업데이트를 공유하고, 웹페이지의 전반적인 응답성을 정량화하기 위해 고려 중인 몇 가지 특정 집계 옵션을 소개하고자 합니다.

Google에서는 개발자와 사이트 소유자로부터 페이지의 전반적인 입력 반응성을 가장 잘 나타내는 옵션에 관한 의견을 듣고자 합니다.

상호작용 지연 시간 측정

검토 결과, 최초 입력 반응 시간 (FID) 측정항목은 입력 지연 시간의 지연 부분을 캡처합니다. 즉, 사용자가 페이지와 상호작용하는 시점과 이벤트 핸들러를 실행할 수 있는 시점 사이의 시간입니다.

이 새로운 측정항목을 통해 이 측정항목을 확장하여 최초 사용자 입력부터 모든 이벤트 핸들러가 실행된 후 다음 프레임이 그려질 때까지의 전체 이벤트 기간을 캡처할 계획입니다.

또한 개별 이벤트가 아닌 상호작용을 측정할 계획입니다. 상호작용은 동일한 논리적 사용자 동작 (예: pointerdown, click, pointerup)의 일부로 전달되는 이벤트 그룹입니다.

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

• 최대 이벤트 기간: 상호작용 지연 시간은 상호작용 그룹의 이벤트 중 가장 큰 단일 이벤트 기간과 같습니다.
• 총 이벤트 기간: 상호작용 지연 시간은 모든 이벤트 기간의 합계이며, 중복은 무시됩니다.

예를 들어 아래 다이어그램은 keydown 및 keyup 이벤트로 구성된 키 누르기 상호작용을 보여줍니다. 이 예에서는 두 이벤트 간에 기간이 중복됩니다. 키 누르기 상호작용의 지연 시간을 측정하기 위해 max(keydown duration, keyup duration) 또는 sum(keydown duration, keyup duration) - duration overlap를 사용할 수 있습니다.

각 방법에는 장단점이 있습니다. 지연 시간 정의를 마무리하기 전에 더 많은 데이터와 의견을 수집하려고 합니다.

참고: 이벤트 기간은 이벤트 하드웨어 타임스탬프에서 이벤트가 처리된 후 다음 페인트가 실행된 시간까지의 시간입니다. 하지만 이벤트로 인해 업데이트가 발생하지 않는 경우 기간은 이벤트 하드웨어 타임스탬프에서 업데이트를 유발하지 않을 것으로 확신하는 시점까지의 시간입니다.

참고: 키보드 상호작용의 경우 일반적으로 keydown 및 keyup를 측정합니다. 그러나 중국어 및 일본어 입력 방법과 같은 IME의 경우 compositionstart와 compositionend 간의 input 이벤트를 측정합니다.

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

모든 상호작용의 엔드 투 엔드 지연 시간을 측정할 수 있게 되면 다음 단계는 둘 이상의 상호작용이 포함될 수 있는 페이지 방문의 집계 점수를 정의하는 것입니다.

여러 가지 옵션을 살펴본 후 다음 섹션에서 설명하는 전략으로 좁혀 나갔습니다. 각 전략은 현재 Chrome에서 실제 사용자 데이터를 수집하고 있습니다. Google은 충분한 데이터를 수집할 시간이 되면 결과를 공개할 계획이지만, 페이지의 상호작용 패턴을 가장 정확하게 반영하는 전략에 대해 사이트 소유자로부터 직접적인 의견도 받고 있습니다.

집계 전략 옵션

다음 각 전략을 설명하기 위해 네 가지 상호작용으로 구성된 페이지 방문의 예를 살펴보겠습니다.

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

최악의 상호작용 지연 시간

페이지에서 발생한 최대 개별 상호작용 지연 시간입니다. 위에 나열된 상호작용 예의 경우 최악의 상호작용 지연 시간은 120ms입니다.

예산 전략

사용자 환경 연구에 따르면 사용자가 특정 기준점 미만의 지연 시간을 음수로 인식하지 못할 수 있습니다. 이 연구를 기반으로 각 이벤트 유형에 다음 기준에 따라 여러 예산 전략을 고려하고 있습니다.

상호작용 유형	예산 기준액
클릭/탭	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가 됩니다.

높은 분위수 근사치

예산에 비해 가장 큰 상호작용 지연 시간을 계산하는 대신 높은 분위수 근사치를 사용하는 방법도 고려했습니다. 이 방법은 상호작용이 많고 이상점이 클 수 있는 웹페이지에 더 공정해야 합니다. Google에서는 다음과 같은 두 가지 잠재적인 고분위수 근사치 전략을 확인했습니다.

• 옵션 1: 예산을 초과하는 최대 상호작용과 두 번째로 큰 상호작용을 추적합니다. 새로운 상호작용 50개마다 이전 50개 세트 중 가장 큰 상호작용을 삭제하고 현재 50개 세트 중 가장 큰 상호작용을 더합니다. 최종 값은 예산 중 잔여 상호작용 중 가장 큰 값입니다.
• 옵션 2: 예산 중 가장 큰 10개의 상호작용을 계산하고 총 상호작용 수에 따라 이 목록에서 값을 선택합니다. 총 상호작용 N개의 경우, (N / 50 + 1)번째로 큰 값을 선택하거나, 상호작용이 500회 이상인 페이지의 경우 10번째 값을 선택합니다.

JavaScript에서 이러한 옵션 측정

다음 코드 예는 위에 표시된 처음 세 가지 전략의 값을 결정하는 데 사용할 수 있습니다. 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});

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

의견

개발자는 사이트에서 새로운 응답성 측정항목을 사용해 보고 문제가 발견되면 Google에 알려주시기 바랍니다.

여기에 설명된 접근 방식에 대한 일반적인 의견은 제목에 '[응답성 측정항목]'을 포함하여 web-vitals-feedback Google 그룹에 이메일로 보내주세요. 여러분의 의견을 기다리겠습니다.