FCP
FCP(First Contentful Paint, 최초 콘텐츠 페인트)는 페이지 로딩이 시작된 시점부터 사용자에게 의미 있는 첫 콘텐츠가 화면에 그려질 때까지의 시간이다. “로딩이 시작됐다”를 사용자가 체감하는 바로 그 순간을 수치화한 지표다.
무엇이 “Contentful”인가
빈 배경이 아니라 다음과 같은 실제 콘텐츠가 그려진 순간을 측정한다.
- 텍스트
- 이미지 (배경 이미지 포함)
- SVG
<canvas>요소
기준
Google Web Vitals 가이드라인:
| 상태 | FCP |
|---|---|
| 좋음 | 1.8초 이하 |
| 개선 필요 | 3.0초 이하 |
| 나쁨 | 3.0초 초과 |
FCP vs LCP
FCP는 첫 번째 콘텐츠가 나타난 순간이고, LCP(Largest Contentful Paint)는 가장 큰 콘텐츠가 나타난 순간이다. 제품 설명 이미지나 히어로 배너가 주요 콘텐츠인 페이지에서는 FCP보다 LCP가 사용자 체감에 더 가깝다.
이 글의 원래 노트에도 적혀 있듯: FCP는 초기 DOM 콘텐츠가 렌더링되는 시간은 측정하지만, 페이지에서 가장 큰(일반적으로 더 의미 있는) 콘텐츠를 렌더링하는 시간은 캡쳐하지 못한다.
FCP를 개선하는 방법
- TTFB 단축: 첫 바이트가 빨라야 렌더링도 빨라진다
- 렌더 차단 리소스 제거: 필수 CSS 인라인화, JS 지연 로드
- 폰트 로딩 최적화:
font-display: swap - 임계 경로 CSS: above-the-fold에 필요한 CSS만 우선 적용 → ATF