CrUX 대시보드를 사용한 BigQuery CrUX 데이터 시각화
CrUX 대시보드는 BigQuery의 원시 출처 수준 CrUX 데이터에 연결된 다음 데이터를 시각화하는 Looker Studio (이전의 데이터 스튜디오) 대시보드입니다. 대시보드 사용자가 쿼리를 작성하거나 차트를 생성할 필요가 없습니다. 모든 것이 사용자를 위해 제작되었습니다. 원본을 제공하기만 하면 대시보드가 자동으로 생성됩니다.
CrUX 대시보드 액세스
CrUX 대시보드를 실행하려면 출처 또는 URL을 입력하고 Enter를 누르거나 이동을 클릭합니다.
대시보드 URL을 공유하고 북마크에 추가하여 간편하게 참조할 수 있습니다.
모든 웹사이트에서 작동하나요?
아니요. 출처가 CrUX 데이터 세트에 포함되어 있지 않으면 데이터가 표시되지 않습니다. 데이터 세트에는 1, 500만 개가 넘는 출처가 있지만 원하는 출처의 데이터가 충분하지 않을 수 있습니다.
출처의 몇 가지 일반적인 문제로는 잘못된 프로토콜(예: https://
대신 http://
)을 제공하여 필요한 경우 하위 도메인을 생략하는 경우가 있습니다. 일부 웹사이트에는 리디렉션이 포함되어 있으므로 http://example.com
이 https://www.example.com
로 리디렉션되는 경우 원본의 표준 버전인 후자를 사용해야 합니다.
맞춤검색 엔진을 사용하여 대시보드에 액세스
다른 도메인을 자주 방문하는 사용자를 위한 또 다른 방법은 검색어(이 경우 출처)를 URL로 전달할 수 있는 맞춤 검색엔진을 Chrome에 설정하는 것입니다. 이렇게 하려면 Chrome 오른쪽 상단에 있는 점 3개로 된 메뉴를 사용하여 Chrome 설정으로 이동합니다. 설정에서 '검색엔진' 옵션을 선택하세요.
!['검색엔진 및 사이트 검색 관리'가 가능한 검색엔진용 Chrome 설정 페이지의 스크린샷](https://developer.chrome.google.cn/static/docs/crux/dashboard/image/chrome-settings-search-e-0640445b71325.png?authuser=19&hl=ko)
여기에서 '검색엔진 및 사이트 검색 관리'를 펼치고 '사이트 검색'까지 스크롤한 다음 '추가' 버튼을 클릭하고 다음 세부정보를 입력합니다.
- 검색엔진:
CrUX
- 바로가기:
crux
- URL(
https://lookerstudio.google.com/c/u/0/reporting/bbc5698d-57bb-4969-9e07-68810b9fa348/page/keDQB?params=%7B%22origin%22:%22%s%22%7D
대신 %s 사용)
![세 개의 입력란이 있는 Chrome의 '검색엔진 추가' 대화상자입니다. 검색엔진 이름, 바로가기, 검색어 자리에 %s가 입력된 URL입니다.](https://developer.chrome.google.cn/static/docs/crux/dashboard/image/chrome-add-search-engine-32c7f40a9ab4a.png?authuser=19&hl=ko)
이후 검색창에 crux
를 입력하고 tab
를 누르면 출처를 입력할 수 있으며 Chrome에서 해당 출처의 CrUX 대시보드로 이동합니다.
![`Search CrUX` 명령어가 표시된 Chrome 주소 표시줄 스크린샷](https://developer.chrome.google.cn/static/docs/crux/dashboard/image/using-custom-search-engi-d72e7cc8c7578.png?authuser=19&hl=ko)
프로토콜을 생략하면 HTTPS로 간주됩니다. 하위 도메인이 중요합니다. 예를 들어 https://developers.google.com
과 https://www.google.com
은 다른 출처로 간주됩니다.
출처가 CrUX에 있는 경우 이 출처의 CrUX 데이터가 채워진 대시보드로 이동합니다.
![초기 코어 웹 바이탈 화면을 보여주는 developer.chrome.com의 CrUX 대시보드 스크린샷](https://developer.chrome.google.cn/static/docs/crux/dashboard/image/crux-dashboard.png?authuser=19&hl=ko)
대시보드 개요
각 대시보드에는 세 가지 유형의 페이지가 있습니다.
- 코어 웹 바이탈 개요
- 측정항목 성능
- 사용자 인구통계
각 페이지에는 사용 가능한 각 월간 출시의 시간 경과에 따른 분포를 보여주는 차트가 있습니다. 새 데이터 세트가 출시되면 대시보드를 새로고침하여 최신 데이터를 가져올 수 있습니다.
월별 데이터 세트는 매월 두 번째 화요일에 공개됩니다. 예를 들어 5월의 사용자 경험 데이터로 구성된 데이터 세트는 6월 두 번째 화요일에 공개됩니다.
코어 웹 바이탈 개요
첫 번째 페이지는 원본의 월별 코어 웹 바이탈 실적 개요입니다. Google에서 개발자에게 권장하는 가장 중요한 UX 측정항목입니다.
![이 사이트의 LCP, INP, CLS에 관한 세부정보를 보여주는 CrUX 대시보드의 Core Web Vitals 개요 전체 페이지 스크린샷](https://developer.chrome.google.cn/static/docs/crux/dashboard/image/crux-dashboard-core-web-vitals.png?authuser=19&hl=ko)
코어 웹 바이탈 페이지를 사용하여 데스크톱 및 휴대전화 사용자가 원본을 경험하는 방식을 파악합니다. 기본적으로 대시보드를 만든 시점의 가장 최근 달이 선택됩니다. 이전 또는 최신 월간 출시 간에 변경하려면 페이지 상단의 월 필터를 사용합니다.
측정항목 성능
코어 웹 바이탈 페이지 다음에는 CrUX 데이터 세트의 모든 metrics에 관한 독립형 페이지가 표시됩니다.
![10개월 동안의 양호, 개선 필요, 저조한 LCP 데이터의 스택 막대 그래프를 보여주는 CrUX 대시보드 LCP 페이지의 스크린샷.](https://developer.chrome.google.cn/static/docs/crux/dashboard/image/crux-dashboard-lcp-page-60e7ce653f87f.png?authuser=19&hl=ko)
각 페이지 상단에는 환경 데이터에 포함된 폼 팩터를 제한하는 데 사용할 수 있는 기기 필터가 있습니다. 예를 들어 특히 휴대전화 사용 환경을 상세히 살펴볼 수 있습니다. 이 설정은 페이지 간에 유지됩니다.
이러한 페이지의 기본 시각화는 '좋음', '개선 필요', '나쁨'으로 분류된 월간 경험 분포입니다. 차트 아래에 색상별로 구분된 범례는 카테고리에 포함된 체험의 범위를 나타냅니다. 예를 들어 이전 스크린샷에서 '양호'한 최대 콘텐츠 렌더링 시간 (LCP) 환경의 비율이 최근 몇 달 동안 약간 변동하다가 악화되는 것을 확인할 수 있습니다.
차트 상단에는 최근 달의 '좋음' 및 '나쁨' 경험 비율이 지난달과의 비율 차이 표시기와 함께 표시됩니다. 이 출처의 경우 '우수한' LCP 경험이 전월 대비 0.8% 감소하여 83.25%로 감소했고, p75 수치는 전월 대비 0.5% 변동 없이 1,500으로 유지되었으며, '나쁨' LCP 경험은 3.6% 증가하여 7.42%로 증가했습니다. 백분율 이동은 백분율 변동이 아닌 실제 변동률입니다. 예를 들어 83.93%에서 83.25%는 0.68% 포인트 변동 또는 이전 총계 83.93%의 0.8% 감소입니다.
또한 LCP 및 기타 코어 웹 바이탈과 같이 명시적인 백분위수 추천을 제공하는 측정항목의 경우 '좋음'과 '나쁨' 비율 사이에 'P75' 측정항목이 표시됩니다. 이 값은 출처의 사용자 경험 중 75번째 백분위수에 해당합니다. 즉, 경험의 75% 가 이 값보다 낫습니다. 한 가지 유의해야 할 점은 이 변경사항이 출처에 있는 모든 기기의 전체 분포에 적용된다는 것입니다. 특정 기기를 기기 필터로 전환하면 백분위수가 다시 계산되지 않습니다.
백분위수에 관한 기술적 주의사항
백분위수 측정항목은 BigQuery의 히스토그램 데이터를 기반으로 하므로 LCP의 경우 100ms, INP의 경우 25ms, CLS의 경우 0.05로 대략적이며, 즉, P75 LCP가 3800ms이면 실제 75번째 백분위수가 3,800ms에서 3,900ms 사이인 것을 의미합니다.
또한 BigQuery 데이터 세트는 '빈 확산'이라는 기법을 사용합니다. 이 기법에서는 사용자 환경의 밀도를 기본적으로 매우 대략적인 작은 빈(bin)으로 그룹화합니다. 이렇게 하면 정밀도 4자리를 초과하지 않고도 분포의 꼬리에 분 밀도를 포함할 수 있습니다. 예를 들어 3초 미만의 LCP 값은 200ms 너비의 구간으로 그룹화됩니다. 3초에서 10초 사이인 구간은 너비가 500ms입니다. 10초를 초과하면 구간의 너비가 5, 000ms가 됩니다. 다양한 너비의 구간이 있는 대신, 구간 확산은 모든 구간이 너비가 100ms (최대 공약수) 일정하게 유지되도록 하고 분포가 각 구간에 선형으로 보간되도록 합니다.
PageSpeed Insights와 같은 도구에서 해당 P75 값은 공개 BigQuery 데이터 세트를 기반으로 하지 않으며 밀리초 정밀도 값을 제공할 수 있습니다.
사용자 인구통계
사용자 인구통계 페이지에는 기기와 유효 연결 유형 (ECT)이라는 두 가지 측정기준이 포함됩니다. 이 페이지는 각 인구통계의 사용자에 대한 전체 출처에서의 페이지 조회수 분포를 보여줍니다.
기기 배포 페이지에는 시간 경과에 따른 휴대전화, 데스크톱, 태블릿 사용자 분석이 표시됩니다.
![10개월 동안의 휴대폰, 데스크톱 및 태블릿의 기기 분포를 보여주는 CrUX Dashboard 기기 페이지의 스크린샷.](https://developer.chrome.google.cn/static/docs/crux/dashboard/image/crux-dashboard-device-pag-b120ce65199a.png?authuser=19&hl=ko)
대부분의 출처에는 태블릿 데이터가 거의 없거나 전혀 없는 경향이 있으므로 차트 가장자리에 '0%'가 표시되는 경우가 많습니다.
마찬가지로 ECT 분포 페이지에는 4G, 3G, 2G, 느린 2G, 오프라인 경험에 대한 분석이 표시됩니다.
이러한 측정기준의 분포는 콘텐츠가 포함된 첫 페인트 (FCP) 히스토그램 데이터의 세그먼트를 사용하여 계산됩니다.
FAQ
다음은 CrUX BigQuery 데이터 세트에 관한 자주 묻는 질문(FAQ) 중 일부입니다.
어떤 경우에 다른 도구와 달리 CrUX 대시보드를 사용하나요?
CrUX 대시보드는 BigQuery에서 사용할 수 있는 것과 동일한 기본 데이터를 기반으로 하지만 데이터를 추출하기 위해 한 줄의 SQL을 작성할 필요가 없으며 무료 할당량 초과에 대해 걱정할 필요가 없습니다. 대시보드는 쉽고 빠르게 설정할 수 있고, 모든 시각화가 자동으로 생성되며, 원하는 사람과 공유할 수 있습니다.
CrUX 대시보드를 사용하는 데 제한사항이 있나요?
BigQuery를 기반으로 하기 때문에 CrUX Dashboard는 모든 제한 사항도 상속합니다. 월별 세분화된 출처 수준의 데이터로 제한됩니다.
또한 CrUX Dashboard는 단순성과 편의성을 위해 BigQuery에 있는 원시 데이터의 다양성을 일부 대체합니다. 예를 들어 측정항목 분포는 전체 히스토그램과 달리 '좋음', '개선이 필요함', '나쁨'으로만 지정됩니다. 또한 CrUX Dashboard는 글로벌 수준의 데이터를 제공하는 반면, BigQuery 데이터 세트를 사용하면 특정 국가를 확대할 수 있습니다.
대시보드를 맞춤설정하려면 어떻게 해야 하나요?
이 페이지에서는 CrUX 팀이 유지 관리하는 CrUX 대시보드의 읽기 전용 버전에 액세스하는 방법을 자세히 설명합니다. 대시보드를 수정하여 다양한 시각화를 표시할 수 있도록 대시보드를 직접 만들려면 이 사용자 가이드를 참고하세요. 나만의 복사본을 만들면 월을 수동으로 업데이트해야 하며 공식 대시보드에 추가된 새 측정항목, 기타 정보 등 어떠한 이점도 누릴 수 없습니다.