Interaction to Next Paint (INP) 도구 지원

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

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

추천 측정

INP 측정의 목표는 페이지가 사용자 입력에 얼마나 빠르게 반응하는지 파악하는 것입니다. 실제 데이터를 얻는 유일한 방법은 사이트를 방문하는 실제 사용자를 대상으로 필드 데이터를 사용하여 페이지가 어떻게 반응하는지 측정하는 것입니다.

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

실제 사용자가 경험하는 내용 알아보기 (필드 데이터)

PageSpeed Insights 방문

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

필드의 Core Web Vitals에 관한 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 콘솔에서 측정하는 방법을 자세히 알아보세요.

Web Vitals Chrome 확장 프로그램

웹 바이탈 확장 프로그램은 사용자의 페이지 환경 (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 패널: INP 측정은 Chrome Canary (104)의 '기간' 모드에서 사용할 수 있습니다.
    • Lighthouse npm 모듈: INP 측정은 기간에서 사용할 수 있습니다 (합성 입력에 Puppeteer 사용).

향후 작업 및 의견 요청

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

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