AutoWebPerf로 감사 자동화

여러 소스에서 성능 데이터를 자동으로 수집할 수 있는 새로운 모듈식 도구입니다.

Antoine Bisch

Gilberto Cocchi

Jonathan Chen

AutoWebPerf(AWP)란 무엇인가요?

AutoWebPerf(AWP)는 여러 소스에서 성능 데이터를 자동으로 수집할 수 있는 모듈식 도구입니다. 현재 Chrome UX 보고서, PageSpeed Insights, WebPageTest 등 다양한 범위 (실험실 및 필드)에서 웹사이트 성능을 측정할 수 있는 여러 도구가 있습니다. AWP는 간단한 설정으로 다양한 감사 도구와의 통합을 제공하므로 사이트 성능을 한곳에서 지속적으로 모니터링할 수 있습니다.

웹 바이탈 가이드가 출시됨에 따라 웹페이지를 면밀하고 적극적으로 모니터링하는 것이 점점 더 중요해지고 있습니다. 이 도구의 엔지니어는 수년간 성능 감사를 수행해 왔으며, 일상적인 활동 중 반복적이고 시간이 많이 소요되는 부분을 자동화하기 위해 AWP를 만들었습니다. 현재 AWP는 어느 정도 성숙도에 이르렀으며 모든 사람이 자동화의 이점을 누릴 수 있도록 광범위하게 공유할 준비가 되었습니다.

이 도구는 GitHub의 AutoWebPerf 공개 저장소에서 액세스할 수 있습니다.

AWP는 무엇을 위한 프로그램인가요?

웹페이지의 성능을 모니터링하는 데 사용할 수 있는 여러 도구와 API가 있지만 대부분은 특정 시점에 측정된 데이터를 노출합니다. 웹사이트를 적절하게 모니터링하고 주요 페이지의 우수한 성능을 유지하려면 시간이 지남에 따라 Core Web Vitals를 지속적으로 측정하고 동향을 관찰하는 것이 좋습니다.

AWP는 엔진과 사전 빌드된 API 통합을 제공하여 이를 더욱 쉽게 해줍니다. 이 통합은 프로그래매틱 방식으로 구성되어 다양한 성능 모니터링 API에 대한 반복 쿼리를 자동화할 수 있습니다.

예를 들어 AWP를 사용하면 홈페이지에서 매일 테스트를 설정하여 CrUX API의 현장 데이터와 PageSpeed Insights의 Lighthouse 보고서의 실험실 데이터를 캡처할 수 있습니다. 이 데이터는 Google Sheets와 같이 시간 경과에 따라 작성 및 저장한 후 데이터 스튜디오 대시보드에서 시각화할 수 있습니다. AWP는 전체 프로세스의 힘든 부분을 자동화하므로 시간이 지남에 따라 실험실 및 현장 동향을 파악하는 데 적합한 솔루션입니다. 자세한 내용은 아래의 데이터 스튜디오에서 감사 결과 시각화를 참고하세요.

아키텍처 개요

AWP는 세 가지 유형의 모듈이 있는 모듈식 기반 라이브러리입니다.

• engine
• 커넥터 모듈
• gatherer 모듈

엔진은 커넥터 (예: 로컬 CSV 파일)에서 테스트 목록을 가져와 선택한 수집기 (예: PageSpeed Insights)를 통해 성능 감사를 실행하고 결과를 출력 커넥터 (예: Google Sheets)에 씁니다.

AWP에는 사전 구현된 여러 수집기와 커넥터가 함께 제공됩니다.

• 사전 구현된 수집기:
  • CrUX API
  • CrUX BigQuery
  • PageSpeed Insights API
  • WebPageTest API
• 사전 구현된 커넥터:
  • Google Sheets
  • JSON
  • CSV

AWP로 감사 자동화

