34 lines
2.8 KiB
Markdown
34 lines
2.8 KiB
Markdown
---
|
|
id: PERF-CWV-INP-001
|
|
category: "10_Wiki/💡 Topics/AI"
|
|
confidence_score: 1.0
|
|
tags: [core-web-vitals, inp, performance, responsiveness, interaction, main-thread, frontend-optimization]
|
|
last_reinforced: 2026-04-26
|
|
---
|
|
|
|
# Interaction to Next Paint: INP (상호작용 다음 페인트까지의 지연 시간)
|
|
|
|
## 📌 한 줄 통찰 (The Karpathy Summary)
|
|
> "단 한 번의 빠른 반응이 아니라, 사용자가 페이지를 떠날 때까지 수행하는 모든 상호작용의 지연을 감시하고, 0.2초 이내의 즉각적인 응답성을 일관되게 보장하라" — FID를 대체하여 웹사이트의 전체적인 반응성을 측정하는 2024년 이후 Core Web Vitals의 핵심 지표.
|
|
|
|
## 📖 구조화된 지식 (Synthesized Content)
|
|
- **추출된 패턴:** "Continuous Responsiveness and Task Yielding" — 긴 작업을 작게 쪼개어 브라우저가 사용자 입력과 렌더링 업데이트 사이에 숨 쉴 틈(Yield)을 주는 패턴.
|
|
- **INP의 핵심 메커니즘:**
|
|
- **Input Delay:** 사용자 입력 후 이벤트 핸들러가 실행되기 전까지의 대기 시간 (주로 메인 스레드 점유로 발생).
|
|
- **Processing Time:** 이벤트 핸들러 자체의 실행 시간.
|
|
- **Presentation Delay:** 이벤트 처리 후 실제 화면에 변경 사항이 그려지기까지의 시간.
|
|
- **주요 최적화 전략:**
|
|
- **Breaking Up Long Tasks:** 50ms 이상의 무거운 동기 작업을 `scheduler.yield()`나 `setTimeout`으로 분할.
|
|
- **Web Workers:** 복잡한 연산을 메인 스레드 밖으로 오프로드.
|
|
- **Optimization of Third-party Scripts:** 상호작용을 저해하는 광고/분석 스크립트의 실행 지연.
|
|
- **Event Debouncing/Throttling:** 잦은 이벤트 발생을 제한하여 렌더링 부하 감소.
|
|
- **의의:** 사용자의 입력에 즉각적으로 반응하는 웹사이트를 통해 심리적 마찰을 줄이고 비즈니스 전환율을 높임.
|
|
|
|
## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
|
|
- **과거 데이터와의 충돌:** 과거 FID는 첫 번째 상호작용의 지연만 측정했으나, INP 정책은 '전체 세션 중 가장 긴 지연 시간'을 측정 정책으로 삼아 훨씬 엄격한 최적화를 요구함.
|
|
- **정책 변화:** Antigravity 프로젝트는 모든 동적 리스트 렌더링 시 가상화(Virtualization) 적용을 의무화하며, 100ms 이상의 메인 스레드 차단 작업 발생 시 빌드 경고 정책을 시행함.
|
|
|
|
## 🔗 지식 연결 (Graph)
|
|
- [[Core-Web-Vitals-Metrics|Core-Web-Vitals-Metrics]], [[JavaScript-Optimization-Patterns|JavaScript-Optimization-Patterns]], [[Google-Page-Experience-2025-Update|Google-Page-Experience-2025-Update]], [[Frontend-Performance-Optimization-Guide|Frontend-Performance-Optimization-Guide]]
|
|
- **Raw Source:** 00_Raw/INP (Interaction to Next Paint).md, 00_Raw/Interaction to Next Paint (INP).md
|