FCP는 사용자가 화면에 실제 콘텐츠가 등장했다고 알 수 있는 첫 시점입니다. 페이지의 주 콘텐츠가 다 보였는지를 말해주지는 않습니다.
데모는 빈 페이지에 제목 한 줄이 나타나는 순간을 강조하고, 뒤이어 큰 카드가 채워지는 것을 보여줍니다. FCP와 LCP를 함께 보면 첫 신호와 주 콘텐츠 사이의 간격을 알 수 있습니다.
언제 쓰나
초기 빈 화면이 길어 보일 때 LCP와 함께 확인합니다.
첫 콘텐츠 표시 시간
First Contentful Paint
빈 화면에서 첫 텍스트나 이미지가 보이는 순간입니다.
···
<div class="atlas"><div class="head"><b>FCP · first visible pixel</b><span class="pulse"></span></div><div class="stage"><div class="fcp-window box"><div class="fcp-chrome"><i></i><i></i><i></i></div><div class="fcp-title" id="fcp-title">Welcome back</div><div class="fcp-card" id="fcp-card"><i></i><i></i></div></div><div class="fcp-status mono" id="fcp-status">blank frame</div></div></div>.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.fcp-window{height:80%;overflow:hidden}.fcp-chrome{height:22px;display:flex;gap:4px;align-items:center;padding-left:8px;border-bottom:1px solid var(--line)}.fcp-chrome i{height:5px;width:5px;background:var(--muted);border-radius:50%}.fcp-title{padding:10px 12px 4px;font-weight:700;opacity:0}.fcp-card{margin:4px 12px;height:40%;border-radius:5px;background:color-mix(in srgb,var(--accent) 15%,var(--bg));padding:8px;opacity:0}.fcp-card i{display:block;height:6px;width:70%;margin:6px;background:var(--line);border-radius:4px}.fcp-card i+ i{width:45%}.fcp-title.on,.fcp-card.on{opacity:1;transition:opacity .3s}.fcp-status{text-align:right;color:var(--accent);margin-top:5px}let phase=0;function tick(){document.getElementById('fcp-title').classList.toggle('on',phase>=1);document.getElementById('fcp-card').classList.toggle('on',phase>=2);document.getElementById('fcp-status').textContent=['blank frame','FCP: text appears','larger content follows'][phase];phase=(phase+1)%3}tick();setInterval(tick,850)