PageSpeed ​​Insights API를 사용하여 페이지 성능을 모니터링하는 방법

페이지 성능을 모니터링하고 개선 사항을 평가하는 데 도움이 되는 도구가 있습니다. 가장 좋은 것 중 하나는 PageSpeed ​​Insights입니다. Chrome의 DevTools에서 웹 애플리케이션 및 Lighthouse 탭으로 사용할 수 있습니다(동일한 DevTools는 Edge, Opera, Brave 및 Vivaldi에서도 사용 가능).

웹 페이지 성능은 그 어느 때보다 중요합니다. 사용자는 데스크톱 애플리케이션에 필적하는 매끄럽고 반응이 빠른 경험을 기대합니다. 또한 Google의 Core Web Vitals는 페이지 성능을 측정하며 PageRank 및 검색 엔진 최적화 노력에 영향을 미칩니다.

WordPress는 모든 웹사이트의 1/3 이상을 실행하지만 성능은 비효율적인 호스팅, 느린 테마 및 플러그인에 대한 과도한 의존으로 인해 영향을 받습니다. 좋은 웹 호스트로 전환하고 모범 사례 성능 기술을 사용하여 대부분의 문제를 해결할 수 있습니다.

등대 접근

검사하려는 페이지를 열고 Ctrl/Cmd + Shift + I를 누르거나 메뉴의 추가 도구 에서 개발자 도구를 선택하여 Lighthouse를 시작합니다. Lighthouse 탭으로 전환하고 페이지 로드 분석 버튼을 클릭합니다. 몇 초 후에 결과가 표시됩니다.

최상위 비율로 드릴다운하여 알려진 문제를 해결하는 추가 정보와 힌트를 찾을 수 있습니다. 이 도구는 매우 유용하지만 다음과 같은 단점이 있습니다.

• 테스트 중인 모든 페이지에 대해 수동으로 실행을 시작해야 합니다.
• 시간이 지남에 따라 요인이 어떻게 개선되거나 악화되었는지 기록하는 것은 쉽지 않습니다.
• 확인할 데이터가 많고 오류가 발생하기 쉽습니다.
• 기술적 세부 사항은 개발자를 위해 제공됩니다. 진행 상황에 대한 빠른 개요를 원하는 클라이언트와 관리자에게는 압도적일 수 있습니다.
• Lighthouse 실행은 잘못된 가정으로 이어질 수 있는 로컬 장치 및 네트워크 속도의 영향을 받을 수 있습니다.

PageSpeed ​​Insights API는 테스트를 자동화, 기록 및 비교할 수 있도록 이러한 문제를 해결하는 방법을 제공합니다.

PageSpeed ​​Insights API란 무엇인가요?

Google은 모든 Lighthouse 측정항목 등을 포함하는 JSON 형식의 데이터를 반환하는 무료 PageSpeed ​​Insights REST API를 제공합니다. 페이지 실행을 자동화하고, 결과 데이터를 저장하고, 시간 경과에 따른 변경 사항을 검토하고, 필요한 정확한 정보를 표시할 수 있습니다.

PageSpeed ​​Insights API는 Google이 귀하의 사이트를 보는 방식을 에뮬레이션합니다. 며칠마다 또는 성능 업데이트를 릴리스할 때마다 보고서를 실행할 수 있습니다.

결과는 유용하지만 반드시 실제 사용자 경험을 나타내는 것은 아닙니다. 브라우저 성능 API는 모든 사용자 장치 및 네트워크에서 실제 성능을 모니터링하려는 경우 더 나은 옵션입니다.

PageSpeed ​​Insights API 빠른 시작

다음 주소를 웹 브라우저에 복사하고 url 편집하여 페이지 성능을 평가하십시오.

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

Chrome에는 동일한 기능을 제공하는 확장 기능이 있지만 Firefox에는 JSON 뷰어가 내장되어 있기 때문에 이상적입니다. 전체 Lighthouse 성능 점수는 아래에 강조 표시되어 있습니다.

자신의 페이지 및 기본 설정에 대한 API URL 쿼리 문자열을 변경할 수 있습니다. 유일한 필수 매개변수는 url 입니다. 예:

url=https://mysite.com/page1

데스크톱 테스트는 기본적으로 실행되지만 다음을 사용하여 명시적으로 요청할 수 있습니다.

strategy=desktop

또는 다음을 사용하여 모바일로 전환:

strategy=mobile

