FCP(First Contentful Paint)는 페이지의 첫 번째 요소가 렌더링되어 사용자의 브라우저에 표시되는 데 걸리는 시간을 측정하는 웹 성능 메트릭입니다.
FCP가 Core Web Vitals 지표는 아니지만 사용자 경험에 관심이 있다면 이를 무시해서는 안 됩니다.
왜? 때문에 빠른 FCP는 사용자가 콘텐츠가 로드되는 것을 볼 수 있고 콘텐츠가 얼마나 빠르게 콘텐츠에 만족하는지 알 수 있음을 의미합니다. 그리고 사용자가 만족할수록 페이지에 머물고 콘텐츠를 탐색하고 전환하기를 열망합니다.
더 이상 고민하지 않고 웹 사이트 방문자에게 긍정적인 경험을 제공하기 위해 FCP 점수를 측정하고 개선하는 방법을 배우십시오.
First Contentful Paint(FCP)는 무엇을 의미합니까?
FCP(First Contentful Paint)는 브라우저에서 로드 중인 페이지에서 첫 번째 콘텐츠 요소를 렌더링하는 데 걸리는 시간을 계산하는 사용자 중심 메트릭입니다.
즉, FCP는 페이지 로딩이 시작된 시점과 첫 번째 콘텐츠 요소가 사용자 브라우저에 표시되는 시점 사이의 시간을 추적합니다.
더 정확하게 말하자면, FCP는 첫 번째 이미지를 렌더링하는 데 걸리는 시간을 측정합니다. 문서 객체 모델 (DOM) 다음과 같은 요소:
- 본문,
- 이미지(배경 이미지 포함)
- 백인이 아닌 요소 또는
- 요소.
FCP는 실제 사용자가 페이지 로드를 인식하는 방법을 측정하고 사용자가 페이지에 대해 갖는 첫인상을 결정하므로 UX 관점에서 중요한 측정 항목입니다.
예를 들어 사용자가 기본 배경만 보고 페이지가 로드될 때까지 너무 오래 기다린다고 상상해 보십시오.
사용자가 짜증을 내고 페이지를 나가고 싶을 때까지 '너무 긴' 기간은 얼마입니까? 충분히 길면 사용자가 이미 지연을 알아차릴 수 있습니다.
Fast FCP는 백그라운드에서 '뭔가'가 발생하고 있음을 나타냅니다. 사용자의 경우 화면에 렌더링되는 첫 번째 요소는 다음을 반영합니다.
- 페이지가 올바르게 작동하고 있으며
- 페이지에 사용자가 더 탐색하고 상호 작용할 수 있는 일부 콘텐츠가 있습니다.
그런 관점에서 FCP는 무시해서는 안 되는 지표입니다.
FCP를 측정하는 방법?
FCP(First Contentful Paint)는 다음을 기반으로 분석할 수 있습니다. 현장 및 실험실 데이터.
편향되지 않은 FCP 결과를 보장하기 위해 성능을 측정하는 이 두 가지 방법을 결합할 수 있습니다.
실험실 도구
랩 데이터를 사용하면 사전 정의된 설정으로 테스트 환경에서 FCP 점수를 측정할 수 있습니다.
다음 도구는 실험실에서 측정된 FCP를 추적하는 데 도움이 될 수 있습니다.
Chrome DevTools
FCP를 측정하려면 Chrome DevTools, '실적' 섹션을 열고 '새로고침' 버튼을 클릭하면 도구에서 페이지를 분석할 수 있습니다.
페이지 로드 타임라인에서 정확한 FCP를 찾으려면:
- '타이밍' 섹션으로 이동하거나
- 기본 Chrome DevTools 탐색 표시줄 아래에 있는 '웹 바이탈'이 포함된 상자를 선택하고 타임라인의 '웹 바이탈' 섹션으로 이동합니다.
Lighthouse
FCP 점수를 측정하려면 Lighthouse, Chrome DevTools로 이동하고 'Lighthouse' 탭을 열어 성능 감사를 실행합니다.
Lighthouse는 데이터를 수집하고 '지표' 섹션에서 FCP 점수를 요약한 보고서를 생성합니다.
또한 Lighthouse는 더 나은 FCP를 위해 개선할 수 있는 사항에 대한 구체적인 제안을 제공합니다. 이를 보려면 '기회' 및 '진단' 섹션 위의 FCP에 대한 결과를 필터링하기만 하면 됩니다.
현장 도구
더 나은 사용자 경험을 위해 FCP 점수를 향상시키기 위해 필드 데이터는 실제 사용자가 웹에서 웹 사이트와 상호 작용하는 방식을 보여주기 때문에 귀중한 정보 소스입니다.
중요한 것은 구글의 필드 데이터가 크롬 사용자 경험 보고서(CrUX)를 기반으로 한다는 것입니다. "Google 검색에서 페이지 경험 순위 요소를 알리는 데 사용됩니다." 즉, CrUX에서 수집된 실제 사용자 데이터를 추적하고 최적화하면 페이지 성능에 대한 Google의 평가에 직접적인 영향을 미칠 수 있습니다.
다음 도구는 현장 데이터를 기반으로 FCP를 추적하는 데 도움이 될 수 있습니다.
PageSpeed 인사이트
PageSpeed 인사이트 Lighthouse와 CrUX의 실험실 데이터와 현장 데이터를 각각 결합합니다.
PageSpeed Insights를 사용하여 FCP를 측정하려면 도구의 검색창에 분석하려는 URL을 삽입하기만 하면 됩니다.
'측정항목' 섹션에서 볼 수 있는 Lighthouse 실험실 데이터를 제외하고 PageSpeed Insights를 사용하면 휴대기기와 데스크톱 기기 모두에서 실제 사용자가 분석된 페이지를 어떻게 경험하는지 확인할 수 있습니다.
또한 Lighthouse와 마찬가지로 PageSpeed Insights는 '기회' 및 '진단' 섹션에서 FCP 개선에 대한 자세한 권장 사항을 제공합니다.
Chrome 사용자 환경 보고서
Chrome 사용자 경험 보고서(CrUX)는 실제 Chrome 사용자가 웹에서 웹사이트를 경험하는 방식을 나타냅니다.
웹사이트의 CrUX 데이터에 액세스하는 방법에는 여러 가지가 있습니다.
- CrUX API를 사용하세요. API에 대한 경험이 없는 경우 개발자에게 문의하거나 다음을 따르십시오. CrUX API에 대한 공식 Google 문서.
- 다음을 사용하여 Looker Studio CrUX 대시보드를 생성합니다. 기성품 템플릿. (이 옵션은 초보자에게 친숙하지만 세분화된 데이터를 제공하지 않습니다.
- CrUX 데이터 세트 쿼리 Google BigQuery를 사용합니다.
자바 스크립트 API
JavaScript 사용 경험이 있는 경우 다음을 사용할 수 있습니다. 페인트 타이밍 API 페이지 로드에서 FCP를 캡처합니다.
그러나, 실제 FCP 메트릭이 계산되는 방식과 API가 반영하는 내용은 다를 수 있습니다.. 그렇기 때문에 불필요한 혼동을 피하기 위해 Google은 웹 바이탈 JavaScript 라이브러리 FCP 측정용.
그러나 기억하십시오. 웹 바이탈 라이브러리에도 한계가 있습니다.. 예를 들어 JavaScript에서 원본 간 iframe을 측정하는 것은 불가능하지만 FCP를 계산하려면 모든 iframe을 측정할 수 있어야 합니다.
이상적인 First Contentful Paint 점수는 무엇입니까?
FCP는 페이지의 첫 번째 요소가 렌더링되고 화면에 표시되는 데 걸리는 시간을 측정하므로 점수가 낮을수록 더 좋은 것이므로 웹사이트 방문자에게 긍정적인 브라우징 경험을 제공합니다.
그 뜻은 1.8초 이하의 FCP 점수를 목표로 해야 합니다. 더 정확히 말하면 Google은 전체 페이지 조회수의 1.8%에 대해 75초 이하의 FCP 점수를 갖도록 권장합니다.
대부분의 사용자에 대해 이 목표를 달성하고 있는지 확인하기 위해 측정할 수 있는 좋은 임계값은 75 번째 백분위 수 모바일 및 데스크톱 장치에 걸쳐 세분화된 페이지 로드.
출처 :
웹 개발
첫 번째 만족스러운 페인트의 임계값
FCP 점수를 더 잘 이해하려면 Google에서 개발한 기준을 따라야 합니다.
각 FCP 임계값은 다른 색상으로 표시되어 다양한 도구를 사용하여 점수를 쉽게 해석할 수 있습니다.
다음은 FCP 값에 대해 지정된 정확한 임계값입니다.
| FCP 시간 | 점수를 분석하는 방법 |
| 0-1.8 초 | 좋음(녹색) |
| 1.8-3 초 | 개선 필요(주황색) |
| 3 초 이상 | 나쁨(빨간색) |
FCP 점수를 결정하기 위해 Google은 페이지의 결과를 실제 웹사이트의 데이터와 비교합니다. HTTP 아카이브.
높은 First Contentful Paint의 원인은 무엇입니까?
FCP(First Contentful Paint) 점수는 페이지 로드 시작 시 리소스를 로드하고 렌더링하는 속도에 기여하는 다양한 요인에 의해 부정적인 영향을 받을 수 있습니다.
그러나, 높은 FCP 점수의 가장 일반적인 원인, 당신은 찾을 수 있습니다 :
- 느린 서버 응답 시간,
- 렌더링 차단 CSS 및 JavaScript 리소스,
- 폴드 위의 게으른 로딩,
- 과도한 DOM 크기
- 느린 글꼴 로딩 시간.
불량 FCP에 기여할 수 있는 측면을 이해하는 것이 중요하지만 FCP 점수를 분석하고 문제의 잠재적 원인을 식별하는 것이 전투의 절반임을 기억하십시오.
왜? 문제에 대한 심층 진단만이 더 나은 로드 속도와 사용자 경험을 위해 FCP를 효율적으로 최적화하는 데 도움이 될 수 있기 때문입니다.
따라서 FCP 최적화에 대해 자세히 살펴보겠습니다.
First Contentful Paint를 개선하는 방법은 무엇입니까?
우선 '기회' 및 '진단' 섹션의 Lighthouse 성능 감사에 포함된 특정 FCP 권장 사항을 사용할 수 있습니다.
반면에 더 나은 FCP 점수를 위해 추가로 최적화할 필요가 없는 측면이 무엇인지 알고 싶을 수도 있습니다. Lighthouse의 '통과된 감사' 섹션에서 이 정보를 찾을 수 있습니다.
그러나 일반적으로 따르면 Google의 공식 문서, 모든 웹사이트에 대해 FCP를 개선하는 여러 가지 방법이 있습니다. 다이빙하자.
| 추천 | 실행 계획 |
| 렌더링 차단 리소스 제거 | 중요한 CSS 및 JS를 인라인으로 제공하고, 중요하지 않은 리소스를 연기하고, 사용하지 않는 리소스를 제거하여 페이지의 첫 번째 페인트를 차단하는 리소스를 최적화합니다. |
| 사용하지 않는 CSS 및 JavaScript 축소 또는 제거 | 사용하지 않는 CSS 축소 과 자바스크립트 줄이기 예를 들어 중요하지 않은 CSS를 연기하거나 코드 분할을 사용하여 네트워크 활동에 의해 소비되는 리소스를 최소화합니다. |
| 서버 응답 시간 단축(TTFB) | TTFB(Time to First Byte) 최적화 예를 들어 CDN 호스팅 및 서비스 작업자를 사용하여. |
| 여러 페이지 리디렉션 방지 | 가능한 방지를 위해 여러 리디렉션 루프 및 체인을 피하십시오. 리디렉션 오류 페이지를 로드하기 전에 추가 지연이 발생합니다. |
| 키 요청 미리 로드 | 다음을 사용하여 페이지 로드에서 나중에 요청된 리소스 가져오기의 우선순위를 지정합니다. . |
| 필수 오리진에 사전 연결 | preconnect 또는 dns-prefetch 리소스 힌트를 추가하여 중요한 타사 원본에 대한 초기 연결을 설정합니다. |
| 페이로드 크기를 작게 유지 | 필요할 때까지 요청을 연기하거나, 캐싱하거나, JPEG 또는 PNG 대신 WebP 이미지를 사용하여 대규모 네트워크 페이로드를 피하세요. |
| 캐싱을 사용하여 정적 자산 제공 | Cache-Control HTTP 응답 헤더를 반환하도록 서버를 설정하여 페이지 반복 방문 속도를 높이도록 HTTP 캐싱을 구성합니다. |
| 과도한 DOM 크기 피하기 | 사용하지 않는 DOM 노드를 제거하고 필요할 때만 새 노드를 만드십시오. 이미 큰 DOM 트리가 있는 경우 CSS 선택기를 단순화하십시오. |
| 중요한 요청 깊이 최소화 | 중요한 리소스의 수를 줄이고, 로드 순서를 최적화하고, async 또는 defer 속성 사용을 고려하고, 중요한 바이트 수를 최적화하여 다운로드 시간을 줄이십시오. |
| 웹폰트 로드 중에 텍스트가 계속 표시되도록 합니다. | 글꼴이 로드되는 동안 사용자에게 텍스트가 표시되는지 확인합니다. font-display:를 포함하여 보이지 않는 텍스트(FOIT)가 번쩍이는 것을 방지하십시오. @font-face 스타일을 바꾸십시오. |
| 요청 수 및 페이로드 크기 최소화 | 이미지와 글꼴을 최적화하고, GIF를 동영상으로 교체하고, 타사 리소스를 최적화하고, 렌더링 차단 CSS 및 JS 리소스를 관리하세요. |
보시다시피 Google에서 FCP 점수를 최적화하기 위해 공식적으로 권장하는 수많은 방법이 있습니다.
그러나 모든 웹사이트는 고유하므로 특정 성능 문제에 대한 전문가 분석만이 문제의 실제 원인을 파악하고 FCP 점수를 향상시킬 수 있습니다.
그렇기 때문에 최적화 프로세스를 직접 진행하고 싶지 않은 경우 당사에서 처리해 드릴 수 있습니다.
다음 단계
지금 할 수 있는 작업은 다음과 같습니다.
- 저희에게 연락하십시오.
- 성능 문제를 처리하기 위해 맞춤형 계획을 받으십시오.
- 전환하는 유기적 트래픽을 즐기십시오!
아직도 우리에게 전화를 끊을 확신이 없습니까? 우리의 웹 성능 서비스 웹 사이트 속도를 높이고 인지되는 로드 속도를 개선하는 데 도움이 될 수 있습니다.
첫 번째 콘텐츠가 있는 페인트와 다른 웹 성능 메트릭 비교
First Contentful Paint는 페이지의 요소가 화면에 렌더링되고 로드되는 속도를 측정하는 유일한 메트릭이 아닙니다.
그 때문에 FCP는 종종 다른 사용자 중심 성능 지표, 페이지 성능의 다양한 측면을 측정하지만.
FCP를 자세히 살펴보고 밀접하게 관련된 다른 메트릭과 비교해 봅시다.
첫 번째 콘텐츠 페인트 대 최대 콘텐츠 페인트
FCP(First Contentful Paint)는 페이지의 첫 번째 요소가 렌더링되는 시점을 측정하는 반면 LCP(Largest Contentful Paint)는 페이지에서 가장 큰 요소가 렌더링되는 데 걸리는 시간을 계산합니다.
여기서 기억해야 할 중요한 점은 페이지에서 처음 로드된 요소가 가장 클 필요는 없다는 것입니다.
또 다른 중요한 차이점은 LCP가 핵심 웹 바이탈 — Google 순위 요인으로 확인되었습니다.
이 Core Web Vitals 지표에 대한 자세한 내용은 다음을 참조하십시오. 가장 큰 콘텐츠 페인트 (LCP) 중요한 이유와 최적화 방법을 알아보려면 기사를 참조하십시오.
첫 번째 만족스러운 페인트와 첫 번째 의미 있는 페인트
페이지에서 첫 번째 요소가 렌더링되는 시점을 측정하는 FCP(First Contentful Paint)와 달리 FMP(First Meaningful Paint)는 페이지의 스크롤 없이 볼 수 있는 기본 콘텐츠가 표시되는 시점을 계산합니다.
구글에 따르면, FCP와 FMP는 페이지의 첫 번째 렌더링 요소가 접힌 부분 위의 콘텐츠를 구성할 때 같을 수 있습니다.
반면 FCP는 기본적으로 콘텐츠를 측정하지 않기 때문에 스크롤 없이 볼 수 있는 콘텐츠가 iframe 내에 있는 경우 FCP와 FMP는 다릅니다.
그러나 중요한 것은 FMP는 Lighthouse 6.0 버전 이후로 더 이상 사용되지 않으며 Google은 대신 LCP를 사용할 것을 권장합니다.
FMP(First Meaningful Paint)는 Lighthouse 6.0에서 더 이상 사용되지 않습니다. 실제로 FMP는 페이지 로드의 작은 차이에 지나치게 민감하여 일관성 없는(바이모달) 결과를 초래했습니다. 또한 메트릭의 정의는 브라우저별 구현 세부 정보에 의존하므로 모든 웹 브라우저에서 표준화하거나 구현할 수 없습니다. 앞으로 사용을 고려하십시오. 가장 큰 내용의 페인트 대신.
출처 :
크롬 개발자
첫 번째 콘텐츠가 있는 페인트 대 첫 번째 페인트
FCP(First Contentful Paint)와 FP(First Paint)는 동일해 보이지만 페이지의 인식된 로드 속도의 서로 다른 측면을 측정하므로 서로 바꿔서 사용해서는 안 됩니다.
FP는 기본 배경색 변경과 같은 사소한 변화를 고려하여 첫 번째 픽셀이 화면에 렌더링되는 시점을 계산합니다.
반면에 FCP는 텍스트나 이미지와 같은 첫 번째 DOM 요소가 이미 렌더링되는 시간을 측정합니다.
사용자에게 긍정적인 사용자 경험을 제공하기 위해 FCP와 FP는 동시에 일어나야 사용자가 딜레이를 느끼지 않는다.
첫 번째 콘텐츠가 있는 페인트 대 대화형 시간
FCP(First Contentful Paint) 및 TTI(Time To Interactive)는 각각 페이지의 인지된 로드 속도와 응답성을 측정합니다.
그래서 그들은 어떻게 관련이 있습니까? FCP는 TTI를 측정하기 위한 시작점으로 작동하기 때문에 FCP는 TTI 점수를 계산(및 최적화)하는 데 도움이 됩니다.
즉, 페이지가 완전한 대화형(TTI)이 되는 데 걸리는 시간을 측정하려면 FCP에서 계산을 시작해야 합니다.
에 대한 기사 읽기 대화형 시간(TTI) 페이지의 더 나은 상호 작용 및 응답성을 위해 이를 개선하는 방법을 알아보십시오.
보시다시피 FCP에만 집중하는 것은 웹사이트의 성능과 사용자 경험을 완전히 향상시키기에 충분하지 않을 수 있습니다.
위의 모든 메트릭 간의 차이점과 관계를 알면 페이지 로드 수명 주기 전체에서 페이지의 반응성과 상호 작용을 최적화하는 데 도움이 됩니다.
다른 웹 성능 메트릭에 대한 기사를 읽으십시오.
최대 포장
- FCP(First Contentful Paint)는 첫 번째 콘텐츠 요소가 렌더링되어 사용자의 브라우저에 표시되는 페이지 로드 타임라인의 시간을 표시합니다.
- 1.8초 미만의 FCP를 목표로 해야 합니다. 빠른 FCP는 사용자에게 눈에 띄는 차이를 만들고 브라우징 만족도에 기여한다는 점을 기억하십시오.
- 낮은 FCP 점수의 가장 일반적인 원인은 렌더링 차단 리소스, 느린 응답 시간 및 과도한 DOM 크기입니다. 이러한 문제를 해결하면 페이지 속도를 높이고 전체 FCP 점수를 향상시키는 데 도움이 됩니다.
- FCP가 다른 웹 성능 메트릭과 혼동될 수 있지만 그 차이점을 이해하면 FCP 점수에 기여하고 웹 사이트에 대해 더 나은 성능 결과를 얻을 수 있습니다.
- 좋은 사용자 경험의 중요성이 부인할 수 없는 2023년, FCP 개선은 더 이상 '만약'이 아니라 페이지의 잠재력을 극대화하는 '방법'의 문제입니다. 문의하기 귀하의 웹 사이트에 대한 개인화 된 행동 계획이 어떻게 비교할 수 없는 SEO 및 비즈니스 결과를 가져올 수 있는지 확인하십시오.
- SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
- 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
- 미래 만들기 w Adryenn Ashley. 여기에서 액세스하십시오.
- 출처: https://www.onely.com/blog/first-contentful-paint/
