32 lines
2.6 KiB
Markdown
32 lines
2.6 KiB
Markdown
---
|
|
id: PERF-CWV-CORE-001
|
|
category: Dev
|
|
confidence_score: 1.0
|
|
tags: [[Core-Web-Vitals|[Core-Web-Vitals]], performance, lcp, inp, cls, seo, user-experience, rum]
|
|
last_reinforced: 2026-04-26
|
|
---
|
|
|
|
# [[Core Web Vitals|Core Web Vitals]] Metrics (코어 웹 바이탈 지표)
|
|
|
|
## 📌 한 줄 통찰 (The Karpathy Summary)
|
|
> "기술적 성능 지표를 사용자 체감 경험과 비즈니스 수익으로 연결하고, 구글이 정의한 세 가지 핵심 축(로딩, 반응성, 안정성)을 통해 웹사이트의 품질을 객관적으로 증명하라" — 실제 사용자 데이터(RUM)를 기반으로 한 현대 웹 성능의 표준 가시성 프레임워크.
|
|
|
|
## 📖 구조화된 지식 (Synthesized Content)
|
|
- **추출된 패턴:** "User-Centric Performance [[Quantization|Quantization]]" — 단순한 서버 응답 속도를 넘어, 사용자가 언제 콘텐츠를 보는지(LCP), 언제 상호작용할 수 있는지(INP), 화면이 얼마나 안정적인지(CLS)를 수치화하는 패턴.
|
|
- **3대 핵심 지표:**
|
|
- **LCP (Largest Contentful Paint):** 가장 큰 시각적 요소가 렌더링되는 시간. (2.5초 이내 우수)
|
|
- **INP (Interaction to Next Paint):** 사용자 입력 후 다음 프레임이 그려질 때까지의 지연 시간. (200ms 이내 우수, FID를 대체)
|
|
- **CLS (Cumulative Layout [[Shift|Shift]]):** 예기치 않은 레이아웃 이동 측정. (0.08~0.1 미만 우수)
|
|
- **측정 및 개선 루프:**
|
|
- **Synthetic [[Testing|Testing]]:** [[Lighthouse|Lighthouse]], [[PageSpeed Insights|PageSpeed Insights]]를 통한 개발 환경 검증.
|
|
- **Field Data (RUM):** Sentry, Web-Vitals.js를 활용하여 실제 다양한 기기/네트워크 환경의 사용자 데이터 수집.
|
|
- **의의:** 검색 엔진 랭킹(SEO) 향상과 더불어 이탈률 감소 및 구매 전환율 상승이라는 실질적 비즈니스 가치 창출.
|
|
|
|
## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
|
|
- **과거 데이터와의 충돌:** 과거에는 FID(First Input Delay)가 핵심이었으나, 2024년 3월부터 모든 입력의 지연을 측정하는 INP 정책으로 전격 교체됨. 또한 CLS 기준이 0.1에서 0.08로 강화되는 추세임.
|
|
- **정책 변화:** Antigravity 프로젝트는 모든 웹 자산 배포 시 Core Web Vitals 'Good' 등급 달성을 필수 배포 조건(Quality Gate)으로 설정하며, 성능 미달 시 자동 롤백 정책을 적용함.
|
|
|
|
## 🔗 지식 연결 (Graph)
|
|
- [[Cumulative-Layout-Shift-CLS|Cumulative-Layout-Shift-CLS]], Web-Performance-[[Optimization|Optimization]], SEO-Foundations, React-Performance-Optimization
|
|
- **Raw Source:** 00_Raw/Core Web Vitals.md
|