하나 이상의 관심 범주를 지정하지 않으면 성능 테스트만 실행됩니다.

category=performance
category=accessibility
category=best-practices
category=seo
category=pwa

프랑스어와 같은 로케일을 설정하여 특정 언어를 정의할 수 있습니다.

locale=fr-FR

Google 애널리틱스 캠페인 세부정보는 다음과 같이 설정할 수 있습니다.

utm_campaign=<campaign>
utm_source=<source>

이 서비스는 드물게 요청하는 경우 무료이지만 짧은 기간에 동일한 IP 주소에서 많은 테스트를 실행하려면 Google API 키에 가입해야 합니다. 키는 다음과 함께 URL에 추가됩니다.

key=<api-key>

앰퍼샌드(&) 문자로 구분된 선택한 매개변수를 지정하여 URL의 쿼리 문자열을 작성할 수 있습니다. 다음 API URL은 모바일 장치를 사용하여 https://mysite.com/ 에서 페이지를 테스트하여 성능 및 접근성 기준을 평가합니다.

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility

자신의 URL을 구성하거나 추가 지원이 필요한 경우 Google PageSpeed ​​API URL 빌더 도구를 사용할 수 있습니다.

PageSpeed ​​Insights API JSON 결과

테스트는 일반적으로 선택한 범주, 페이지의 자산 수 및 스크린샷의 복잡성(base64 형식으로 포함됨)에 따라 약 600Kb의 JSON 데이터를 반환합니다.

데이터의 양이 어마어마하고 일부 중복이 있으며 결과 문서가 항상 명확하지 않습니다. JSON은 아래에 설명된 대로 4개의 섹션으로 나뉩니다.

로딩 경험

