# [[First Contentful Paint (FCP)]]

## 📌 Brief Summary
First Contentful Paint(FCP)는 웹 성능 지표 중 하나로, 사용자의 화면에 첫 번째 텍스트나 이미지가 렌더링되는 데 걸리는 시간을 측정합니다 [1, 2]. 이 지표는 초기 콘텐츠 표시 성능에 집중하며, 지연될 경우 사용자의 사이트 체류 시간과 전반적인 페이지 경험에 부정적인 영향을 미칩니다 [2, 3]. 

## 📖 Core Content
*   **역할 및 측정 기준:** FCP는 화면에 첫 번째 콘텐츠(텍스트 또는 이미지)가 그려지는 시점을 측정하여 사용자가 사이트 로딩을 체감하는 첫 순간을 나타냅니다 [1]. 이는 페이지의 메인 콘텐츠가 표시되는 시점을 측정하는 LCP(Largest Contentful Paint)와는 명확히 구분되는 지표입니다 [2].
*   **임계값 및 비즈니스 영향:** FCP의 권장 임계값은 1.5초 미만 [1] 혹은 1.8초 이하 [4-6]로 정의됩니다. FCP 기준을 충족하지 못하고 지연될 경우, 사용자의 사이트 체류 시간이 9%가량 감소하며 Google의 페이지 경험 점수(Page Experience Score)에도 악영향을 미칩니다 [3].
*   **최적화 전략:** 
    *   기술적 웹 성능 최적화를 위해 중요한(Critical) CSS를 인라인으로 처리하고, 렌더링을 차단하는 리소스를 최소화해야 합니다 [7].
    *   `preconnect`나 `dns-prefetch`와 같은 리소스 힌트를 활용하고 폰트 로딩을 최적화하며 서버 응답 시간을 단축하는 것이 좋습니다 [7].
    *   React 기반의 단일 페이지 애플리케이션(SPA)에서는 서버 사이드 렌더링(SSR)을 도입하여 초기 HTML을 제공함으로써 FCP를 빠르게 달성할 수 있습니다 [8, 9].
    *   또한, 라우트 및 컴포넌트 수준에서의 코드 분할(Code-splitting)과 지연 로딩(Lazy loading)을 적용하면 초기 번들 크기를 줄여 FCP 성능을 향상시킬 수 있습니다 [10, 11].

## 🔗 Knowledge Connections
- **Related Topics:** [[Core Web Vitals]], [[Largest Contentful Paint (LCP)]], [[Server-Side Rendering (SSR)]], [[Render-Blocking Resources]]
- **Projects/Contexts:** [[Google Page Experience 2025]], [[React SEO Optimization]], [[Frontend Performance Optimization]]
- **Contradictions/Notes:** 소스 6은 FCP가 2025년부터 1.5초 미만의 기준을 가진 새로운 Core Web Vitals 지표로 공식 추적된다고 주장합니다 [1, 12]. 반면, 소스 14, 15 및 28에서는 FCP를 보조 메트릭(Supporting metrics)으로 분류하거나 좋은 점수의 기준을 1.8초 이하로 명시하여 기준치에 약간의 의견 차이가 존재합니다 [4-6].

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