AutoWebPerf
1.0.0
AutoWebperf menyediakan kerangka kerja yang fleksibel dan dapat diskalakan untuk menjalankan audit kinerja web dengan alat audit sewenang -wenang seperti WebPagetest dan PagesPeedInsights. Perpustakaan ini memungkinkan pengembang untuk mengumpulkan metrik secara konsisten dan menyimpan metrik ke penyimpanan data yang disukai seperti file JSON lokal, Google Sheets, BigQuery, atau database SQL in-house.
Lihat https://web.dev/autowebperf untuk diperkenalkan.
Autowebperf mengambil daftar tes dari platform penyimpanan data yang sewenang-wenang, seperti JSON lokal, Google Sheets, BigQuery, atau database SQL yang diselenggarakan sendiri. Dengan daftar tes, ia mengeksekusi audit berdasarkan setiap konfigurasi tes, mengumpulkan metrik dari sumber data individual ke dalam daftar hasil .
Proses menjalankan audit melalui alat pengukuran (misalnya Webpagetest) didefinisikan dalam pengumpul individu. Logika membaca dan menulis dengan platform data (misalnya JSON lokal) diimplementasikan dalam konektor .
src/connectors/csv-connector untuk detailnya)AutoWebperf berfungsi sebagai agregator audit kinerja yang mengotomatiskan proses audit kinerja dan koleksi metrik melalui beberapa alat pengukuran kecepatan termasuk WebPagetest, PagesPeedInsights, dan Laporan Chrome UX. Karena setiap alat pengukuran kecepatan individu menyediakan metrik audit, AutoWebperf mengumpulkan hasil dan menulis ke platform penyimpanan data yang disukai, seperti JSON lokal, database berbasis cloud, atau googlesheets.
Pertama, klon AWP repo dan jalankan instalasi NPM:
git clone https://github.com/GoogleChromeLabs/AutoWebPerf.git
npm install
Setelah selesai, periksa instalasi dengan menjalankan satu tes dengan perintah berikut:
./awp run examples/tests.json output/results.json
Perintah ini menggunakan file contoh dalam examples/tests.json dan mengembalikan hasilnya ke output/results.json .
Untuk memulai tes berulang, Anda harus menyertakan properti recurring.frequency dalam file uji dan atur pemicu berikutnya dalam file uji. Untuk mengatur waktu pemicu berikutnya dan untuk menjalankan tes satu kali, gunakan perintah ini setelah menambahkan properti recurring.frequency ke tes Anda:
./awp recurring examples/tests-recurring.json output/results.json
Jika ini berhasil, waktu pemicu akan memperbarui basis pada frekuensi yang Anda pilih, dan hasilnya akan ditulis untuk output/results.json .
Setelah waktu pemicu diatur dengan benar, Anda dapat melakukan tes yang dijalankan secara otomatis pada waktu Triger berikutnya dengan perintah continue :
./awp continue examples/tests-recurring.json output/results.json
Ini akan secara otomatis menjalankan setiap tes pada frekuensi yang ditentukan. Informasi lebih lanjut dapat ditemukan di bawah ini di bagian "Jalankan Tes Berulang" di bawah ini.
URL Tunggal: Untuk menguji satu URL melalui PageSpeedInsights:
./awp run url:https://www.thinkwithgoogle.com/ json:output/results.json
Pilih Pengumpul: Untuk menguji URL tunggal dengan pengumpul tertentu seperti PageSpeedInsights atau WebPagetest:
./awp run --gatherers=psi url:https://web.dev json:output/results.json
File CSV: Untuk menjalankan tes yang ditentukan dalam file CSV dan menulis hasil ke file JSON:
./awp run csv:examples/tests.csv json:output/results.json
PAGESPEEDINSIGHTS API: Untuk menjalankan tes PagesPeedInsights dengan kunci API:
PSI_APIKEY=SAMPLE_KEY ./awp run examples/tests.json output/results.json
API WebPagetest: Untuk menjalankan tes webpagetest:
WPT_APIKEY=SAMPLE_KEY ./awp run examples/tests-wpt.json output/results.json
Override vs. Append: Untuk menjalankan tes dan mengganti hasil yang ada di file output
./awp run examples/tests.json output/results.json --override-results
./awp run examples/tests.json output/results.json
Atau, untuk menentukan menggunakan konektor JSON untuk jalur Tests dan jalur Results :
./awp run json:/examples/tests.json json:output/results.json
Tests dan jalur Results : ./awp run csv:/examples/tests.csv csv:output/results.csv
Test dengan URL spesifik untuk audit. Untuk menjalankan audit hanya dengan satu Test dengan URL tertentu: ./awp run url:https://example.com csv:output/results.csv
Harap dicatat bahwa konektor ini hanya berfungsi dengan jalur Tests , bukan untuk jalur Results .
Anda dapat menjalankan yang berikut kapan saja untuk mencetak penggunaan CLI:
./awp --help
Untuk menjalankan tes, Anda dapat menjalankan perintah CLI berikut dengan tes JSON, seperti examples/tests.json , yang berisi serangkaian tes. Anda dapat memeriksa examples/tests.json untuk struktur data tes.
./awp run examples/tests.json output/results.json
Ini akan menghasilkan objek hasil di jalur yang diberikan ke results.json .
Secara default, AWP akan menggunakan JSON sebagai konektor default untuk tes membaca dan hasil menulis. Atau, Anda dapat menentukan konektor yang berbeda dalam format <connector>:<path> .
Misalnya untuk menjalankan tes yang didefinisikan dalam CSV dan menulis hasil di JSON:
./awp run csv:examples/tests.csv json:output/results.csv
Untuk beberapa platform audit seperti WebPagetest, setiap tes mungkin membutuhkan beberapa menit untuk mengambil hasil yang sebenarnya. Untuk jenis audit asinkron ini, setiap hasil akan tetap dalam status "dikirimkan". Anda perlu mengambil hasil secara eksplisit nanti.
Jalankan yang berikut untuk mengambil metrik akhir hasil di results.json .
./awp retrieve examples/tests.json output/results.json
Ini akan mengambil metrik untuk semua platform audit dan memperbarui objek hasil di output/results.json . Anda dapat memeriksa examples/results.json untuk detailnya di objek hasil.
Jika Anda ingin mengatur tes berulang, Anda dapat menentukan objek recurring yang berisi frequency untuk tes itu.
./awp recurring examples/tests-recurring.json output/results.json
Ini akan menghasilkan objek hasil di results.json dan memperbarui waktu pemicu berikutnya ke objek uji aslinya di tests.json . Misalnya objek uji yang diperbarui akan terlihat seperti berikut, dengan nextTriggerTimestamp yang diperbarui.
{
"label": "web.dev",
"url": "https://web.dev",
"recurring": {
"frequency": "Daily",
"nextTriggerTimestamp": 1599692305567,
"activatedFrequency": "Daily"
},
"psi": {
"settings": {
"locale": "en-GB",
"strategy": "mobile"
}
}
}
nextTriggerTimestamp akan diperbarui ke hari berikutnya berdasarkan cap waktu sebelumnya. Ini untuk mencegah berjalan berulang dengan tes yang sama dan untuk menjamin bahwa tes ini dieksekusi hanya sekali sehari.
Dalam sebagian besar sistem operasi seperti UNIX, Anda dapat mengatur pekerjaan cron untuk menjalankan AWP CLI secara berkala.
Misalnya, di MacOS, Anda dapat menjalankan perintah berikut untuk mengatur pekerjaan cron harian dengan AWP:
# Edit the cronjob with a text editor.
EDITOR=nano crontab -e
Tambahkan baris berikut ke crontab untuk menjalankan harian pukul 12:00 pada siang hari. Perhatikan bahwa ini didasarkan pada waktu sistem di mana ia menjalankan AWP.
0 12 * * * PSI_APIKEY=SAMPLE_KEY cd ~/workspace/awp && ./awp run examples/tests.json csv:output/results-recurring.csv
Ekstensi adalah modul untuk membantu AWP menjalankan tes dengan proses dan perhitungan tambahan. Misalnya, ekstensi budgets dapat menambahkan anggaran kinerja dan menghitung delta antara target dan metrik hasil.
Untuk berjalan dengan ekstensi:
./awp run examples/tests.json output/results.json --extensions=budgets
Daftar tes hanyalah serangkaian objek tes, seperti tes sampel di bawah ini. Atau periksa src/examples/tests.js untuk contoh terperinci dari daftar tes.
[{
"label": "Test-1",
"url": "example1.com",
"webpagetest": {
...
}
}, {
"label": "Test-2",
"url": "example2.com",
"psi": {
...
}
}]
Setiap objek Test mendefinisikan audit mana yang akan dijalankan dengan mendefinisikan properti gatherers . Misalnya, Test pertama memiliki properti webpagetest yang mendefinisikan konfigurasi menjalankan audit webpagetest. Test kedua memiliki properti psi yang mendefinisikan cara menjalankan audit PagesPeedInsights.
Setelah menjalankan tes, daftar Results dihasilkan seperti di bawah ini. Setiap Result berisi metrik yang sesuai untuk gatherers yang telah ditentukan seperti webpagetest dan pagespeedInsights. Lihat contoh di bawah ini.
[{
"label": "Test-1",
"url": "example1.com",
"webpagetest": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}, {
"label": "Test-2",
"url": "example2.com",
"psi": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}]
Beberapa conenctor atau pengumpul mungkin memerlukan satu atau lebih variabel lingkungan, seperti kunci API atau jalur ke akun layanan. Misalnya, berjalan dengan pengumpul API Crux membutuhkan kunci API Crux.
Untuk lulus variabel lingkungan di CLI, jalankan perintah dengan penggunaan lingkungan secara teratur VARS:
CRUX_APIKEY=<YOUR_KEY> ./awp run url:https://wev.dev/ json:output/results.json
AWP mendukung pengumpul audit berikut. Silakan periksa dokumentasi yang sesuai untuk detailnya.
Pengumpul WebPagetest menjalankan tes melalui titik akhir webpagetest publik atau instance webpagetest pribadi khusus.
Lihat Docs/WebPagetest.md untuk detail lebih lanjut untuk penggunaan pengumpul webpagetest.
Pengumpul Wawasan Halaman menjalankan tes melalui Public PageSpeed Insights API.
Lihat Docs/psi.md untuk detail lebih lanjut untuk penggunaan pengumpul PSI.
Pengumpul API Crux mengumpulkan metrik kinerja melalui API Laporan UX Chrome.
Lihat Docs/Cruxapi.md untuk detail lebih lanjut untuk penggunaan pengumpul API Crux.
Crox BigQuery Gatherer mengumpulkan metrik kinerja melalui laporan Chrome UX dengan Proyek Google BigQuery publik. Harap noet bahwa Anda perlu mengatur proyek Google Cloud untuk menanyakan tabel BigQuery publik.
Lihat Docs/CruxBigQuery.md untuk detail lebih lanjut untuk penggunaan CRUX API Gatherer.
AWP dirancang dengan modul, termasuk modul untuk menjalankan audit dengan webpagetest, pagespeedInsights, atau alat lain, dan modul untuk membaca/menulis data dari platform data seperti JSON, Googlesheets atau layanan cloud.
Dalam tampilan tingkat tinggi, ada tiga jenis modul:
Mesin AWP menggunakan dua struktur objek JavaScript utama untuk menjalankan audit dan mengumpulkan metrik.
examples/tests.json untuk objek tes yang sebenarnya.examples/results.json untuk objek hasil yang sebenarnya.Untuk menangani alat audit asinkron seperti WebPagetest, AWP memecah siklus audit menjadi tiga langkah tindakan:
Tests dan menghasilkan daftar objek Results .Tests , menghasilkan daftar Results , dan memperbarui NextTrigGerTampamp untuk setiap Test berulang. Tindakan ini berguna saat berjalan dengan tugas-tugas berbasis berkala atau timer seperti pekerjaan cron.Retrieved .Untuk mengatur modul dan konfigurasinya, konfigurasi AWP secara keseluruhan diperlukan sebagai objek JavaScript.
AWP Config memiliki properti yang diperlukan berikut:
connector : Nama konektor.helper : Pembantu untuk konektor tertentu, termasuk penangan API dan fungsi pembantu lainnya, yang akan digunakan dalam pengumpul dan ekstensi.dataSources : Serangkaian sumber audit, seperti webpagetest atau psi . Masing -masing sumber data perlu memiliki file pengumpul yang sesuai di folder src/gatherers .extensions : Sejumlah ekstensi. Setiap ekstensi perlu memiliki file ekstensi yang sesuai di src/extensions .Properti opsional lainnya:
verbose : Apakah akan mencetak pesan verbose.debug : Apakah akan mencetak pesan debug. Contoh konfigurasi berikut berasal dari 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,
}
Dengan contoh konfigurasi di atas, itu akan menggunakan konektor JSON yang membaca dan menulis tes dan hasil sebagai file JSON. Lihat examples/tests.json dan examples/results.json untuk contoh.
Selain properti fundamental, ada beberapa properti tambahan yang digunakan oleh modul:
json sebagai konfigurasi untuk JSonConnector .budgets sebagai Konfigurasi untuk BudgetSextensionContoh membuat instance baru 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,
});
Untuk mengirimkan semua tes:
awp.run();
Untuk mengirimkan tes tertentu menggunakan filter: Ini akan menjalankan tes yang memiliki id = 1 dan dipilih = properti yang benar.
awp.run({
filters: ['id="1"', 'selected'],
});
Untuk mengambil semua hasil yang tertunda, memfilter dengan status! == "Diperoleh".
awp.retrieve({
filters: ['status!=="Retrieved"'],
});
src/utils/pattern-filter.js dengan lebih banyak contoh.Untuk menjalankan tes berulang:
// This will run the actual audit and update the nextTriggerTimestamp.
awp.recurring();
Untuk menjalankan tes dengan ekstensi spesifik:
// This will override the extension list defined in the awpConfig.
awp.run({
extensions: ['budgets']
})
Kelas pengumpul memperluas src/gatherers/gatherer.js dan menimpa metode berikut:
constructor(config, apiHelper, options) :
config : Konfigurasi yang ditentukan dalam properti dengan nama pengumpul ini di konfigurasi AWP. Beberapa alat audit seperti WebPagetest atau PageSpeedInsights memerlukan kunci API. Kunci API untuk pengumpul terletak di config.apiKey .options : Pengaturan tambahan seperti verbose dan debug . run(test, options) :
test : Objek Test untuk menjalankan audit ini. Data yang diperlukan untuk pengumpul ini (misalnya pengaturan atau metadata) akan berada di properti dengan nama pengumpul. Misalnya data untuk WebPagetest akan berada di webpagetest objek Test ini.options : Pengaturan tambahan. retrieve(result, options) :
result : Result Objek untuk Mengambil Metrik Dengan. Data yang diperlukan untuk pengumpul ini akan berada di properti dengan nama pengumpul. Misalnya data dan metrik akan berada di webpagetest dari objek Result ini.options : Pengaturan tambahan seperti verbose dan debug . Kelas konektor memperluas src/connectors/connector.js dan menimpa metode berikut:
constructor(config, apiHandler) :
config : Konfigurasi yang ditentukan dalam properti dengan nama konektor ini di konfigurasi AWP.apiHandler : Contoh penangan API yang digunakan untuk melakukan panggilan API. getConfig() : Metode untuk mengembalikan objek konfigurasi tambahan konektor. Objek konfigurasi ini tergantung di mana konektor ini menyimpan pengaturan tambahannya termasuk tombol API untuk pengumpul. Misalnya, JSonConnector menggunakan tests.json dan membaca pengaturan tambahan dari properti config , termasuk kunci API untuk setiap pengumpul.
getTestList(options) : Metode untuk mengembalikan daftar Tests sebagai array.
updateTestList(newTests, options) : Metode untuk memperbarui daftar Tests , mengingat daftar Tests baru.
getResultList(options) : Metode untuk mengembalikan daftar Results sebagai array.
appendResultList(newResults, options) : Metode untuk menambahkan Results baru ke akhir daftar Results saat ini.
updateResultList(newResults, options) : Metode untuk memperbarui Results yang ada di daftar Results saat ini.
Kelas ekstensi memperluas src/extensions/extension.js dan menimpa metode berikut:
constructor(config) :config : Konfigurasi yang ditentukan dalam properti dengan nama ekstensi ini di konfigurasi AWP.beforeRun(context) : Metode sebelum menjalankan langkah lari untuk Test .context.test : Objek Test yang sesuai.afterRun(context) : Metode setelah menjalankan langkah lari untuk Test .context.test : Objek Test yang sesuai.context.result : Objek Result yang sesuai.beforeAllRuns(context) : Metode sebelum menjalankan langkah Run .context.tests : Semua objek Test dalam menjalankan ini.afterAllRuns(context) : Metode setelah mengeksekusi langkah lari .context.tests : Semua objek Test dalam menjalankan ini.context.results : Semua hasil Result dalam menjalankan ini.beforeRetrieve(context) : Metode sebelum menjalankan langkah pengambilan untuk Result .context.result : Objek Result yang sesuai.afterRetrieve(context) : Metode setelah mengeksekusi langkah pengambilan untuk Result .context.result : Objek Result yang sesuai.beforeAllRetrieves(context) : Metode sebelum mengeksekusi langkah pengambilan .context.result : Objek Result yang sesuai.afterAllRetrieves(context) : Metode setelah mengeksekusi langkah pengambilan .context.result : Objek Result yang sesuai. Objek Test standar berisi sifat -sifat berikut:
(Anda dapat merujuk ke examples/tests.json sebagai contoh.)
selected : Apakah akan melakukan lari untuk Test ini.label : Nama Test ini.url : URL untuk audit.recurring : Pengaturan untuk audit berulang.frequency : String frekuensi yang ditentukan dalam src/common/frequency.js . Misalnya 'setiap hari', 'mingguan' atau 'bulanan'.Pengaturan khusus pengumpul akan berada di properti mereka sendiri dengan nama pengumpul dalam huruf kecil. Misalnya, Pengaturan untuk WebPagetests adalah:
webpagetestsettings : Pengaturan Objek berisi lokasi audit, koneksi, dll.metadata : Objek Metadata berisi ID WebPagetests, JSON URL, dll. Objek Result standar berisi sifat -sifat berikut:
selected : Apakah akan melakukan pengambilan untuk Result ini.id : ID unik yang dihasilkan secara otomatis untuk Result ini.type : Audit Single atau Recurring .status : Submitted , Retrieved atau Error . Lihat src/common/status.js untuk detailnya.label : Label String untuk Result ini. Label ini mewarisi dari objek Test aslinya.url : URL yang diaudit.createdTimestamp : Saat Result ini dibuat.modifiedTimestamp : Ketika Result ini terakhir dimodifikasi. Semua nama metrik yang digunakan dalam AWP diharuskan untuk mengikuti nama, sensitif case. Lihat daftar lengkap metrik standar di src/common/metrics.js
Metrik Waktu
TimeToFirstByteFirstPaintFirstMeaningfulPaintFirstContentfulPaintVisualCompleteSpeedIndexDOMContentLoadedLoadEventTimeToInteractiveTotalBlockingTimeFirstCPUIdleFirstInputDelayLargestContentfulPaintUkuran Sumber Daya
HTMLJavascriptCSSFontsImagesVideosHitungan Sumber Daya
DOMElementsConnectionsRequestsSkor sumber daya
PerformanceProgressiveWebApp Semua kode sumber untuk fungsi utama terletak di folder src . File diatur ke dalam subfolder berikut:
common : Kelas dan definisi umum, seperti status, frekuensi, metrik, dll.connectors : Kelas konektor.extensions : Kelas Ekstensi.gatherers : Kelas Pengumpul.utils : utilitas dan alat. Jalankan perintah berikut untuk menjalankan unit test:
npm test
Untuk menjalankan spesifikasi uji individual, Anda dapat menginstal modul Jest NPM ke mesin lokal Anda:
npm install -g jest
jest test/some-module.test.js
Uji unit didasarkan pada kerangka kerja tes unit jester. Semua tes unit terletak di folder ./test , dan diatur ke dalam subfolder yang sesuai, seperti struktur yang sama seperti pada folder src .
