1. 시작하기 전에
이 Codelab에서는 PageSpeed Insights API 및 CrUX API를 사용하여 웹페이지의 코어 웹 바이탈을 측정하는 방법을 알아봅니다.
두 API 모두 동일한 핵심 웹 바이탈 데이터를 반환하지만 각 API는 고유한 이점을 제공합니다. PageSpeed Insights API는 필드의 CrUX 데이터 외에도 웹페이지를 감사하고 개선 방법을 추천하는 Google의 자동 오픈소스 도구인 Lighthouse의 데이터도 제공합니다. CrUX API는 Lighthouse 데이터를 제공하지 않으므로 더 빠르게 실행됩니다.
Google에서는 모바일 및 데스크톱 기기에서 핵심 성능 보고서를 측정할 것을 권장합니다. 핵심 성능 보고서에는 모든 웹페이지에 적용되며 사용자 환경에 관한 중요한 통계를 제공하는 다음 세 가지 측정항목이 포함됩니다.
- 최대 콘텐츠 렌더링 시간 (LCP) 로드 성능을 측정하며 페이지가 로드되기 시작한 후 2.5초 이내에 발생해야 합니다.
- 첫 입력 지연 (FID) 상호작용성을 측정하며 100밀리초 이내에 발생해야 합니다.
- 누적 레이아웃 변경 (CLS) 시각적 안정성을 측정하며 0.1 이내여야 합니다.
기본 요건
- 웹 바이탈 도움말
- 명령줄에 관한 기본 지식
- Core Web Vitals 측정항목 기준점 정의 관련 도움말
학습할 내용
- PageSpeed Insights API로 웹페이지의 코어 웹 바이탈을 측정합니다.
- CrUX API로 웹페이지의 코어 웹 바이탈을 측정합니다.
필요한 항목
- Google 계정
- 명령줄 액세스
- 원하는 텍스트 편집기
- 원하는 웹브라우저
- 원하는 URL (이 Codelab에서는 https://developers.google.com을 사용함)
2. PageSpeed Insights API로 코어 웹 바이탈 측정
- URL의 데스크톱 버전의 성능 데이터가 필요한 경우 PageSpeed Insights API에서 데이터를 요청하고
response.txt파일에 저장합니다.
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
YOUR_URL 자리표시자를 URL로 바꿉니다.
API 문자열 끝에 strategy 쿼리 매개변수가 desktop 값으로 설정되어 있습니다. 이는 데스크톱 데이터 요청을 지정합니다.
- URL의 모바일 버전의 성능 데이터가 필요한 경우 PageSpeed Insights API에서 데이터를 요청하고
response.txt파일에 저장합니다.
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
YOUR_URL 자리표시자를 URL로 바꿉니다.
API 문자열 끝에 strategy 쿼리 매개변수가 mobile 값으로 설정되어 있습니다. 이는 모바일 데이터 요청을 지정합니다.
- 텍스트 편집기에서
response.txt파일을 열고loadingExperience속성을 찾습니다.
response.txt
"loadingExperience": {
"id": "https://developers.google.com/",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1714,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.49701860391159164
},
{
"min": 1000,
"max": 3000,
"proportion": 0.40071951025600261
},
{
"min": 3000,
"proportion": 0.10226188583240581
}
],
"category": "AVERAGE"
},
},
loadingExperience 속성은 API 요청에 표시된 URL 및 기기 유형을 기반으로 각 핵심 웹 바이탈에 대해 다음 정보를 보고합니다.
percentile속성은 각 측정항목의 75번째 백분위수를 나타냅니다.distributions속성은 각 측정항목에 대해 좋음, 개선 필요 또는 나쁨 경험이 있었던 페이지 조회수의 비율을 나타냅니다.category속성은 각 측정항목의 실적을 느림, 보통, 빠름으로 분류합니다.
loadingExperience 속성의 콘텐츠가 비어 있으면 URL에 사용할 수 있는 실적 데이터가 충분하지 않습니다. 이 문제는 일반적으로 트래픽이 적은 웹페이지를 테스트할 때 발생합니다.
originLoadingExperience속성을 찾습니다.
response.txt
"originLoadingExperience": {
"id": "https://developers.google.com",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1649,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.488838781075378
},
{
"min": 1000,
"max": 3000,
"proportion": 0.42709617576692827
},
{
"min": 3000,
"proportion": 0.084065043157693739
}
],
"category": "AVERAGE"
},
},
originLoadingExperience 속성은 URL뿐만 아니라 전체 출처의 집계된 경험을 보고합니다. 이 보고서에는 이전 단계에서 설명한 것과 동일한 정보가 각 코어 웹 바이탈에 대해 제공됩니다.
3. CrUX API로 코어 웹 바이탈 측정하기
API 키 가져오기
- Google Cloud 콘솔에서
Chrome UX를 검색한 다음 드롭다운 메뉴에서 Chrome UX Report API를 선택합니다. - Chrome UX Report API 페이지에서 사용 설정을 클릭한 후 사용 설정 버튼이 관리 버튼으로 변경될 때까지 기다린 후 관리를 선택합니다.
- 탐색 메뉴에서 사용자 인증 정보를 클릭한 후 사용자 인증 정보 만들기 > API 키를 선택하고 API 키를 복사합니다.
요청하기
- 명령줄에서 CrUX API에 URL의 성능 데이터를 요청하고
response.txt파일에 저장합니다.
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'
YOUR_API_KEY 자리표시자를 API 키로 바꾸고 YOUR_URL 자리표시자를 URL로 바꿉니다.
- 텍스트 편집기에서
response.txt파일을 엽니다.
response.txt
{
"record": {
"key": {
"url": "https://developers.google.com/"
},
"metrics": {
"cumulative_layout_shift": {
"histogram": [
{
"start": "0.00",
"end": "0.10",
"density": 0.47784335300590036
},
{
"start": "0.10",
"end": "0.25",
"density": 0.32379713914174157
},
{
"start": "0.25",
"density": 0.19835950785235579
}
],
"percentiles": {
"p75": "0.23"
}
},
}
},
}
CrUX API 응답은 각 핵심 성능 지표에 대해 다음 정보를 제공합니다.
histogram속성은 특정 측정항목에 대해 느린, 평균, 빠른 경험을 한 사용자의 비율을 나타냅니다.percentiles속성은 특정 측정항목의 75번째 백분위수 관측치를 나타냅니다.
데이터를 찾을 수 없다는 오류 메시지가 표시되면 지정된 URL에 사용할 수 있는 실적 데이터가 충분하지 않은 것입니다. 이 문제는 일반적으로 트래픽이 적은 웹페이지를 테스트할 때 발생합니다.
4. 축하합니다
축하합니다. PageSpeed Insights API 및 CrUX API를 사용하여 웹페이지의 코어 웹 바이탈을 측정했습니다.