FCP란? 홈페이지에서 첫 번째 콘텐츠가 화면에 나타나는 시간을 쉽게 이해하기
FCP는 텍스트·이미지 등 의미 있는 콘텐츠가 처음 화면에 나타나는 시점입니다. TTFB·LCP와의 차이, CSS·JS·웹폰트·SSR/CSR, RUM·점검 순서까지 초보 기준으로 정리합니다.
흰 화면에서 벗어나기
접속 후 한동안 빈 화면만 보이다 로고·제목이 나타나면 「페이지가 열리고 있구나」라고 느끼기 시작합니다. FCP(First Contentful Paint)는 텍스트·이미지·SVG 등 의미 있는 콘텐츠가 처음 화면에 그려진 시점을 측정합니다. 공연 무대가 어둡다가 첫 조명과 배우가 등장한 순간과 비슷합니다 — 전체는 아니지만 「시작됐다」는 신호입니다. 배경색만 바뀌는 것은 보통 콘텐츠로 보지 않고, 로딩 스피너가 빨리 떠도 실제 상품 정보가 늦으면 체감은 여전히 느릴 수 있습니다.
TTFB · LCP · 다른 지표와의 자리
TTFB = 서버 첫 응답, FCP = 그 뒤 브라우저가 첫 콘텐츠를 그릴 때까지, LCP = 주요한 큰 콘텐츠입니다. TTFB가 느리면 FCP도 밀릴 수 있지만, TTFB가 빨라도 CSS·JS·폰트 때문에 FCP만 나쁠 수 있습니다. FCP만 빠르고 LCP가 느리면 「열리긴 하는데 핵심이 없다」는 느낌입니다. INP·CLS와도 별개 축입니다. Speed Index는 「화면이 전반적으로 얼마나 빨리 채워지는가」에 가깝고 FCP와는 다릅니다.
요청 → TTFB(첫 바이트) → HTML/CSS/JS 처리 → FCP(첫 콘텐츠) → LCP(주요 큰 콘텐츠) → INP(조작 반응) · CLS(화면 안정성) FCP 빠름 ≠ 사이트 전체 빠름 · 의미 없는 작은 글자로 숫자만 줄이지 말 것
느려지는 원인 · CSS · JS · 폰트
대표 원인: 느린 서버 응답, Render-Blocking CSS, 초기 JavaScript, 웹폰트, 복잡한 초기 화면, 외부 리소스. Critical CSS는 첫 Viewport에 필요한 스타일만 우선하는 개념이며, 전부 HTML에 넣으면 파일이 비대해지고 캐시에도 불리할 수 있습니다. defer/async는 스크립트 특성에 맞게 — 무조건 defer는 위험합니다. CSR처럼 JS로 화면을 만들면 JS 준비 전까지 FCP가 늦을 수 있고, SSR/SSG가 도움이 될 수 있으나 서버 생성·캐시 설계에 따라 달라집니다. FOIT는 폰트 대기 중 글자 숨김, FOUT는 대체 글꼴 후 교체 — 빠른 표시와 CLS 사이에서 균형이 필요합니다. Skeleton·로딩 문구는 「멈춘 게 아니다」 피드백일 뿐 실제 콘텐츠 시간을 줄이지 않습니다.
외부 의존 · 캐시 · 측정
초기 화면에 필요한 외부 CSS/JS/폰트·API가 많으면 하나만 느려도 FCP가 밀립니다. 광고·분석 등 Third-Party는 우선순위를 낮출 수 있습니다. CDN·브라우저 캐시·Service Worker는 재방문에 도움이 되지만, 첫 방문·광고 유입 사용자도 고려하세요. Lighthouse와 RUM·합성 숫자는 다를 수 있고, 모바일·지역별 분포·평균만이 아닌 백분위가 중요합니다. 점검 순서: TTFB → HTML에 초기 콘텐츠 여부 → CSS → JS → 웹폰트. 배포 후 급증이면 CI/CD 변경(거대 CSS 번들·새 라이브러리)을 대조합니다.
자주 묻는 질문
FCP란?
First Contentful Paint — 텍스트·이미지 등 실제 콘텐츠가 처음 화면에 표시되는 시점입니다.
LCP와 차이는?
FCP는 「처음 하나라도」, LCP는 「주요한 큰 콘텐츠」가 보이는 시점입니다.
TTFB와 차이는?
TTFB는 서버 첫 응답 도착, FCP는 그 뒤 브라우저가 첫 콘텐츠를 그리기까지입니다.
FCP만 빠르면 끝인가요?
아닙니다. 작은 로고만 빨리 뜨고 핵심은 늦을 수 있어 LCP 등과 함께 봅니다.
CSS·JS·폰트도?
렌더 차단 CSS, 초기 JS, 웹폰트 대기가 있으면 FCP가 지연될 수 있습니다.
Lab과 Field가 다른 이유는?
Lighthouse는 고정 환경, 실제 사용자는 기기·망·지역이 다양하기 때문입니다.
정리
FCP는 의미 있는 콘텐츠가 화면에 처음 나타나는 시점입니다. TTFB = 서버 첫 응답, FCP = 무언가 처음 보이기까지, LCP = 중요한 큰 콘텐츠. 서버·CSS·JS·폰트·외부 의존·초기 HTML 구조를 점검하세요. 그런데 첫 콘텐츠는 빨리 떴는데 화면 전체가 천천히 채워지는 느낌이 들 때가 있습니다. 보이는 영역이 전반적으로 얼마나 빨리 완성되는지를 보는 지표가 Speed Index(스피드 인덱스)입니다.