1. 시작하기 전에
이 Codelab에서는 PageSpeed Insights (PSI) API 및 Chrome UX 보고서 (CrUX) API를 사용하여 웹페이지의 핵심 성능 보고서를 측정하는 방법을 알아봅니다.
두 API 모두 동일한 코어 웹 바이탈 데이터를 반환하지만 각 API에는 고유한 이점이 있습니다. PSI API는 현장의 CrUX 데이터 외에도 Lighthouse의 데이터, 즉 웹페이지를 감사하고 개선 방법을 추천하는 자동 오픈소스 도구인 데이터도 제공합니다. CrUX API는 Lighthouse 데이터를 제공하지 않으므로 더 빠르게 실행됩니다.
Google은 모든 모바일 및 데스크톱 기기에서 코어 웹 바이탈을 측정하는 것을 권장합니다. 핵심 성능 보고서에는 다음 세 가지 측정항목이 포함되어 있으며, 이 측정항목은 모든 웹페이지에 적용되며 사용자 환경에 관한 중요한 정보를 제공합니다.
- 최대 콘텐츠 렌더링 시간 (LCP). 로드 성능을 측정하며, 페이지 로드가 시작된 후 2.5초 이내에 발생해야 합니다.
- 첫 입력 지연 (FID). 상호작용을 측정하며 100밀리초 이내에 발생해야 합니다.
- 누적 레이아웃 변경 (CLS) 시각적 안정성을 측정하며 0.1 사이여야 합니다.
기본 요건
- 웹 바이탈 도움말
- 코어 웹 바이탈 측정항목 기준 정의 도움말을 참고하세요.
- 명령줄 사용 방법에 관한 기본 지식
실행할 작업
- PSI API를 사용하여 웹페이지의 핵심 성능 보고서를 측정합니다.
- CrUX API로 웹페이지의 핵심 성능 보고서를 측정해 보세요.
필요한 항목
- Google 계정
- 명령줄 액세스 권한
- 원하는 텍스트 편집기
- 원하는 웹브라우저
- 선택한 URL (이 Codelab에서는 https://developers.google.com)을 사용합니다.
2. PSI API를 사용한 핵심 성능 보고서 측정
- URL의 데스크톱 버전에 대한 성능 데이터가 필요한 경우 이
curl명령어를 실행하여 PageSpeed Insights API에 데이터를 요청하고response.txt파일에 저장합니다.
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
YOUR_URL 자리표시자를 URL로 바꿉니다.
- 모바일 버전의 URL에 대한 성능 데이터가 필요한 경우 이전 단계에서 제공한 명령어의 API 문자열 끝에 있는
strategy쿼리 매개변수를mobile값으로 설정하세요.
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
YOUR_URL 자리표시자를 URL로 바꿉니다.
- 텍스트 편집기에서
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 Console에서
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. 축하합니다
수고하셨습니다 PSI API 및 CrUX API를 사용한 웹페이지, 코어 웹 바이탈을 측정했습니다.