Legacy 사이트 리라이트 없이 INP 480ms에서 200ms 미만으로 단축

How we cut INP from 480ms to under 200ms on a legacy site (no rewrite)

Daniel Cheong2026년 6월 7일2분intermediate

AI 요약

Context

WordPress 및 노후화된 테마를 사용하는 Legacy 환경의 구조적 한계로 인한 응답성 저하 발생. 전체 시스템 재구축이 불가능한 제약 사항 하에서 Interaction to Next Paint(INP) 최적화 필요.

web-vitals 라이브러리를 통한 interactionTarget 식별로 병목 지점인 특정 UI 요소 정밀 분석
scheduler.yield 또는 setTimeout 기반의 비동기 제어를 통해 Main Thread의 Long Task 분산 처리
사용자 피드백을 위한 UI 업데이트를 우선 실행한 후 무거운 로직을 후순위로 배치하는 Yielding 전략 채택
requestIdleCallback을 활용하여 Chat Widget 및 Analytics 등 Third-party Script의 로딩 시점을 Idle 상태로 지연
가시적 피드백 제공과 무거운 연산의 분리를 통한 Perceived Performance 개선

실천 포인트

1. web-vitals로 최악의 인터랙션을 유발하는 구체적 DOM 요소 식별

2. 동기적 핸들러 내 무거운 로직을 scheduler.yield로 분리하여 Main Thread 반환

3. 비핵심 Third-party 스크립트를 requestIdleCallback으로 지연 로딩 처리

태그