INP 개선, 입력이 막히는 지점을 찾습니다

반응 시간도 세 구간으로 나뉩니다

입력에 대한 반응이 느릴 때 '자바스크립트가 무겁다'로 끝내면 고칠 지점을 찾지 못합니다. 시간은 세 구간으로 나뉩니다. 첫째는 입력 지연으로, 손가락이 닿은 순간부터 처리가 시작되기까지입니다. 이미 다른 작업이 돌고 있으면 여기서 기다립니다. 둘째는 처리 시간으로, 그 입력에 대한 코드가 실행되는 동안입니다. 셋째는 다음 화면이 그려지기까지입니다. 각 구간의 조치가 다릅니다. 첫째는 백그라운드 작업을 쪼개는 것, 둘째는 처리 코드를 줄이는 것, 셋째는 화면 갱신 범위를 좁히는 것입니다.

긴 작업을 쪼개면 입력 지연이 줄어듭니다

입력 지연의 원인은 대개 한 번에 오래 도는 작업입니다. 목록을 한꺼번에 그리거나 큰 데이터를 한 번에 처리하면 그 동안 입력이 대기합니다. 그래서 작업을 쪼개 중간에 브라우저가 입력을 처리할 틈을 줍니다. 쪼개는 방법은 세 가지입니다. 첫째, 처리 단위를 작게 나누고 사이에 양보 지점을 둡니다. 둘째, 화면에 보이지 않는 부분의 작업을 미룹니다. 셋째, 계산이 무거운 작업을 별도 작업자로 보냅니다. 세 번째가 가장 효과가 크지만 구조 변경이 필요하므로, 첫째와 둘째를 먼저 적용해 효과를 확인합니다. 적용 뒤에는 느린 상호작용 상위 5개를 1주 단위로 다시 뽑아 비교합니다.

구간 값을 더해 목표에 맞춥니다

학습용 가정으로 계산합니다. 가정값은 현재 측정값이 입력 지연 40밀리초, 처리 230밀리초, 다음 렌더 50밀리초라고 두겠습니다. 합계는 320밀리초입니다. 2026년 10월 19일 확인한 공식 기준인 200밀리초 이하로 들어가려면 120밀리초를 줄여야 합니다. 이것이 중간 계산값입니다. 최종 배분은 가장 큰 구간에서 합니다. 처리 시간 230밀리초를 110밀리초로 줄이면 합계가 40 더하기 110 더하기 50으로 정확히 200밀리초가 됩니다. 처리 코드에서 당장 필요하지 않은 계산을 입력 처리 이후로 미루는 것이 가장 흔한 해법입니다.

느린 상호작용은 특정 동작에 몰려 있습니다

결론을 뒤집는 조건은 측정 대상입니다. 이 지표는 페이지에서 일어난 상호작용 중 가장 느린 쪽을 대표값으로 씁니다. 그래서 대부분의 클릭이 빨라도 특정 동작 하나가 느리면 지표가 나쁩니다. 개선 작업은 평균을 내리는 것이 아니라 가장 느린 동작을 찾는 일입니다. 수집 도구에서 어떤 요소의 어떤 이벤트가 느렸는지 함께 기록해야 합니다. 두 번째 조건은 서드파티 스크립트입니다. 외부 스크립트가 긴 작업을 만들면 우리 코드를 고쳐도 지표가 개선되지 않습니다. 그래서 외부 스크립트의 실행 시점을 늦추거나 필요성을 다시 검토합니다. 외부 스크립트가 3개 이상이면 하나씩 끄며 1건씩 효과를 측정합니다.

성능 최적화 실행 전 점검표

• 입력 지연·처리·다음 렌더 세 구간을 측정했다
• 긴 작업을 쪼개 양보 지점을 두었다
• 가장 느린 상호작용이 어떤 요소의 어떤 이벤트인지 기록했다
• 외부 스크립트의 실행 시점을 검토했다