브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
FCP란 무엇인가요?
콘텐츠가 포함된 첫 페인트 (FCP)는 사용자가 페이지를 처음 탐색한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링된 시점까지의 시간을 측정합니다. 이 측정항목의 경우 '콘텐츠' 텍스트, 이미지 (배경 이미지 포함), <svg>
요소 또는 흰색이 아닌 <canvas>
요소를 나타냅니다.
이전 이미지에 묘사된 로드 타임라인에서는 두 번째 프레임에서 FCP가 발생합니다. 두 번째 프레임에서 첫 번째 텍스트와 이미지 요소가 화면에 렌더링되기 때문입니다.
일부 콘텐츠는 렌더링되었지만 일부 콘텐츠는 렌더링되지 않았음을 확인할 수 있습니다. 이는 콘텐츠가 포함된 첫 번째 페인트와 최대 콘텐츠 페인트 (LCP)를 구분하는 중요한 차이점으로, 페이지의 주요 콘텐츠의 로드가 완료된 시점을 측정하는 것을 목표로 합니다.
좋은 FCP 점수란 무엇인가요?
만족스러운 사용자 환경을 제공하기 위해 사이트의 첫 콘텐츠 페인트가 1.8초 이하가 되도록 노력해야 합니다. 대부분의 사용자가 이 목표를 달성할 수 있도록 모바일과 데스크톱 기기별로 분류된 페이지 로드의 75번째 백분위수를 측정하는 것이 좋습니다.
<ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다.FCP 측정 방법
FCP는 실험실이나 현장에서 측정할 수 있으며 다음 도구에서 사용할 수 있습니다.
현장 도구
실습 도구
JavaScript에서 FCP 측정
JavaScript로 FCP를 측정하려면 Paint Timing API를 사용하면 됩니다. 다음 예에서는 이름이 first-contentful-paint
인 paint
항목을 수신 대기하고 콘솔에 로깅하는 PerformanceObserver
를 만드는 방법을 보여줍니다.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({type: 'paint', buffered: true});
<ph type="x-smartling-placeholder">
이전 코드 스니��에서 로깅된 first-contentful-paint
항목�� 콘텐츠가 포함된 첫 번째 요소가 페인트된 시점을 알려줍니다. 그러나 경우에 따라 이 항목은 FCP 측정에 유효하지 않습니다.
다음 섹션에는 API에서 보고하는 내용과 측정항목 계산 방법의 차이점이 나와 있습니다.
측정항목과 API의 차이점
- API는 백그라운드 탭에 로드된 페이지에
first-contentful-paint
항목을 전달하지만 FCP를 계산할 때는 이러한 페이지를 무시해야 합니다 (첫 페인트 타이밍은 페이지가 전체 포그라운드에 있는 경우에만 고려해야 함). - 페이지가 뒤로-앞으로 캐시에서 복원될 때 API는
first-contentful-paint
항목을 보고하지 않지만 이러한 경우 사용자가 고유한 페이지 방문으로 경험하므로 FCP를 측정해야 합니다. - API가 교차 출처 iframe의 페인트 타이밍을 보고하지 않을 수도 있지만 FCP를 올바르게 측정하려면 모든 프레임을 고려해야 합니다. 하위 프레임은 API를 사용하여 집계를 위해 상위 프레임에 페인트 타이밍을 보고할 수 있습니다.
- API는 탐색 시작부터 FCP를 측정하지만 사전 렌더링된 페이지의 경우
activationStart
부터 측정해야 합니다. 사용자가 경험하는 FCP 시간에 해당하기 때문입니다.
개발자는 이러한 미묘한 차이를 모두 기억하는 대신 web-vitals
JavaScript 라이브러리를 사용하여 FCP를 측정하여 이러한 차이를 처리할 수 있습니다 (가능한 경우 iframe 문제는 다루지 않음).
import {onFCP} from 'web-vitals';
// Measure and log FCP as soon as it's available.
onFCP(console.log);
JavaScript에서 FCP를 측정하는 방법에 관한 전체 예는 onFCP()
의 소스 코드를 참고하세요.
FCP 개선 방법
특정 사이트의 FCP를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 제안하는 특정 기회 또는 진단에 주의를 기울이면 됩니다.
모든 사이트에서 FCP를 전���적으로 개선하는 방법을 알아보려면 다음 성능 가이드를 참고하세요.
- 렌더링 차단 리소스 제거
- CSS 축소
- 사용하지 않는 CSS 삭제
- 사용하지 않는 JavaScript 삭제하기
- 필수 출처에 사전 연결
- 서버 응답 시간 (TTFB) 단축
- 여러 번의 페이지 리디렉션 피하기
- 주요 요청 미리 로드
- 방대한 네트워크 페이로드 방지
- 효율적인 캐시 정책으로 정적 애셋 제공
- 과도한 DOM 크기 피하기
- 중요한 요청 깊이 최소화
- 웹 글꼴 로드 중에 텍스트가 계속 표시되도록 하기
- 요청 수는 작게 유지하고 전송 크기는 작게
변경 로그
가끔 측정항목을 측정하는 데 사용되는 API에서 버그가 발견되며, 측정항목 자체의 정의에서도 버그가 발견됩니다. 그 결과, 때때로 변경이 이루어져야 하며, 내부 보고서 및 대시보드에서 이러한 변경사항이 개선되거나 회귀로 나타날 수 있습니다.
이를 관리하는 데 도움이 되도록 이러한 측정항목의 구현 또는 정의에 대한 모든 변경사항이 이 변경 로그에 표시됩니다.
이러한 측정항목에 관한 의견이 있으면 web-vitals-feedback Google 그룹에 의견을 보내주세요.