우수한 소프트웨어와 실용적인 튜토리얼
첫번째 콘텐츠 페인트 (FCP)는 측정값입니다인식된 로딩 속도FCP는 페이지 로드 타임라인에서 사용자가 화면에 무언가를 처음 보는 시점을 나타내기 때문에 중요한 사용자 중심 지표입니다. 빠른 FCP는 사용자에게 무언가가 진행되고 있음을 확신시켜 줍니다.지휘하다.
FCP란 무엇인가요?
FCP(First Contentful Paint) 지표는 페이지 로딩을 시작하고 페이지 콘텐츠의 모든 부분이 화면에 렌더링을 완료하는 데 걸리는 시간을 측정합니다. 이 지표에서 "콘텐츠"는 텍스트, 이미지(배경 이미지 포함),
위의 로딩 타임라인에서 FCP는 프레임 2에서 발생합니다. 그 시점이 첫 번째 텍스트와 그래픽 요소가 화면에 렌더링을 완료하는 시점이기 때문입니다.
일부 콘텐츠의 렌더링이 완료되었지만 모든 콘텐츠의 렌더링이 완료되지는 않았다는 점에 유의하세요.첫 번째콘텐츠 페인트(FCP) 및*가장 큰 콘텐츠 페인트(LCP)* (페이지의 주요 콘텐츠가 로딩을 완료했을 때를 측정하도록 설계되었습니다).
좋은 FCP 점수는 얼마입니까?
좋은 사용자 경험을 제공하기 위해 사이트는 첫 번째 콘텐츠 페인트를 다음과 같이 유지하려고 노력해야 합니다.1.8초또는 그 이하입니다. 대부분의 사용자 방문에 대해 권장 목표를 달성하고 있는지 확인하려면 적절한 측정 임계값이 필요합니다.75번째 백분위수이 임계값은 모바일 및 데스크톱 기기 모두에 적용됩니다.
FCP 측정 방법
FCP는 가능합니다실혐실측정하거나실제측정되어 다음 도구에서 사용할 수 있습니다.
측정 도구
실험실 도구
JavaScript에서 FCP 측정
JavaScript에서 FCP를 측정하려면 다음을 사용할 수 있습니다.드로잉 타이밍 API다음 예제에서는 다음을 만드는 방법을 보여줍니다.퍼포먼스 옵저버first-contentful-paint라는 이름의 페인트 항목을 수신하고 콘솔에 기록합니다.
위의 예에서 기록된첫 번째-내용-페인트이 항목은 첫 번째 콘텐츠 요소가 그려진 시점을 알려줍니다. 하지만 경우에 따라 이 항목을 사용하여 FCP를 측정할 수 없습니다.
다음 섹션에서는 API가 보고하는 내용과 측정항목을 계산하는 방법의 차이점을 나열합니다.
지표와 API의 차이점
- API는 백그라운드 탭에 로드된 페이지에 대한 전송을 수행합니다.첫 번째-내용-페인트항목이지만, FCP를 계산할 때 이 페이지는 무시해야 합니다(첫 번째 페인트 타이밍은 페이지가 항상 전경에 있는 경우에만 고려해야 함).
- 페이지가 지나갈 때왕복 캐시재개 시 API가 보고하지 않습니다.첫 번째-내용-페인트항목이 있지만, 이 경우에는 사용자의 여러 페이지 방문이 이루어지므로 FCP를 측정해야 합니다.
- API 교차 출처 iframe의 페인트 타이밍이 보고되지 않을 수 있습니다.하지만 FCP를 정확하게 측정하려면 모든 프레임을 고려해야 합니다. 자식 프레임은 API를 사용하여 각 프레임의 그리기 타이밍을 부모 프레임에 보고하여 집계할 수 있습니다.
개발자는 이러한 모든 뉘앙스를 기억하는 대신 다음을 사용할 수 있습니다.웹 바이탈스 JavaScript 라이브러리LCP를 측정하기 위해 라이브러리는 가능한 경우 다음과 같은 차이점을 직접 처리합니다.
수입 {getFCP} ~에서 '웹 바이탈';
// FCP가 준비되는 대로 측정하고 기록하세요.
getFCP(콘솔.통나무);
JavaScript에서 LCP를 측정하는 방법에 대한 전체 예는 getLCP()의 소스 코드를 참조하세요.
FCP를 개선하는 방법
특정 사이트의 FCP를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 권장하는 구체적인 옵션을 살펴보세요.가능성또는진단.
FCP를 개선하는 일반적인 방법에 대해 알아보려면(모든 사이트의 경우) 다음 성능 가이드를 참조하세요.
