Interaction to Next Paint (INP) 도구 지원

브렌든 케니
브렌든 케니
Twitter GitHub
엘리자베스 스위니
엘리자베스 스위니
Twitter GitHub

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

추천 측정치

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

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

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

PageSpeed Insights 방문하기

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

필드에 새 INP 측정항목 값을 보여주는 강조 표시된 섹션과 빠른, 평균, 느린 버킷에서 해당 위치를 보여주는 마커가 있는 코어 웹 바이탈에 관한 PSI 보고서

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 값 및 현재 페이지 방문의 주요 측정항목을 제공합니다.

각 코어 웹 바이탈의 값과 이제 INP 값을 포함한 확장 프로그램의 보고서

Chrome용 웹 바이탈 확장 프로그램을 설치합니다.

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

Lighthouse 사용자 플로우 사용

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

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

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

  • Chrome 사용자 환경 보고서 (CrUX)
    • BigQuery: interaction_to_next_paint로 제공되는 INP
    • CrUX API: interaction_to_next_paint로 제공되는 INP
    • CrUX Dashboard: INP 데이터 포함
  • PageSpeed Insights
    • pagespeed.web.dev: CrUX API의 페이지 수준 및 출처 수준 INP 필드 데이터가 'Interaction to Next Paint'로 표시됨
    • PSI API: INTERACTION_TO_NEXT_PAINT_MS로 사용할 수 있는 INP
  • web-vitals JS 라이브러리
    • web-vitals에는 INP 지원이 포함됩니다.
  • 웹 바이탈 Chrome 확장 프로그램
    • CrUX API에서 제공되는 경우 로컬 INP 측정 및 INP 필드 데이터가 포함됩니다.
  • Lighthouse
    • DevTools의 Lighthouse 패널: Chrome Canary의 '기간' 모드에서 INP 측정을 사용할 수 있습니다. (104)
    • Lighthouse npm 모듈: 기간 단위로 제공되는 INP 측정 (합성 입력에 puppeteer 사용)

향후 과제 및 의견 요청

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

측정항목의 유용성과 측정 편의성에 대한 의견이 있다면 web-vitals-feedback Google 그룹으로 공유해 주세요.