FCP(First Contentful Paint)란? | SEO 용어집

First Contentful Paint(FCP)는 사용자가 페이지를 요청한 순간부터 화면에 첫 번째 콘텐츠(텍스트·이미지·SVG·non-white canvas)가 렌더링되기까지 걸린 시간을 측정하는 지표입니다. '이 페이지가 반응하고 있다'는 것을 사용자에게 처음 보여주는 순간을 나타냅니다.

왜 중요한가

빈 화면을 오래 보는 사용자는 빠르게 이탈합니다. Nielsen Norman Group 조사에 따르면 첫 시각 반응이 1초를 넘기는 순간 사용자의 집중력 유지 확률이 급락합니다. FCP는 현재 공식 Core Web Vitals 지표는 아니지만, Lighthouse 성능 점수의 핵심 구성 요소이며 LCP의 선행 지표입니다. FCP가 느리면 LCP도 절대 좋아질 수 없습니다.

FCP 기준값

평가	FCP
Good (좋음)	≤ 1.8초
Needs Improvement	1.8~3.0초
Poor (나쁨)	> 3.0초

75번째 백분위(p75) 값을 기준으로 평가하며, Chrome User Experience Report(CrUX)에서 실제 사용자 데이터로 수집됩니다.

TTFB·FCP·LCP·INP의 관계

페이지 로딩은 여러 지표가 순차적으로 이어지는 타임라인입니다.

TTFB: 서버가 첫 바이트를 보내기까지의 시간
FCP: 첫 콘텐츠가 그려지기까지의 시간
LCP: 가장 큰 콘텐츠 요소가 그려지기까지의 시간
INP: 사용자 상호작용에 대한 반응 시간

이 순서가 의미하는 것은 TTFB가 느리면 FCP가 느리고, FCP가 느리면 LCP가 느릴 수밖에 없다는 것입니다. 성능 최적화는 '가장 위의 지표부터' 개선해야 합니다.

FCP를 느리게 만드는 요인

느린 TTFB: 서버 응답 자체가 느리면 FCP도 자동으로 느려집니다.

렌더링 차단 리소스(Render-Blocking Resources): <head>에 있는 외부 CSS·동기 JS는 브라우저가 페이지를 렌더링하기 전에 다운로드·실행되어야 합니다. 수가 많거나 크기가 크면 FCP가 지연됩니다.

큰 DOM 크기: 초기 HTML에 수천 개의 요소가 있으면 파싱과 레이아웃에 시간이 걸립니다.

웹폰트 로딩: 커스텀 폰트가 로드되기 전에 FOIT(Flash of Invisible Text)가 발생해 FCP가 느려 보일 수 있습니다.

클라이언트 사이드 렌더링(CSR): React·Vue 앱이 JS 번들을 다운로드·실행한 뒤에야 콘텐츠를 그리면 FCP가 크게 지연됩니다.

개선 방법

TTFB 개선: CDN, 서버 캐싱, DB 최적화. FCP의 근본 개선의 출발점.

렌더링 차단 리소스 제거: async/defer 속성으로 JS 실행을 미룹니다. Critical CSS를 인라인 처리하고 나머지는 비동기 로드합니다.

서버 사이드 렌더링(SSR): Next.js·Astro·Remix 같은 프레임워크로 HTML을 서버에서 미리 생성합니다.

폰트 최적화: font-display: swap으로 폰트 로딩 중에도 기본 폰트로 텍스트를 먼저 보여줍니다. preload로 중요한 폰트만 우선 로드합니다.

JS 번들 축소: Tree shaking, 코드 스플리팅, 필요 없는 라이브러리 제거로 초기 번들 크기를 줄입니다.

이미지 최적화: 첫 화면에 보이는 히어로 이미지는 <link rel="preload">로 우선 로드하고, 포맷은 WebP·AVIF를 사용합니다.

측정 도구

PageSpeed Insights: CrUX 필드 데이터 + 랩 데이터 동시 제공
Lighthouse: 개별 페이지의 상세 진단
Chrome DevTools → Performance: 타임라인상 FCP 표시
web-vitals JS 라이브러리: 자사 서비스에 직접 수집

Sources:

inblog에서 활용하기

inblog는 블로그 포스트를 SSR·SSG로 제공하고 CSS·폰트를 자동 최적화하므로, 블로그 운영자가 별도로 렌더링 차단 리소스를 관리하지 않아도 FCP Good 기준을 기본값으로 충족합니다. 사용자 커스텀 스크립트나 임베드를 추가할 때만 FCP 영향을 점검하면 Core Web Vitals 랭킹 신호가 유지됩니다.

First Contentful Paint (FCP)