여러 소스의 실적 데이터를 자동으로 수집할 수 있는 새로운 모듈식 도구입니다.
AutoWebPerf (AWP)란 무엇인가요?
AutoWebPerf (AWP)는 여러 소스의 성능 데이터를 자동으로 수집할 수 있는 모듈식 도구입니다. 현재 다양한 범위(실습 및 필드)의 웹사이트 성능을 측정하는 데 사용할 수 있는 다양한 도구가 있습니다(예: Chrome UX 보고서, PageSpeed Insights, WebPageTest). AWP는 간단한 설정으로 다양한 감사 도구와의 통합을 제공하므로 한 곳에서 사이트 성능을 지속적으로 모니터링할 수 있습니다.
웹 바이탈 안내가 출시됨에 따라 웹페이지를 능동적으로 면밀하게 모니터링하는 것이 점점 더 중요해지고 있습니다. 이 도구를 만든 엔지니어는 수년간 성능 감사를 수행해 왔으며 일상 업무에서 반복적인 수작업으로 시간이 많이 소요되는 수동 작업을 자동화하기 위해 AWP를 만들었습니다. 오늘날 AWP는 어느 정도의 성숙도에 도달했으며, 누구나 AWP가 제공하는 자동화의 이점을 누릴 수 있도록 광범위하게 공유할 준비가 되었습니다.
이 도구는 GitHub의 AutoWebPerf 공개 저장소에서 액세스할 수 있습니다.
AWP의 용도는 무엇인가요?
웹페이지의 성능을 모니터링하는 데 사용할 수 있는 여러 도구와 API가 있지만 대부분은 특정 시간에 측정된 데이터를 노출합니다. 웹사이트를 적절하게 모니터링하고 주요 페이지의 성능을 유지하려면 시간 경과에 따라 지속적으로 코어 웹 바이탈을 측정하고 추세를 관찰하는 것이 좋습니다.
AWP는 다양한 성능 모니터링 API에 대한 반복 쿼리를 자동화하도록 프로그래매틱 방식으로 구성할 수 있는 엔진 및 사전 빌드된 API 통합을 제공하여 이를 더 쉽게 만듭니다.
예를 들어 AWP를 사용하면 홈페이지에서 일일 테스트를 설정하여 CrUX API의 필드 데이터와 PageSpeed Insights의 Lighthouse 보고서의 실험실 데이터를 캡처할 수 있습니다. 이 데이터는 시간이 지남에 따라(예: Google 스프레드시트) 작성 및 저장된 후 데이터 스튜디오 대시보드에서 시각화될 수 있습니다. AWP는 전체 프로세스에서 힘든 부분을 자동화하여 시간이 지남에 따라 실험실 및 현장 트렌드를 따라가기 위한 훌륭한 솔루션입니다. 자세한 내용은 아래의 데이터 스튜디오에서 감사 결과 시각화를 참조하세요.
아키텍처 개요
AWP는 세 가지 유형의 모듈이 있는 모듈식 기반 라이브러리입니다.
- 엔진
- connector 모듈
- gatherer 모듈
엔진은 커넥터 (예: 로컬 CSV 파일)에서 테스트 목록을 가져오고 선택한 수집기 (예: PageSpeed Insights)를 통해 성능 감사를 실행하고 결과를 출력 커넥터 (예: Google Sheets)에 씁니다.
AWP는 사전 구현된 여러 수집기 및 커넥터와 함께 제공됩니다.
- 사전 구현된 수집기:
- 사전 구현된 커넥터:
- Google Sheets
- JSON
- CSV
AWP로 감사 자동화
AWP는 PageSpeed Insights, WebPageTest 또는 CrUX API와 같은 선호하는 감사 플랫폼을 통해 성능 감사를 자동화합니다. AWP는 테스트 목록을 로드할 위치와 결과를 쓸 위치를 유연하게 선택할 수 있는 기능을 제공합니다.
예를 들어 아래 명령어를 사용하여 Google 시트에 저장된 테스트 목록에 대해 감사를 실행하고 결과를 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와 유사한 환경에서 crontab을 설정하여 AWP를 일일 크론 작업으로 실행할 수 있습니다.
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일 이동 집계이므로 회귀를 더 빨리 발견할 수 있도록 자체 RUM 데이터를 CrUX와 함께 사용하는 것이 좋습니다.
데이터 스튜디오는 실적 측정항목을 손쉽게 로드하고 추세를 차트로 그릴 수 있는 무료 시각화 도구입니다. 예를 들어 아래 시계열 차트는 Chrome UX 보고서 데이터를 기반으로 하는 코어 웹 바이탈을 보여줍니다. 차트 중 하나는 최근 몇 주 동안 누적 레이아웃 이동이 증가하는 것을 보여줍니다. 이는 특정 페이지의 레이아웃 안정성이 회귀됨을 의미합니다. 이 시나리오에서는 이러한 페이지의 근본적인 문제를 분석하는 작업의 우선순위를 정하는 것이 좋습니다.
데이터 수집부터 시각화에 이르는 엔드 투 엔드 프로세스를 간소화하려면 URL 목록과 함께 AWP를 실행하여 다음 명령어를 사용하여 결과를 Google Sheets로 자동으로 내보낼 수 있습니다.
PSI_APIKEY=<YOUR_KEY> SHEETS_APIKEY=<YOUR_KEY> ./awp run sheets:<SheetID> csv:output.csv
일일 측정항목을 스프레드시트로 수집한 후 스프레드시트에서 직접 데이터를 로드하고 추세를 시계열 차트로 표시하는 데이터 스튜디오 대시보드를 만들 수 있습니다. 스프레드시트를 데이터 소스로 사용하여 AWP를 설정하여 데이터 스튜디오에서 시각화하는 방법에 대한 자세한 단계는 Google Sheets API 커넥터를 참조하세요.
다음 단계
AWP는 코어 웹 바이탈 및 기타 성능 측정항목을 측정하기 위해 지속적인 모니터링 파이프라인을 설정하는 작업을 최소화하는 간단하고 통합된 방법을 제공합니다. 현재 AWP는 가장 일반적인 사용 사례를 지원하며 향후 다른 사용 사례를 해결하기 위해 계속 더 많은 기능을 제공할 예정입니다.
AutoWebPerf 저장소에서 자세히 알아보세요.