Antigravity Agent
24 lines
4.1 KiB
Markdown
24 lines
4.1 KiB
Markdown
# [[Interaction to Next Paint (INP)]]
|
|
|
|
## 📌 Brief Summary
|
|
Interaction to Next Paint (INP)는 2024~2025년 Google Core Web Vitals 업데이트에서 First Input Delay (FID)를 대체하여 새롭게 도입된 핵심 반응성(Responsiveness) 측정 지표입니다 [1-3]. 이 지표는 사용자가 웹페이지와 처음 상호작용(클릭, 탭, 키보드 입력 등)한 시점부터 브라우저가 다음 프레임을 시각적으로 렌더링할 때까지 걸리는 전체 지연 시간을 측정합니다 [2, 4]. 일반적으로 INP가 200ms 이하일 때 '우수(Good)'로 평가되며, 500ms를 초과하면 사용자 경험을 크게 저하시키는 '나쁨(Poor)' 상태로 간주되어 SEO 순위 하락 및 이탈률 증가를 유발합니다 [5-7].
|
|
|
|
## 📖 Core Content
|
|
* **INP의 구성 요소 및 측정 방식:**
|
|
INP는 단순히 입력 지연 시간만 측정하던 이전의 FID와 달리, 실제 사용자가 체감하는 전체 상호작용 지연을 측정합니다 [2, 8, 9]. INP는 크게 3가지 요소인 '입력 지연(Input Delay) + 처리 시간(Processing Time) + 프레임 표시 지연(Presentation Delay)'의 합으로 계산됩니다 [10, 11].
|
|
* **INP 저하(성능 병목)의 주요 원인:**
|
|
INP 점수를 악화시키는 주된 요인은 메인 스레드를 차단하는 50ms 이상의 긴 JavaScript 작업(Long tasks), 과도한 서드파티 스크립트 실행, 복잡한 프레임워크 리렌더링(React, Vue 등), 무거운 애니메이션입니다 [10-12]. 특히 React 기반의 SPA(Single Page Application)에서는 무거운 JS 번들 다운로드와 브라우저 메인 스레드를 묶어두는 '하이드레이션(Hydration) 지연' 및 불필요한 컴포넌트 리렌더링이 높은 INP의 핵심 원인으로 지목됩니다 [13-15].
|
|
* **비즈니스 및 SEO에 미치는 영향:**
|
|
INP는 Google의 페이지 경험(Page Experience) 랭킹 신호의 주요 지표로 40%의 가중치를 갖습니다 [16, 17]. INP가 나쁘면(예: 150ms 초과) 응답성 부족으로 인해 사용자 참여가 23% 감소하고 크롤링 우선순위가 떨어질 수 있습니다 [18]. 반면 INP를 300ms에서 150ms로 단축하면 전환율 12% 증가, 이탈률 15% 감소, 수익 10% 증가와 같은 실질적인 비즈니스 성장 및 SEO 순위 상승 효과를 얻을 수 있습니다 [19, 20].
|
|
* **핵심 최적화 전략:**
|
|
* **JavaScript 실행 시간 단축 및 작업 분할:** 50ms를 초과하는 긴 작업은 `setTimeout` 등을 활용해 브라우저가 UI를 업데이트할 수 있도록 작게 쪼개야 하며(Chunking), 중요하지 않은 스크립트는 실행을 지연시켜야 합니다 [4, 21-23].
|
|
* **Web Workers 및 이벤트 핸들러 최적화:** 무거운 연산은 Web Workers를 통해 메인 스레드 외부로 오프로드(Offload)하고, 이벤트 핸들러(스크롤, 검색 등)에는 디바운스(Debounce)와 스로틀(Throttle)을 적용해 실행 빈도를 제한합니다 [4, 12, 24]. 또한, 비동기 작업에는 `requestIdleCallback` 패턴을 사용하는 것이 좋습니다 [25, 26].
|
|
* **React 성능 튜닝:** 불필요한 렌더링을 막기 위해 `React.memo`, `useMemo`, `useCallback`을 적극 활용하고, 부분 하이드레이션(Partial Hydration) 또는 점진적 하이드레이션을 통해 메인 스레드 부하를 최소화해야 합니다 [13, 27].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[First Input Delay (FID)]], [[Core Web Vitals]], [[Largest Contentful Paint (LCP)]], [[Cumulative Layout Shift (CLS)]], [[Single Page Applications (SPA)]], [[JavaScript Optimization]], [[Hydration]]
|
|
- **Projects/Contexts:** [[Google Page Experience 2025]], [[React SEO Optimization]], [[Web Performance Optimization Checklist]]
|
|
- **Contradictions/Notes:** 소스 6에서는 INP의 '우수(Good)' 판단 임계값을 150ms 미만(< 150ms)으로 더 엄격하게 제시하고 있으나 [28], 소스 12, 14, 15, 23을 포함한 대다수의 다른 출처에서는 200ms 이하(≤ 200ms)를 표준 '우수(Good)' 기준으로 규정하고 있어 문서 간 세부 기준치에 약간의 차이가 존재합니다 [5, 9, 17, 29].
|
|
|
|
---
|
|
*Last updated: 2026-04-26* |