이는 최종 사용자의 페이지 로드 경험에 대해 계산된 메트릭입니다. 여기에는 Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS 및 FIRST_INPUT_DELAY_MS와 같은 정보가 포함됩니다. 세부 정보 및 "카테고리" 값은 FAST, AVERAGE, SLOW 또는 측정이 수행되지 않은 경우 NONE을 반환합니다. 예:

 "loadingExperience": { "metrics": { "CUMULATIVE_LAYOUT_SHIFT_SCORE": { "percentile": 0, "distributions": [ { "min": 0, "max": 10, "proportion": 0.970 }, { "min": 10, "max": 25, "proportion": 0.017 }, { "min": 25, "proportion": 0.012 } ], "category": "FAST" },

originLoadingExperience

이는 모든 사용자의 페이지 로드 경험에 대해 계산된 집계 메트릭입니다. 섹션은 위의 loadingExperience와 동일하며 트래픽이 적은 사이트는 수치의 차이가 거의 없습니다.

등대결과

이것은 가장 큰 섹션이며 모든 Lighthouse 메트릭을 포함합니다. 테스트에 대한 정보를 제공합니다.

• requestUrl – 요청한 URL
• finalUrl – 모든 리디렉션 후 테스트된 실제 페이지
• lighthouseVersion – 소프트웨어 버전
• fetchTime – 테스트가 실행된 시간
• userAgent – ​​테스트에 사용된 브라우저의 사용자 에이전트 문자열
• 환경 – 확장된 사용자 에이전트 정보
• configSettings – API에 전달된 설정

그 다음에는 미사용 자바스크립트, 미사용 CSS 규칙, 총 바이트 무게, 리디렉션, 돔 크기, 최대 콘텐츠 페인트 요소, 서버 응답 시간, 네트워크를 포함한 많은 섹션이 있는 "감사" 섹션이 있습니다. -요청, 누적 레이아웃 이동, 첫 번째 의미 있는 페인트, 스크린샷 축소판 및 전체 페이지 스크린샷.

대부분의 감사 메트릭은 성능 향상 구현의 이점을 추정하는 "overallSavingsBytes" 및 "overallSavingsMs"와 같은 요소를 포함하는 "세부 정보" 섹션을 제공합니다.

전체 페이지 및 썸네일 "스크린샷" 섹션에는 내장된 base64 이미지 데이터가 포함되어 있습니다.

"메트릭" 섹션은 "항목" 배열의 모든 메트릭에 대한 요약을 제공합니다.

 "metrics": { "id": "metrics", "title": "Metrics", "description": "Collects all available metrics.", "score": null, "scoreDisplayMode": "informative", "details": { "type": "debugdata", "items": [{ "observedFirstVisualChange": 234, "observedFirstContentfulPaint": 284, "interactive": 278, "observedFirstPaintTs": 1579728174422, "observedDomContentLoaded": 314, // ... etc ... }] }, "numericValue": 278, "numericUnit": "millisecond" },

"감사" 섹션 다음에는 API URL에 전달된 선택된 카테고리에 대한 전체 Lighthouse 점수를 제공하는 "카테고리"가 옵니다.

 "categories": { "performance": { "id": "performance", "title": "Performance", "score": 0.97, "auditRefs": [ //...

"점수"는 일반적으로 Lighthouse 보고서에 백분율로 표시되는 0과 1 사이의 숫자입니다. 일반적으로 점수는 다음과 같습니다.

• 0.9~1.0이 좋다
• 0.5 ~ 0.9 미만은 개선이 필요함을 나타냅니다.
• 0.5 미만은 불량이며 더 긴급한 주의가 필요합니다.

"auditRefs" 섹션은 각 점수를 계산하는 데 사용되는 모든 메트릭 및 가중치 목록을 제공합니다.

분석UTC타임스탬프

마지막으로 분석 시간이 보고됩니다. 이는 lighthouseResult.fetchTime에 표시된 시간과 동일해야 합니다.

유용한 JSON 결과 지표

텍스트 편집기에서 JSON 결과를 저장하고 검토하는 것이 좋습니다. 일부에는 JSON 포맷터가 내장되어 있거나 플러그인으로 사용할 수 있습니다. 또는 다음과 같은 무료 온라인 도구를 사용할 수 있습니다.

• JSON 포맷터 및 유효성 검사기
• JSON 포맷터
• jsonformatter.io

다음 메트릭이 유용할 수 있습니다. 필요에 따라 URL에서 관련 카테고리 옵션을 설정해야 합니다.

요약 메트릭

0에서 1까지의 전체 점수:

성능 지표

여기에는 0에서 1까지의 Core Web Vitals 점수가 포함됩니다.

기타 유용한 성능 점수는 다음과 같습니다.

일반적으로 다음과 같은 실제 수치 및 단위를 얻을 수 있습니다.

• lighthouseResult.audits.total-byte-weight.numericValue –
  총 페이지 크기(예: 450123)
• lighthouseResult.audits.total-byte-weight.numericUnit –
  총 페이지 크기에 사용되는 단위(예: "바이트")

또는 "displayValue"에는 일반적으로 그림과 단위가 모두 포함된 읽을 수 있는 메시지가 포함됩니다.

• lighthouseResult.audits.server-response-time.displayValue –
  응답 시간에 대한 메시지(예: "루트 문서 소요 시간 170ms")
• lighthouseResult.audits.dom-size.displayValue –
  DOM의 요소 수에 대한 메시지(예: "543개 요소")

코드 없는 성능 대시보드 만들기

라이브 API 피드는 Microsoft Excel을 포함한 많은 시스템에서 읽고 처리할 수 있습니다. (다소 이상하게도 Google 스프레드시트는 추가 플러그인이나 매크로 코드 없이는 JSON 피드를 지원하지 않습니다. XML은 지원합니다.)

실시간 전체 성과 점수를 Excel로 가져오려면 새 스프레드시트를 시작하고 데이터 탭으로 전환한 다음 웹에서 를 클릭합니다. PageSpeed ​​Insights API URL을 입력하고 확인을 누르십시오.

다음 대화 상자에서 연결을 클릭하고 기본(익명) 설정을 유지합니다. 검색어 설정 도구로 이동합니다.

등대 결과 지표 오른쪽에 있는 기록을 클릭합니다. 그런 다음 범주 및 성능 에서 동일한 항목을 클릭하여 JSON 개체 계층을 드릴다운합니다.

오른쪽 클릭 메뉴 옵션에서 상단 의 테이블로 아이콘을 클릭합니다.

그런 다음 확인 을 클릭하기 전에 표 제목의 필터 화살표를 클릭하여 점수 이외의 모든 항목을 제거할 수 있습니다.

마지막으로 닫기 및 로드를 클릭하여 스프레드시트에 실시간 성능 점수를 표시합니다.

관심 있는 다른 메트릭에 대해서도 동일한 프로세스를 따를 수 있습니다.

웹 성능 대시보드 만들기

이 Codepen 데모는 URL을 입력하고 데스크톱 또는 모바일 분석을 선택하여 결과를 얻을 수 있는 양식을 제공합니다.

이 코드는 PageSpeed ​​Insights URL을 만들고 API를 호출한 다음 다양한 결과를 표준 Lighthouse 보고서보다 더 빨리 볼 수 있는 요약 테이블로 렌더링합니다.

양식이 제출될 때 비동기식 startCheck() 함수가 호출됩니다. 제출 이벤트를 취소하고 이전 결과를 숨깁니다.

 // make API request async function startCheck(e) { e.preventDefault(); show(resultTable, false); show(status); show(error, false);

그런 다음 양식 데이터에서 apiURL 구성하고 필드를 비활성화합니다.

 const form = e.target, fields = form.firstElementChild, data = new FormData(form), qs = decodeURIComponent( new URLSearchParams(data).toString() ), apiURL = form.action + '?' + qs; fields.disabled = true;

Fetch API는 PageSpeed ​​URL을 호출하고, 응답을 받고, JSON 문자열을 사용 가능한 JavaScript 개체로 구문 분석하는 데 사용됩니다. try/catch 블록은 오류가 캡처되도록 합니다.

 try { // call API and get result const response = await fetch(apiURL), result = await response.json();

결과 객체는 showResult() 함수에 전달됩니다. 이렇게 하면 속성이 추출되어 결과 테이블 또는 데이터 포인트 속성이 PageSpeed ​​API 속성으로 설정된 다른 HTML 요소에 배치됩니다.

<td data-point="lighthouseResult.categories.performance.score"></td>

try 블록의 끝:

 // output result showResult(result); show(status, false); show(resultTable); }

마지막으로 catch 블록이 오류를 처리하고 양식 필드가 다시 활성화되어 추가 테스트를 실행할 수 있습니다.

 catch(err) { // API error console.log(err); show(status, false); show(error); } fields.disabled = false; }

추가 개발 옵션

위의 예제 코드는 요청 시 PageSpeed ​​Insights API에서 결과를 가져옵니다. 이 보고서는 Lighthouse보다 더 구성 가능하지만 실행은 여전히 ​​수동 프로세스입니다.

자체 대시보드를 개발하려는 경우 PageSpeed ​​Insights API를 호출하고 결과 JSON을 테스트된 URL 및 현재 날짜/시간에 대해 새 데이터베이스 레코드에 저장하는 작은 애플리케이션을 만드는 것이 실용적일 수 있습니다. MongoDB가 작업에 이상적으로 적합하지만 대부분의 데이터베이스는 JSON을 지원합니다. cron 작업은 정해진 시간에 응용 프로그램을 호출할 수 있습니다. 아마도 이른 아침 시간에 하루에 한 번일 것입니다.

그런 다음 서버측 애플리케이션은 보고 요구 사항에 대한 자체 REST API를 구현할 수 있습니다. 예를 들어 두 날짜 사이의 특정 성능 메트릭의 변경 사항을 반환합니다. 시간 경과에 따른 성능 향상을 보여주는 테이블이나 차트를 표시하기 위해 클라이언트 측 JavaScript에서 호출할 수 있습니다.

상당한 양의 데이터가 포함된 복잡한 보고서를 만들려면 새 PageSpeed ​​데이터를 사용할 수 있는 시점에서 하루에 한 번 수치를 미리 계산하는 것이 좋습니다. 결국 생성하는 데 몇 분이 걸리는 보고서에서 성능이 어떻게 개선되고 있는지 보여주고 싶지는 않을 것입니다!

요약

Chrome의 Lighthouse 도구는 훌륭하지만 많은 페이지를 자주 평가하는 것은 번거로운 일입니다. PageSpeed ​​Insights API를 사용하면 프로그래밍 방식의 기술을 사용하여 사이트 성능을 평가할 수 있습니다. 혜택:

• 성능 테스트를 자동화할 수 있습니다. 테스트를 실행하는 것을 잊을 수 없습니다.
• 결과는 Google 서버에 수집되므로 로컬 기기 및 네트워크 속도 요소의 영향이 적습니다.
• 메트릭에는 일반적으로 Lighthouse에서 사용할 수 없는 정보가 포함됩니다.
• 업데이트할 때마다 페이지 성능이 개선되었는지 확인하기 위해 시간 경과에 따라 중요한 지표를 기록하고 모니터링할 수 있습니다.
• 성능, 접근성 및 SEO 정보를 단순화된 보고서에 표시할 수 있으므로 개발자, 관리자 및 고객이 한 눈에 볼 수 있습니다.