AWP는 PageSpeed Insights, WebPageTest, CrUX API와 같은 선호하는 감사 플랫폼을 통해 성능 감사를 자동화합니다. AWP를 사용하면 테스트 목록을 로드할 위치와 결과를 쓸 위치를 유연하게 선택할 수 있습니다.

예를 들어 다음 명령어를 사용하여 Google Sheets에 저장된 테스트 목록에 대한 감사를 실행하고 결과를 CSV 파일에 쓸 수 있습니다.

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

반복 감사

반복 감사는 매일, 매주 또는 매월 실행할 수 있습니다. 예를 들어 아래와 같이 로컬 JSON으로 정의된 테스트 목록에 대해 일일 감사를 실행할 수 있습니다.

{
  "tests": [
    {
      "label": "web.dev",
      "url": "https://web.dev",
      "gatherer": "psi"
    }
  ]
}

아래 명령어는 로컬 JSON 파일에서 감사 테스트 목록을 읽고 로컬 머신에서 감사를 실행한 후 결과를 로컬 CSV 파일에 출력합니다.

PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

감사를 매일 백그라운드 서비스로 연속 실행하려면 아래 명령어를 대신 사용하면 됩니다.

PSI_APIKEY=<YOUR_KEY> ./awp continue json:tests.json csv:output.csv

또는 Unix와 유사한 환경에서 AWP를 일일 크론 작업으로 실행하도록 crontab을 설정할 수 있습니다.

0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv

AWP GitHub 저장소에서 일일 감사 및 결과 수집을 자동화하는 더 많은 방법을 확인할 수 있습니다.

데이터 스튜디오에서 감사 결과 시각화

코어 웹 바이탈을 지속적으로 측정하는 것과 함께 동향을 평가하고 AWP에서 수집한 실제 사용자 측정항목(RUM) 또는 Chrome UX 보고서(CrUX) 데이터를 사용하여 잠재적 회귀를 발견하는 것도 중요합니다. Chrome UX 보고서(CrUX)는 28일 이동 집계이므로 회귀를 더 빨리 발견할 수 있도록 CrUX와 함께 자체 RUM 데이터도 사용하는 것이 좋습니다.

데이터 스튜디오는 무료로 성능 측정항목을 로드하고 차트로 추세를 그릴 수 있는 무료 시각화 도구입니다. 예를 들어 아래의 시계열 차트는 Chrome UX 보고서 데이터를 기반으로 한 Core Web Vitals를 보여줍니다. 차트 중 하나는 최근 몇 주 동안 누적 레이아웃 이동이 증가하고 있음을 보여줍니다. 즉, 특정 페이지의 레이아웃 안정성이 저하되고 있습니다. 이 시나리오에서는 이러한 페이지의 근본적인 문제를 분석하기 위해 우선적으로 노력하는 것이 좋습니다.

데이터 수집부터 시각화까지의 엔드 투 엔드 프로세스를 간소화하려면 URL 목록으로 AWP를 실행하여 다음 명령어를 사용하여 결과를 Google Sheets로 자동으로 내보낼 수 있습니다.

PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv

스프레드시트에서 일일 측정항목을 수집한 후 스프레드시트에서 직접 데이터를 로드하고 추세를 시계열 차트로 표시하는 데이터 스튜디오 대시보드를 만들 수 있습니다. 데이터 스튜디오에서 시각화할 데이터 소스로 스프레드시트를 사용하여 AWP를 설정하는 방법에 관한 자세한 단계는 Google Sheets API 커넥터를 참고하세요.

다음 단계

AWP는 Core Web Vitals 및 기타 성능 측정항목을 측정하기 위해 지속적인 모니터링 파이프라인을 설정하는 작업을 최소화할 수 있는 간단하고 통합된 방법을 제공합니다. 현재로서는 AWP가 가장 일반적인 사용 사례를 다루며 향후 다른 사용 사례를 해결하기 위해 계속해서 더 많은 기능을 제공할 예정입니다.

AutoWebPerf 저장소에서 자세히 알아보세요.