Autowebperf는 WebPageTest 및 PagesPeedInsights와 같은 임의의 감사 도구를 사용하여 웹 성능 감사를 실행하기위한 유연하고 확장 가능한 프레임 워크를 제공합니다. 이 라이브러리를 통해 개발자는 메트릭을 일관되게 수집하고 로컬 JSON 파일, Google 시트, BigQuery 또는 사내 SQL 데이터베이스와 같은 선호하는 데이터 저장소에 메트릭을 저장할 수 있습니다.
소개는 https://web.dev/autowebperf를 확인하십시오.
Autowebperf는 Local Jsons, Google Sheets, BigQuery 또는 자체 주최 SQL 데이터베이스와 같은 임의의 데이터 저장소 플랫폼에서 테스트 목록을 가져옵니다. 테스트 목록을 사용하면 각 테스트 구성을 기반으로 감사를 실행하고 개별 데이터 소스의 메트릭을 결과 목록으로 수집합니다.
측정 도구 (예 : WebPagetest)를 통해 감사를 실행하는 프로세스는 개별 수집기 에서 정의됩니다. 데이터 플랫폼 (예 : 로컬 JSON)으로 읽기 및 쓰기의 논리는 커넥터 에 구현됩니다.
src/connectors/csv-connector 참조)Autowebperf는 WebPageTest, PagesPeedInsights 및 Chrome UX 보고서를 포함한 여러 속도 측정 도구를 통해 성능 감사 및 메트릭 컬렉션을 자동화하는 성능 감사 농업 자 역할을합니다. 각 개별 속도 측정 도구는 감사 메트릭을 제공하므로 Autowebperf는 결과를 집계하고 로컬 Jsons, 클라우드 기반 데이터베이스 또는 Googlesheet와 같은 선호하는 데이터 스토리지 플랫폼에 씁니다.
먼저 복제 AWP 리포 및 실행 NPM 설치 :
git clone https://github.com/GoogleChromeLabs/AutoWebPerf.git
npm install
완료되면 다음 명령으로 단일 테스트를 실행하여 설치를 확인하십시오.
./awp run examples/tests.json output/results.json
이 명령은 examples/tests.json 에서 예제 파일을 사용하고 결과를 output/results.json 으로 반환합니다.
반복 테스트를 시작하려면 테스트 파일에 recurring.frequency 속성을 포함시키고 테스트 파일에서 다음 트리거를 설정해야합니다. 다음 트리거 시간을 설정하고 일회성 테스트를 실행하려면 재발. recurring.frequency 속성을 테스트에 추가 한 후이 명령을 사용하십시오.
./awp recurring examples/tests-recurring.json output/results.json
이것이 성공하면, 트리거 시간은 선택한 주파수에 대한 기본을 업데이트하고 결과는 output/results.json 에 기록되었을 것입니다.
트리거 시간이 올바르게 설정되면 다음 Triger Time에서 continue 명령을 내릴 수 있습니다.
./awp continue examples/tests-recurring.json output/results.json
이것은 지정된 주파수에서 각 테스트를 자동으로 실행합니다. 자세한 내용은 아래의 "반복 테스트 실행"섹션에서 아래에서 확인할 수 있습니다.
단일 URL : PagesPeedInsights를 통해 단일 URL을 테스트하려면 :
./awp run url:https://www.thinkwithgoogle.com/ json:output/results.json
수집가 선택 : pagespeedinsight 또는 webpagetest와 같은 특정 수집가로 단일 URL을 테스트합니다.
./awp run --gatherers=psi url:https://web.dev json:output/results.json
CSV 파일 : CSV 파일에 정의 된 테스트를 실행하고 결과를 JSON 파일로 작성합니다.
./awp run csv:examples/tests.csv json:output/results.json
PagesPeedInsights API : API 키로 PagesPeedInsights 테스트를 실행합니다.
PSI_APIKEY=SAMPLE_KEY ./awp run examples/tests.json output/results.json
WebPagetest API : WebPagetest 테스트를 실행하려면 :
WPT_APIKEY=SAMPLE_KEY ./awp run examples/tests-wpt.json output/results.json
재정의 대 부속 : 출력 파일에서 테스트를 실행하고 기존 결과를 무시하려면
./awp run examples/tests.json output/results.json --override-results
./awp run examples/tests.json output/results.json
또는 Tests 경로 및 Results 경로에 JSON 커넥터를 사용하여 지정합니다.
./awp run json:/examples/tests.json json:output/results.json
Tests 경로 및 Results 경로에 CSV 커넥터를 사용하여 지정합니다. ./awp run csv:/examples/tests.csv csv:output/results.csv
Test 만 생성합니다. 특정 URL로 하나의 Test 만으로 감사를 실행합니다. ./awp run url:https://example.com csv:output/results.csv
이 커넥터는 Results 경로가 아닌 Tests 경로에서만 작동합니다.
CLI 사용을 인쇄하려면 언제든지 다음을 실행할 수 있습니다.
./awp --help
테스트를 실행하려면 examples/tests.json 과 같이 주어진 테스트 json을 사용하여 다음 CLI 명령을 실행할 수 있으며 테스트 배열이 포함되어 있습니다. 테스트의 데이터 구조에 대해서는 examples/tests.json 확인할 수 있습니다.
./awp run examples/tests.json output/results.json
이렇게 results.json 결과 객체가 생성됩니다.
기본적으로 AWP는 JSON을 읽기 테스트 및 쓰기 결과 모두의 기본 커넥터로 사용합니다. 또는 <connector>:<path> 의 형식으로 다른 커넥터를 지정할 수 있습니다.
예를 들어 CSV에 정의 된 테스트를 실행하고 JSON에서 결과를 쓰십시오.
./awp run csv:examples/tests.csv json:output/results.csv
WebPagetest와 같은 일부 감사 플랫폼의 경우 각 테스트가 실제 결과를 가져 오는 데 몇 분이 걸릴 수 있습니다. 이러한 유형의 비동기 감사의 경우 각 결과는 "제출 된"상태로 유지됩니다. 나중에 결과를 명시 적으로 검색해야합니다.
results.json 에서 결과의 최종 메트릭을 검색하려면 다음을 실행하십시오.
./awp retrieve examples/tests.json output/results.json
이렇게하면 모든 감사 플랫폼에 대한 메트릭을 가져오고 output/results.json 에서 결과 객체로 업데이트됩니다. 결과 객체의 자세한 내용은 examples/results.json 확인할 수 있습니다.
반복 테스트를 설정하려면 해당 테스트의 frequency 포함 된 recurring 객체를 정의 할 수 있습니다.
./awp recurring examples/tests-recurring.json output/results.json
이것은 results.json 에서 결과 객체를 생성하고 다음 트리거 시간을 tests.json 의 원래 테스트 객체로 업데이트합니다. 예를 들어 업데이트 된 Test 객체는 업데이트 된 nextTriggerTimestamp 와 함께 다음과 같습니다.
{
"label": "web.dev",
"url": "https://web.dev",
"recurring": {
"frequency": "Daily",
"nextTriggerTimestamp": 1599692305567,
"activatedFrequency": "Daily"
},
"psi": {
"settings": {
"locale": "en-GB",
"strategy": "mobile"
}
}
}
nextTriggerTimestamp 는 이전 타임 스탬프를 기반으로 다음 날까지 업데이트됩니다. 이는 동일한 테스트로 반복 실행을 방지 하고이 테스트가 하루에 한 번만 실행되도록 보장하기위한 것입니다.
대부분의 UNIX와 같은 운영 체제에서는 AWP CLI를 주기적으로 실행하기 위해 CRON 작업을 설정할 수 있습니다.
예를 들어, MACOS에서는 다음 명령을 실행하여 AWP로 매일 CRON 작업을 설정할 수 있습니다.
# Edit the cronjob with a text editor.
EDITOR=nano crontab -e
정오에 12시에 매일 달리기 위해 다음 줄을 크론 타브에 추가하십시오. 이것은 AWP를 실행하는 시스템 시간을 기반으로합니다.
0 12 * * * PSI_APIKEY=SAMPLE_KEY cd ~/workspace/awp && ./awp run examples/tests.json csv:output/results-recurring.csv
확장은 AWP가 추가 프로세스 및 계산으로 테스트를 실행하도록 지원하는 모듈입니다. 예를 들어, budgets 확장은 성능 예산을 추가하고 대상과 결과 메트릭 사이의 델타를 계산할 수 있습니다.
확장으로 실행하려면 :
./awp run examples/tests.json output/results.json --extensions=budgets
테스트 목록은 단순히 아래 샘플 테스트와 같이 일련의 테스트 객체입니다. 또는 테스트 목록의 자세한 예제는 src/examples/tests.js 확인하십시오.
[{
"label": "Test-1",
"url": "example1.com",
"webpagetest": {
...
}
}, {
"label": "Test-2",
"url": "example2.com",
"psi": {
...
}
}]
각 Test 객체는 gatherers 속성을 정의하여 실행할 감사를 정의합니다. 예를 들어, 첫 번째 Test 에는 webpagetest 속성이있어 WebPageTest 감사 실행 구성을 정의합니다. 두 번째 Test 에는 PagesPeedInsights 감사를 실행하는 방법을 정의하는 psi 속성이 있습니다.
테스트를 실행 한 후 Results 목록이 아래와 같이 생성됩니다. 각 Result 에는 WebPageTest 및 PagesPeedInsights와 같은 사전 정의 된 gatherers 에 대한 해당 메트릭이 포함됩니다. 아래 예제를 참조하십시오.
[{
"label": "Test-1",
"url": "example1.com",
"webpagetest": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}, {
"label": "Test-2",
"url": "example2.com",
"psi": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}]
일부 Conenctors 또는 Gatherer는 API 키 또는 서비스 계정과 같은 하나 이상의 환경 변수가 필요할 수 있습니다. 예를 들어 Crux API 수집기로 실행하려면 CRUX API 키가 필요합니다.
CLI의 환경 변수를 전달하려면 정기적 인 환경 사용량으로 명령을 실행하십시오.
CRUX_APIKEY=<YOUR_KEY> ./awp run url:https://wev.dev/ json:output/results.json
AWP는 다음 감사 수집자를 지원합니다. 자세한 내용은 해당 문서를 확인하십시오.
WebPageTest 수집기는 공개 WebPageTest 엔드 포인트 또는 사용자 정의 개인 WebPagetest 인스턴스를 통해 테스트를 실행합니다.
WebPagetest 수집기 사용에 대한 자세한 내용은 Docs/WebPagetest.md를 참조하십시오.
PagesPeed Insights Gatherer는 공개 PagesPeed Insights API를 통해 테스트를 실행합니다.
PSI 수집가 사용에 대한 자세한 내용은 DOCS/PSI.MD를 참조하십시오.
Crux API 수집가는 Chrome UX Report API를 통해 성능 메트릭을 수집합니다.
Crux API 수집기 사용에 대한 자세한 내용은 Docs/Cruxapi.md를 참조하십시오.
Crux BigQuery Gatherer는 Chrome UX 보고서를 통해 공개 Google BigQuery 프로젝트를 통해 성능 메트릭을 수집합니다. 공개 BigQuery 테이블을 쿼리하려면 Google 클라우드 프로젝트를 설정 해야하는 Noet이 필요합니다.
Crux API 수집기 사용에 대한 자세한 내용은 Docs/Cruxbigquery.md를 참조하십시오.
AWP는 WebPageTest, PagesPeedInsights 또는 기타 도구로 감사를 실행하기위한 모듈, JSON, GOOGLESHEETS 또는 클라우드 서비스와 같은 데이터 플랫폼의 데이터를 읽고 쓰기위한 모듈을 포함한 모듈로 설계되었습니다.
높은 수준의 관점에서는 세 가지 유형의 모듈이 있습니다.
AWP 엔진은 감사를 실행하고 메트릭을 수집하기 위해 두 가지 주요 JavaScript 객체 구조를 사용합니다.
examples/tests.json 참조 할 수 있습니다.examples/results.json 참조 할 수 있습니다.WebPagetest와 같은 비동기 감사 도구를 처리하기 위해 AWP는 감사주기를 세 단계의 조치로 나눕니다.
Tests 목록을 가져 와서 Results 객체 목록을 생성합니다.Tests 목록을 취하고 Results 목록을 생성하며 각 반복 Test 에 대한 NextTriggerTimestamp를 업데이트합니다. 이 작업은 CRON 작업과 같은 주기적 또는 타이머 기반 작업으로 실행할 때 유용합니다.Retrieved 되지 않은 상태에서 메트릭을 수집합니다.모듈 및 구성을 설정하려면 전체 AWP 구성이 JavaScript 객체로 필요합니다.
AWP 구성에는 다음과 같은 필수 속성이 있습니다.
connector : 커넥터의 이름.helper : API 핸들러 및 기타 도우미 기능을 포함한 특정 커넥터의 도우미는 수집기 및 확장에 사용됩니다.dataSources : webpagetest 또는 psi 와 같은 감사 소스 배열. 각 데이터 소스에는 src/gatherers 폴더에 해당 수집기 파일이 있어야합니다.extensions : 확장 배열. 각 확장자는 src/extensions 에 해당 확장 파일이 있어야합니다.기타 선택적 특성 :
verbose : 장황 메시지를 인쇄할지 여부.debug : 디버그 메시지 인쇄 여부. 다음 구성 예는 examples/awp-config.js 에서 나옵니다.
{
connector: 'JSON',
helper: 'Node',
dataSources: ['webpagetest'],
json: { // Config for JSON Connector.
tests: 'tests.json',
results: 'results.json',
},
extensions: [
'budgets',
],
budgets: { // Config for Budgets extension.
dataSource: 'webpagetest',
},
verbose: true,
debug: false,
}
위의 예제 구성을 사용하면 JSON 파일로 테스트 및 결과를 읽고 쓴 JSON 커넥터를 사용합니다. examples/tests.json 및 examples/results.json 참조하십시오.
기본 속성 외에도 모듈에서 사용하는 몇 가지 추가 특성이 있습니다.
json 속성.budgets 부동산은 예산 확장을 위한 구성입니다AWP의 새로운 인스턴스를 만드는 예 :
let awp = new AutoWebPerf({
connector: 'JSON',
helper: 'Node',
dataSources: ['webpagetest'],
extensions: extensions,
json: { // Config for JSON connector.
tests: argv['tests'],
results: argv['results'],
},
verbose: verbose,
debug: debug,
});
모든 테스트를 제출하려면 :
awp.run();
필터를 사용하여 특정 테스트를 제출하려면 : ID = 1이고 선택한 = true 속성이있는 테스트가 실행됩니다.
awp.run({
filters: ['id="1"', 'selected'],
});
보류중인 모든 결과를 검색하려면 상태로 필터링하십시오! == "검색".
awp.retrieve({
filters: ['status!=="Retrieved"'],
});
src/utils/pattern-filter.js 확인하십시오.반복 테스트를 실행하려면 :
// This will run the actual audit and update the nextTriggerTimestamp.
awp.recurring();
특정 확장으로 테스트를 실행하려면 :
// This will override the extension list defined in the awpConfig.
awp.run({
extensions: ['budgets']
})
수집가 클래스는 src/gatherers/gatherer.js 확장하고 다음 방법을 무시합니다.
constructor(config, apiHelper, options) :
config : AWP 구성 에이 수집기 이름이있는 속성에 정의 된 구성. WebPagetest 또는 PagesPeedInsight와 같은 일부 감사 도구에는 API 키가 필요합니다. 수집기의 API 키는 config.apiKey 에 있습니다.options : verbose 및 debug 와 같은 추가 설정. run(test, options) :
test :이 감사 실행에 대한 Test 개체. 이 수집기 (예 : 설정 또는 메타 데이터)에 필요한 데이터는 수집자 이름이있는 속성에 있습니다. 예를 들어 WebPagetest의 데이터는이 Test 객체의 webpagetest 에 있습니다.options : 추가 설정. retrieve(result, options) :
result : 메트릭을 검색하는 Result 개체. 이 수집자에게 필요한 데이터는 수집가의 이름이있는 속성에 있습니다. 예를 들어 데이터와 메트릭은이 Result 객체의 webpagetest 에 있습니다.options : verbose 및 debug 와 같은 추가 설정. 커넥터 클래스는 src/connectors/connector.js 확장하고 다음 방법을 재정의합니다.
constructor(config, apiHandler) :
config : AWP 구성 에이 커넥터의 이름이있는 속성에 정의 된 구성.apiHandler : API 호출에 사용되는 API 핸들러 인스턴스. getConfig() : 커넥터의 추가 구성 객체를 반환하는 메소드. 이 구성 객체는이 커넥터가 수집기 용 API 키를 포함한 추가 설정을 저장하는 위치에 따라 다릅니다. 예를 들어, JSONCONNECTOR는 tests.json 을 사용하고 각 수집기에 대한 API 키를 포함하여 config 속성에서 추가 설정을 읽습니다.
getTestList(options) : Tests 목록을 배열로 반환하는 메소드.
updateTestList(newTests, options) : 새로운 Tests 목록이 주어지면 Tests 목록을 업데이트하는 방법입니다.
getResultList(options) : Results 목록을 배열로 반환하는 메소드.
appendResultList(newResults, options) : 현재 Results 목록의 끝에 새로운 Results 추가하는 방법.
updateResultList(newResults, options) : 현재 Results 목록에서 기존 Results 업데이트하는 방법.
확장 클래스는 src/extensions/extension.js 확장하고 다음 방법을 재정의합니다.
constructor(config) :config :이 확장자 이름이 AWP 구성에있는 속성에 정의 된 구성.beforeRun(context) : Test 위한 실행 단계를 실행하기 전의 메소드.context.test : 해당 Test 객체.afterRun(context) : Test 위한 실행 단계를 실행 한 후 메소드.context.test : 해당 Test 객체.context.result : 해당 Result 객체.beforeAllRuns(context) : 실행 단계를 실행하기 전의 메소드.context.tests :이 실행 의 모든 Test 개체.afterAllRuns(context) : 실행 단계를 실행 한 후 메소드.context.tests :이 실행 의 모든 Test 개체.context.results :이 실행 의 모든 Result 객체.beforeRetrieve(context) : Result 에 대한 검색 단계를 실행하기 전에 메소드.context.result : 해당 Result 객체.afterRetrieve(context) : Result 위해 검색 단계를 실행 한 후 메소드.context.result : 해당 Result 객체.beforeAllRetrieves(context) : 검색 단계를 실행하기 전에 방법.context.result : 해당 Result 객체.afterAllRetrieves(context) : 검색 단계를 실행 한 후 방법.context.result : 해당 Result 객체. 표준 Test 개체에는 다음 속성이 포함됩니다.
(예를 들어 examples/tests.json 참조 할 수 있습니다.)
selected :이 Test 에서 실행을 수행할지 여부.label :이 Test 의 이름.url : 감사 할 URL.recurring : 반복 감사를위한 설정.frequency : src/common/frequency.js 에 정의 된 주파수 문자열. 예 : '매일', '주간'또는 '월간'.수집가 별 설정은 수집가의 이름을 소문자로하여 자체 재산에 있습니다. 예를 들어 WebPagetests 의 설정은 다음과 같습니다.
webpagetestsettings : 객체 설정 감사 위치, 연결 등이 포함됩니다.metadata : 메타 데이터 객체는 WebPagetests의 ID, JSON URL 등을 포함합니다. 표준 Result 객체에는 다음 속성이 포함됩니다.
selected :이 Result 에 대한 검색을 수행할지 여부.id :이 Result 에 대한 자동 생성 고유 ID.type : Single 또는 Recurring 감사.status : Submitted , Retrieved 또는 Error . 자세한 내용은 src/common/status.js 를 참조하십시오.label :이 Result 에 대한 문자열 레이블. 이 레이블은 원래 Test 객체에서 상속됩니다.url : 감사 URL.createdTimestamp :이 Result 생성 될 때.modifiedTimestamp :이 Result 마지막으로 수정되면. AWP에 사용 된 모든 메트릭 이름은 이름, 사례에 민감한 이름을 따라야합니다. src/common/metrics.js 의 표준화 된 메트릭의 전체 목록을 참조하십시오
타이밍 메트릭
TimeToFirstByteFirstPaintFirstMeaningfulPaintFirstContentfulPaintVisualCompleteSpeedIndexDOMContentLoadedLoadEventTimeToInteractiveTotalBlockingTimeFirstCPUIdleFirstInputDelayLargestContentfulPaint자원 크기
HTMLJavascriptCSSFontsImagesVideos자원 수
DOMElementsConnectionsRequests리소스 점수
PerformanceProgressiveWebApp 주요 기능의 모든 소스 코드는 src 폴더에 있습니다. 파일은 다음 하위 폴더로 구성됩니다.
common : 상태, 빈도, 메트릭 등과 같은 공통 클래스 및 정의 등connectors : 커넥터 클래스.extensions : 확장 클래스.gatherers : 수집가 수업.utils : 유틸리티 및 도구. 단위 테스트를 실행하려면 다음 명령을 실행하십시오.
npm test
개별 테스트 사양을 실행하려면 Jest NPM 모듈을 로컬 컴퓨터에 설치할 수 있습니다.
npm install -g jest
jest test/some-module.test.js
단위 테스트는 JEST 단위 테스트 프레임 워크를 기반으로합니다. 모든 단위 테스트는 ./test 폴더에 있으며 src 폴더와 동일한 구조와 동일한 구조와 자체 해당 하위 폴더로 구성됩니다.