Interaction to Next Paint (INP) 도구 지원

Brendan Kenny
Brendan Kenny
X GitHub
Elizabeth Sweeny
Elizabeth Sweeny
X GitHub

새로운 대기 중인 응답성 측정항목인 다음 페인트에 대한 상호작용 (INP)에 대한 첫 번째 도구 지원을 제공하게 되어 기쁩니다. 측정항목 자체에 대한 자세한 내용은 공식 INP 측정항목 가이드를 참고하세요.

추천 측정

INP를 측정하는 목적은 페이지가 사용자 입력에 얼마나 빠르게 반응하는지 파악하는 것입니다. 현실적인 데이터를 얻는 유일한 방법은 현장 데이터를 사용하여 사이트를 방문하는 실제 사용자에게 페이지가 어떻게 응답하는지 측정하는 것입니다.

실험실에서 INP를 측정하면 이벤트 타이밍과 최적화가 필요한 위치를 더 잘 이해하는 데 도움이 됩니다. 실험실 도구는 페이지와 자동으로 상호작용하지 않으므로 측정하는 동안 수동으로 입력하거나 Puppeteer와 같은 자동화 도구로 스크립트해야 합니다. 일반적인 사용자 여정에서 주요 상호작용이 식별되면 이를 시도하여 문제를 파악하거나 스크립트로 작성하고 회귀를 방지하기 위해 CI 테스트에 포함할 수 있습니다.

실제 사용자의 경험 확인하기 (필드 데이터)

PageSpeed Insights로 이동하기

PageSpeed Insights는 Chrome 사용자 환경 (CrUX) 보고서 API에서 필드 데이터를 가져와 이전 28일 동안의 페이지 및 출처 실적을 보여주는 스냅샷을 제공합니다. 이제 이 데이터에 INP가 포함됩니다.

현장에서 핵심 웹 바이탈에 관한 PSI 보고서로, 새로운 INP 측정항목 값을 보여주는 강조 표시된 섹션과 빠름, 평균, 느림 버킷에서의 위치를 보여주는 마커가 있습니다.

PageSpeed Insights에서 사용해 보세요.

현장에서 자체 INP 값 수집

사이트의 INP 데이터를 직접 수집하려면 web-vitals 라이브러리를 사용하는 것이 가장 쉬운 방법입니다. 현재 베타 버전에서 INP를 완전히 지원합니다.

import {onINP} from 'web-vitals';

onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.
  console.log(value);
});

web-vitals 및 DevTools 콘솔에서 측정하는 방법을 자세히 알아보세요.

웹 바이탈 Chrome 확장 프로그램

Web Vitals 확장 프로그램은 CrUX API의 사용자 페이지 환경 개요와 CWV의 실시간 값, 현재 페이지 방문의 주요 측정항목을 모두 제공합니다.

각 Core Web Vitals의 값을 보여주고 이제 INP 값을 포함하는 확장 프로그램의 보고서

Chrome용 Web Vitals 확장 프로그램을 설치합니다.

성능 문제 진단 (실험실 데이터)

Lighthouse 사용자 플로우 사용

DevTools의 Lighthouse 패널에 있는 새로운 기간 모드를 사용하면 Lighthouse를 시작하고 원하는 대로 테스트 페이지와 상호작용한 후 해당 기간 동안 발생한 상황을 보고할 수 있습니다. 이제 이 보고서에는 응답성 문제를 진단하는 데 도움이 되는 INP 및 감사가 포함됩니다.

Lighthouse 사용자 플로우를 사용하여 동일한 일련의 상호작용을 자동화할 수 있습니다. INP는 Lighthouse 9.6부터 사용자 흐름에서 사용할 수 있습니다.

도구 사용 가능 여부 세부정보

  • Chrome 사용자 환경 (CrUX) 보고서
    • BigQuery: INP를 interaction_to_next_paint로 사용할 수 있음
    • CrUX API: INP를 interaction_to_next_paint로 사용할 수 있음
    • CrUX 대시보드: INP 데이터 포함
  • PageSpeed Insights
    • pagespeed.web.dev: CrUX API의 페이지 수준 및 출처 수준 INP 필드 데이터가 '다음 페인트에 대한 상호작용'으로 표시됨
    • PSI API: INP를 INTERACTION_TO_NEXT_PAINT_MS로 사용할 수 있음
  • web-vitals JS 라이브러리
    • web-vitals: INP 지원 포함
  • Web Vitals Chrome 확장 프로그램
    • CrUX API에서 제공되는 경우 로컬 INP 측정값 및 INP 필드 데이터를 포함합니다.
  • Lighthouse
    • DevTools의 Lighthouse 패널: Chrome Canary (104)의 'timespan' 모드에서 INP 측정 가능
    • Lighthouse npm 모듈: 시간 범위에서 INP 측정 가능 (합성 입력에는 Puppeteer 사용)

향후 작업 및 의견 요청

앞으로 Chrome 도구팀은 INP의 디버깅 기능과 최적화 추천에 계속 투자할 예정입니다.

측정항목의 유용성부터 측정 편의성에 이르기까지 의견이 있으면 web-vitals-feedback Google 그룹에 제출해 주세요.