INP 최적화 핵심: 입력 지연, 처리 시간, 프레젠테이션 지연을 낮추는 법

이 가이드는

developer.chrome.com/docs/web-platform/optimize-inp

INP(Interaction to Next Paint)란?

INP는 사용자가 페이지와 상호작용한 순간부터 그 결과가 포함된 다음 프레임이 화면에 그려질 때까지의 시간을 측정하는 Core Web Vitals 지표입니다. INP는 다음 세 단계로 나뉩니다.

1. 입력 지연 (Input delay)

"사용자가 페이지와 상호작용을 시작할 때 시작되어, 해당 상호작용에 대한 이벤트 콜백이 실행되기 시작할 때 종료됩니다."

입력 지연이 발생하는 주요 원인은 메인 스레드가 다른 작업(예: 대규모 스크립트 파싱, 레이아웃 계산 등)으로 인해 바쁜 상태이기 때문입니다. 상호작용 자체는 느린 INP의 직접적인 원인이 아닐 수 있습니다.

최적화 원칙: 메인 스레드에서 사용자가 상호작용하려는 동안 과도한 작업이 실행되는 것을 피해야 합니다. 입력 지연을 0으로 만들 수는 없지만, 그 길이를 제어할 수 있습니다. 핵심은 이벤트 콜백이 즉시 실행되는 것을 막는 메인 스레드 작업이 있는지 파악하는 것입니다.

2. 처리 시간 (Processing duration)

"이벤트 콜백이 완전히 실행되는 데 걸리는 시간으로 구성됩니다."

처리 시간이 길다면 "해당 상호작용의 이벤트 핸들러가 느린 INP의 직접적인 원인"인 경우입니다.

최적화 원칙:

• 이벤트 핸들러가 수행하는 작업을 줄이거나 지연시킵니다.
• "모든 이벤트 리스너에서 실행되는 모든 코드는 상호작용을 지연시킵니다." 자체 코드뿐만 아니라 프레임워크, 라이브러리, 서드파티 스크립트의 리스너도 감사 대상입니다.
• 코드 스플리팅(Code-splitting), 프로그레시브 로딩(Progressive loading), 긴 작업(Long task) 분할이 응답 시간을 크게 개선할 수 있습니다.

3. 프레젠테이션 지연 (Presentation delay)

"이벤트 핸들러 코드가 실행된 후 브라우저가 상호작용의 시각적 결과를 표시하기 위해 렌더링하는 과정에서 발생하는 지연입니다."

공급된 자료에는 프레젠테이션 지연에 대한 완전한 정의와 전체 개선 가이드라인이 충분히 포함되어 있지 않습니다. 일반적으로 이 단계는 브라우저의 렌더링(스타일 계산, 레이아웃, 페인트, 합성) 작업이 지연될 때 발생합니다.

최적화 원칙 (제한적 증거 기반): 이벤트 콜백 이후의 브라우저 렌더링 작업을 분석하고, 불필요한 리플로우(Reflow)나 리페인트(Repaint)를 최소화하는 방향으로 접근해야 합니다.

종합 최적화 전략

• 목표: 모든 상호작용의 모든 구성 요소를 가능한 한 짧게 유지하는 것입니다.
• INP 평가 기준: 200ms 미만(좋음), 200~500ms(개선 필요), 500ms 초과(나쁨).
• 실제 사용자 환경을 기록할 때 다양한 상호작용을 시도하여 페이지의 INP 기여자를 더 잘 파악하세요.
• 입력 지연이 높다면 메인 스레드의 다른 작업(예: 파싱, 레이아웃, 다른 이벤트 처리)이 원인인지 확인합니다.
• 처리 시간이 높다면 이벤트 핸들러 내의 자체 코드, 프레임워크 코드, 서드파티 코드를 최적화합니다.
• 프레젠테이션 지연이 높다면 브라우저 렌더링 성능을 진단하고 개선합니다.

참고: 이 가이드는 구글 공식 문서에서 제공된 정확한 인용문(snippet)에 기반합니다. 프레젠테이션 지연의 완전한 정의와 전체 개선 방법은 원문에서 확인해야 할 수 있습니다.