INP 문제 설명: 느린 상호작용의 원인과 해결 방법
Interaction to Next Paint(INP)는 페이지가 클릭, 탭, 키 입력에 얼마나 빠르게 응답하는지를 측정하는 Core Web Vital입니다. INP가 200ms를 넘으면 느리게 느껴지고, 500ms를 넘으면 고장 난 것처럼 느껴집니다.
거의 모든 나쁜 INP는 몇 가지 근본 원인 중 하나로 귀결됩니다. 아래 각 가이드는 하나의 원인을 설명합니다: 알아보는 법, 왜 발생하는지, 그리고 코드와 함께 해결하는 법.
근본 원인
오래 실행되는 이벤트 핸들러는 메인 스레드를 차단하고 다음 페인트를 지연시킵니다. 무거운 핸들러를 찾아 scheduler.yield()나 Web Worker로 나누는 방법.
레이아웃 스래싱: 한 프레임에서 반복되는 리플로우와 멈추는 방법DOM 읽기와 쓰기를 번갈아 하면 브라우저가 한 프레임에서 레이아웃을 반복 재계산합니다. 읽기와 쓰기를 묶어 INP를 고치는 방법.
강제 동기 레이아웃: DOM에 쓴 뒤 기하 속성 읽기DOM을 바꾼 직후 offsetWidth나 getBoundingClientRect를 읽으면 브라우저가 JS 작업 안에서 레이아웃을 재계산합니다. 탐지하고 고치는 방법.
메인 스레드 차단: 핸들러가 실행되기도 전에 높은 input delay메인 스레드가 다른 긴 작업으로 바쁘면 클릭은 핸들러 시작 전까지 큐에서 기다립니다. 차단 작업을 찾아 나눠 INP input delay를 고치는 방법.
상호작용을 막는 서드파티 스크립트: 진단과 격리분석, 광고, 채팅 위젯은 메인 스레드에서 긴 작업을 실행해 INP를 망칩니다. 긴 작업을 서드파티에 귀속시키고 async, defer 또는 worker로 격리하는 방법.
React 리렌더 연쇄: 한 번의 클릭이 트리 전체를 리렌더할 때React 트리 상단의 상태 업데이트는 클릭마다 수백 개의 컴포넌트를 리렌더합니다. 렌더 연쇄를 찾아 memo, useCallback, useTransition으로 고치는 방법.