여러 소스에서 성능 데이터를 자동으로 수집할 수 있는 새로운 모듈식 도구입니다.
AutoWebPerf (AWP)란 무엇인가요?
AutoWebPerf (AWP)는 여러 소스에서 성능 데이터를 자동으로 수집할 수 있는 모듈식 도구입니다. 현재 Chrome UX 보고서, PageSpeed Insights 또는 WebPageTest와 같이 다양한 범위 (실험실 및 현장)에서 웹사이트 성능을 측정하는 데 사용할 수 있는 많은 도구 가 있습니다. AWP는 간단한 설정으로 다양한 감사 도구와 통합을 제공하므로 한곳에서 사이트 성능을 지속적으로 모니터링할 수 있습니다.
Web Vitals 가이드가 출시됨에 따라 웹페이지를 면밀히 적극적으로 모니터링하는 것이 점점 더 중요해지고 있습니다. 이 도구를 만든 엔지니어들은 수년 동안 성능 감사를 진행해 왔으며 일상 활동의 수동적이고 반복적이며 시간이 많이 걸리는 부분을 자동화하기 위해 AWP를 만들었습니다. 오늘날 AWP는 성숙 단계에 도달했으며 누구나 자동화의 이점을 누릴 수 있도록 널리 공유할 준비가 되었습니다.
이 도구는 AutoWebPerf 공개 저장소 에서 GitHub에 액세스할 수 있습니다.
AWP는 무엇을 위한 것인가요?
웹페이지의 성능을 모니터링하는 데 사용할 수 있는 여러 도구와 API가 있지만 대부분 특정 시간에 측정된 데이터를 노출합니다. 웹사이트를 적절히 모니터링하고 주요 페이지의 우수한 성능을 유지하려면 시간이 지남에 따라 Core Web Vitals를 지속적으로 측정하고 추세를 관찰하는 것이 좋습니다.
AWP는 다양한 성능 모니터링 API에 대한 반복 쿼리를 자동화하도록 프로그래매틱 방식으로 구성할 수 있는 엔진과 사전 빌드된 API 통합을 제공하여 이를 더 쉽게 만듭니다.
예를 들어 AWP를 사용하면 홈페이지에서 일일 테스트를 설정하여 CrUX API의 현장 데이터와 PageSpeed Insights의 Lighthouse 보고서의 실험실 데이터를 캡처할 수 있습니다. 이 데이터는 시간이 지남에 따라 Google Sheets에 작성 및 저장한 후 데이터 스튜디오 대시보드에서 시각화할 수 있습니다. AWP는 전체 프로세스의 어려운 부분을 자동화하므로 시간이 지남에 따라 실험실 및 현장 추세를 파악하는 데 유용한 솔루션입니다. 자세한 내용은 아래의 데이터 스튜디오에서 감사 결과 시각화하기를 참고하세요.
아키텍처 개요
AWP는 세 가지 유형의 모듈이 있는 모듈 기반 라이브러리입니다.
- 엔진
- 커넥터 모듈
- 수집기 모듈
엔진은 커넥터의 테스트 목록 (예: 로컬 CSV 파일)을 가져와 선택한 수집기 (예: PageSpeed Insights)를 통해 성능 감사를 실행하고 결과를 출력 커넥터 (예: Google Sheets)에 씁니다.
AWP에는 다음과 같은 여러 사전 구현된 수집기와 커넥터가 함께 제공됩니다.
- 사전 구현된 수집기:
- 사전 구현된 커넥터:
- 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
또는 crontab을(를) Unix와 유사한 환경에서 설정하여 AWP를 일일 크론 작업으로 실행할 수 있습니다.
0 0 * * * PSI_APIKEY=<YOUR_KEY> ./awp run json:tests.json csv:output.csv
AWP GitHub 저장소에서 일일 감사 및 결과 수집을 자동화하는 더 많은 방법을 확인할 수 있습니다.
데이터 스튜디오에서 감사 결과 시각화하기
Core Web Vitals를 지속적으로 측정하는 것과 함께 추세를 평가하고 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 스프레드시트 API 커넥터 를 참고하세요.
다음 단계
AWP는 Core Web Vitals 및 기타 성능 측정항목을 측정하기 위한 지속적인 모니터링 파이프라인을 설정하는 데 필요한 노력을 최소화하는 간단하고 통합된 방법을 제공합니다. 현재 AWP는 가장 일반적인 사용 사례를 다루고 있으며 향후 다른 사용 사례를 해결하기 위한 더 많은 기능을 제공할 예정입니다.
자세한 내용은 AutoWebPerf 저장소를 참고하세요.