Chrome UX Report | Chrome for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

측정항목

CrUX의 측정항목은 브라우저에 의해 노출되는 표준 웹 플랫폼 API를 기반으로 합니다. 특히 BigQuery 데이터 세트에서 이 데이터는 출처 해상도로 집계됩니다. 사이트 성능에 대한 보다 자세한 (예: URL 수준 확인) 분석 및 통계가 필요한 사이트 소유자는 동일한 API를 사용하여 자체 출처에 대한 상세한 실제 사용자 측정 (RUM) 데이터를 수집할 수 있습니다. Chrome에서는 모든 API를 사용할 수 있지만 다른 브라우저에서는 일부 측정항목을 모두 지원하지 않을 수 있습니다.

대부분의 측정항목은 히스토그램 집계로 표시되므로 백분위수 값의 분포와 근사값을 시각화할 수 있습니다.

첫 페인트

"첫 번째 페인트는 브라우저가 탐색 후 처음 렌더링된 시간을 보고합니다. 기본 배경 페인트는 제외되지만 기본이 아닌 배경 페인트는 포함됩니다. 이는 브라우저가 페이지 렌더링을 시작하는 페이지 로드에서 개발자가 가장 먼저 관심을 가지는 순간입니다."

Paint Timing API

콘텐츠가 포함된 첫 페인트

"콘텐츠가 포함된 첫 페인트는 브라우저가 텍스트, 이미지 (배경 이미지 포함), 흰색이 아닌 캔버스 또는 SVG를 처음 렌더링한 시간을 보고합니다. 여기에는 대기 중인 웹 글꼴이 있는 텍스트가 포함됩니다. 사용자가 페이지 콘텐츠 소비를 시작할 수 있는 것은 이번이 처음입니다."

Paint Timing API

로드된 DOM 콘텐츠

"DOMContentLoaded는 스타일시트, 이미지 및 하위 프레임의 로드가 완료될 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 파싱된 시간을 보고합니다."

MDN

콘텐츠가 포함된 최대 페인트

"최대 콘텐츠 렌더링 시간 (LCP)은 인지된 로드 속도를 측정하는 중요한 사용자 중심 측정항목입니다. 이는 페이지 로드 타임라인에서 페이지의 주요 콘텐츠가 로드되었을 가능성이 있는 시점을 표시하기 때문입니다. 빠른 LCP는 페이지가 유용하다는 확신을 주는 데 도움이 됩니다."

web.dev/articles/lcp

온로드

'페이지와 종속 리소스의 로드가 완료되면 로드 이벤트가 시작됩니다.'

MDN

누적 레이아웃 변경

"누적 레이아웃 변경 (CLS)은 시각적 안정성을 측정하는 중요한 사용자 중심 측정항목입니다. 사용자가 예기치 않은 레이아웃 변경을 경험하는 빈도를 정량화하는 데 도움이 되기 때문입니다. CLS가 낮으면 즐거운 페이지를 만드는 데 도움이 됩니다."

web.dev/articles/cls

최초 입력 반응 시간

"최초 입력 반응 시간 (FID)은 사용자가 응답하지 않는 페이지와 상호작용하려고 할 때 느끼는 경험을 정량화하기 때문에 로드 응답성을 측정하는 중요한 사용자 중심 측정항목입니다. FID가 낮으면 페이지가 사용 가능한지 확인하는 데 도움이 됩니다."

web.dev/articles/fid를 사용합니다.

다음 페인트에 대한 상호작용

"다음 페인트에 대한 상호작용 (INP)은 반응성을 평가하는 필드 측정항목입니다. INP는 페이지 수명 주기 전반에서 모든 상호작용의 지연 시간을 기록합니다. 이러한 상호작용의 가장 큰 값(상호작용이 많은 페이지의 경우 가장 높은 값)이 페이지의 INP로 기록됩니다. INP가 낮으면 페이지가 항상 안정적으로 반응할 수 있습니다."

web.dev/articles/inp

2022년 2월에 CrUX 데이터 세트에 Interaction to Next Paint (INP)가 추가되었습니다. 이 새로운 측정항목은 개별 이벤트의 엔드 투 엔드 지연 시간을 캡처하고 전체 기간 동안 페이지의 전반적인 응답성을 보다 전체적으로 보여줍니다.

탐색 유형 측정항목은 다음 탐색의 페이지 조회수 비율에 대한 분석을 제공합니다.

유형	설명
`navigate`	다른 카테고리에 해당하지 않는 페이지 로드.
`navigate_cache`	기본 리소스 (기본 HTML 문서)가 HTTP 캐시에서 제공된 페이지 로드입니다. 사이트에서는 종종 하위 리소스에 캐싱을 사용하지만 기본 HTML 문서는 상당히 덜 캐시되는 경우가 많으며 가능한 경우 로컬 및 CDN에서 캐시할 수 있어 성능이 눈에 띄게 향상될 수 있습니다.
`reload`	사용자가 새로고침 버튼을 누르거나 주소 표시줄에서 Enter 키를 누르거나 탭 닫기를 취소하여 페이지를 새로고침했습니다. 페이지를 새로고침하면 기본 페이지가 변경되었는지 확인하기 위해 서버로 유효성 재전송을 요청하는 경우가 많습니다. 페이지 새로고침 비율이 높으면 사용자 경험이 불만족스러울 수 있습니다.
`restore`	브라우저를 다시 시작하거나 메모리 문제로 인해 탭이 삭제된 후 페이지가 다시 로드되었습니다. Android용 Chrome의 경우 '새로고침'으로 보고됩니다.
`back_forward`	방문 기록 탐색: 페이지를 보고 최근에 돌아왔음을 의미합니다. 올바른 캐싱을 사용하면 이러한 작업은 상당히 빠른 경험을 할 수 있지만 여전히 페이지를 처리하고 JavaScript를 실행해야 합니다. 두 가지 모두 bfcache에서 방지됩니다.
`back_forward_cache`	bfcache에서 제공된 기록 탐색입니다. 차단기를 제거하여 bfcache를 활용하도록 페이지를 최적화하면 환경이 빨라지므로 사이트가 더욱 잘 보이도록 해야 합니다.
`prerender`	페이지가 사전 렌더링되어 bfcache와 마찬가지로 페이지 로드에 거의 즉각적으로 기여할 수 있습니다.

경우에 따라 페이지 로드는 여러 탐색 유형의 조합일 수 있습니다. 이 경우 CrUX는 표의 역순으로 (아래에서 위로) 첫 번째 일치 항목을 보고합니다.

자세한 내용은 내비게이션 유형 공지사항 게시물을 참고하세요.

실험 측정항목

실험용 측정항목은 BigQuery를 사용하여 CrUX 데이터 세트에서 사용할 수 있으며 일부 측정항목은 CrUX API에서도 사용할 수 있습니다. 이러한 측정항목은 사용자 의견에 따라 발전함에 따라 정기적으로 변경될 가능성이 높습니다. 출시 노트에서 최신 변경사항을 놓치지 말고 확인하세요.

첫 바이트까지의 시간

TTFB는 뒤로 탐색 및 사전 렌더링에서도 수집되는 다른 타이머 (예: LCP)와 달리 전체 페이지 로드 시에만 수집됩니다. 따라서 TTFB의 샘플 크기는 다른 측정항목보다 작을 수 있으며 이 측정항목과 직접 비교되지 않을 수도 있습니다.

알림 권한

사용자 알림 표시 권한을 요청하는 웹사이트의 경우 이 측정항목은 사용자가 프롬프트에 응답하는 빈도(수락, 거부, 무시, 닫기)를 나타냅니다.