# [[Core Web Vitals]]

## 📌 Brief Summary
Core Web Vitals는 웹사이트의 실제 사용자 경험을 객관적으로 측정하기 위해 Google이 설정한 표준화된 성능 지표입니다 [1]. 2025년 기준, 이 지표는 주로 페이지의 로딩 성능을 나타내는 LCP, 상호작용의 반응성을 측정하는 INP, 그리고 시각적 안정성을 평가하는 CLS로 구성됩니다 [1-3]. 이 지표들은 Google의 SEO(검색 엔진 최적화) 순위 알고리즘에 직접적으로 반영되며, 웹사이트의 전환율과 이탈률 등 핵심 비즈니스 성과에 막대한 영향을 미칩니다 [4-7].

## 📖 Core Content
*   **핵심 지표 및 2025년 기준 임계값:**
    *   **LCP (Largest Contentful Paint):** 뷰포트 내에서 가장 큰 콘텐츠 요소(주로 히어로 이미지나 큰 텍스트 블록)가 화면에 표시되는 데 걸리는 시간을 측정합니다 [3, 8, 9]. 사용자가 페이지의 주요 내용을 인식하는 속도를 뜻하며, 일반적으로 2.5초 미만이어야 "좋음(Good)"으로 평가됩니다 [3, 10, 11].
    *   **INP (Interaction to Next Paint):** 2025년에 기존의 FID(First Input Delay)를 공식적으로 대체한 지표로, 클릭이나 탭 등 사용자의 모든 상호작용부터 브라우저가 시각적 피드백(다음 프레임)을 렌더링하기까지의 전체 지연 시간을 포괄적으로 측정합니다 [2, 12, 13]. 일반적으로 200ms 미만을 유지해야 합니다 [10, 11, 13].
    *   **CLS (Cumulative Layout Shift):** 페이지 로드 중 텍스트나 버튼 등이 예기치 않게 이동하는 현상을 측정하여 시각적 안정성을 평가합니다 [8, 14]. 0.1 미만의 점수를 받아야 사용자에게 쾌적한 경험을 제공하는 것으로 간주됩니다 [11, 14, 15].
    *   **FCP (First Contentful Paint):** 첫 번째 텍스트나 이미지가 화면에 그려지는 시점을 측정하여 초기 로딩 체감 속도를 확인합니다 [16].

*   **비즈니스 및 SEO에 미치는 영향:**
    *   Core Web Vitals는 Google의 페이지 경험(Page Experience) 알고리즘에서 약 25-30%의 순위 가중치를 가지는 강력한 SEO 랭킹 요소입니다 [6].
    *   성능이 "나쁨"에서 "좋음"으로 전면 개선될 경우, 평균 전환율이 25% 증가하고 이탈률이 35% 감소하며 사용자당 수익이 30% 향상되는 등 즉각적인 비즈니스 ROI를 창출합니다 [7, 17].
    *   페이지 로드가 1초 지연될 경우 전환율이 최대 7%까지 감소할 수 있으므로 강력한 최적화가 필수적입니다 [5, 18].

*   **성능 최적화 전략 (Optimization Strategies):**
    *   **LCP 최적화:** WebP나 AVIF 같은 차세대 이미지 포맷을 사용하고, 정적 자산에 CDN을 활용하며, 서버 응답 시간(TTFB)을 단축해야 합니다 [8, 14, 19]. React와 같은 프레임워크를 사용할 경우 SSR(Server-Side Rendering)을 도입하여 브라우저에 완성된 HTML을 빠르게 전달해야 합니다 [20, 21].
    *   **INP 최적화:** JavaScript 실행 시간 축소가 가장 중요합니다. 무거운 연산은 Web Workers로 오프로드하고, 메인 스레드를 차단하는 긴 작업(Long Tasks)은 50ms 이하의 작은 단위로 쪼개야 합니다 [12, 13, 22, 23]. 또한, 사용하지 않는 서드파티 스크립트를 제거하고 코드 스플리팅(Code Splitting) 및 지연 로딩(Lazy Loading)을 적용하는 것이 권장됩니다 [24, 25].
    *   **CLS 최적화:** 모든 이미지와 동영상 요소에 명시적인 너비 및 높이(width/height) 속성을 지정하고, 동적 광고나 임베드 콘텐츠가 로드될 공간을 CSS로 미리 확보해야 합니다 [14, 16, 26]. 폰트 로딩 시 텍스트 깜빡임이나 레이아웃 이동을 방지하기 위해 `font-display: swap` 또는 `optional`을 사용하며, 애니메이션 시에는 레이아웃 재계산을 유발하지 않도록 `transform` 속성을 활용합니다 [27-29].

*   **테스트 및 모니터링 도구:**
    *   개별 페이지에 대한 빠른 실험실/필드 데이터 확인 및 최적화 추천을 받기 위해 Google PageSpeed Insights를 사용합니다 [30].
    *   개발 및 디버깅 목적으로는 Chrome DevTools에 내장된 Lighthouse 도구를 활용하여 병목 현상을 파악합니다 [31, 32].
    *   실제 사용자 모니터링(RUM)을 위해서는 Google Search Console의 Core Web Vitals 리포트를 통해 웹사이트 전체의 성능을 지속적으로 추적하고, GTmetrix나 Datadog RUM 등을 함께 활용할 수 있습니다 [32-34].

## 🔗 Knowledge Connections
- **Related Topics:** [[LCP (Largest Contentful Paint)]], [[INP (Interaction to Next Paint)]], [[CLS (Cumulative Layout Shift)]], [[SEO]], [[Web Performance Optimization]], [[Server-Side Rendering (SSR)]]
- **Projects/Contexts:** [[Google Page Experience 2025]], [[React SEO Guide]]
- **Contradictions/Notes:** 2025년 기준 Core Web Vitals의 "좋음(Good)" 임계값과 관련하여 소스 간 의견 충돌이 존재합니다. 대다수의 소스는 기존 기준인 LCP < 2.5초, INP < 200ms, CLS < 0.1을 유지한다고 명시하지만 [1, 3, 10, 11, 13], 일부 소스는 2025년에 기준이 더욱 엄격해져 LCP < 2.0초, INP < 150ms, CLS < 0.08, FCP < 1.5초를 충족해야 한다고 주장합니다 [35].

---
*Last updated: 2026-04-26*