AutoweBperf предоставляет гибкую и масштабируемую структуру для подведения аудитов веб -производительности с помощью произвольных инструментов аудита, таких как WebPageTest и PageSpeedInsights. Эта библиотека позволяет разработчикам последовательно собирать метрики и хранить метрики в предпочтительном хранилище данных, таких как локальные файлы JSON, Google Sheets, BigQuery или собственная база данных SQL.
Проверьте https://web.dev/autowebperf для введения.
Autowebperf берет список тестов из произвольной платформы хранилища данных, таких как локальные JSons, Google Sheets, BigQuery или самостоятельная база данных SQL. Со списком тестов он выполняет аудиты на основе каждой тестовой конфигурации, собирает метрики из отдельных источников данных в список результатов .
Процесс проведения аудита с помощью инструмента измерения (например, WebPageTest) определяется в отдельном собрании . Логика чтения и письма с платформой данных (например, Local JSON) реализована в разъеме .
src/connectors/csv-connector для получения подробной информации)Autowebperf служит агрегатором аудита производительности, который автоматизирует процесс сбора аудита и метриков производительности с помощью нескольких инструментов измерения скорости, включая веб -сайт, PageSpeedInsights и Chrome UX Report. Поскольку каждый отдельный инструмент измерения скорости предоставляет метрики аудита, AutoWebperf собирает результаты и записывает любую предпочтительную платформу хранения данных, такую как локальные JSONS, облачная база данных или GoogleShips.
Во -первых, клон AWP Repo и запустите NPM Install:
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 .
После того, как время запуска будет правильно установлено, вы можете автоматически пробежать свои тесты в следующее время тригера с командой continue :
./awp continue examples/tests-recurring.json output/results.json
Это автоматически запускает каждый тест на указанной частоте. Более подробную информацию можно найти ниже в разделе «Запуск повторяющихся тестов» ниже.
Одиночный URL: проверить один URL -адрес с помощью PageSpeedInsights:
./awp run url:https://www.thinkwithgoogle.com/ json:output/results.json
Выберите сборщика: чтобы проверить один URL -адрес с конкретным собранием, таким как PageSpeedInsights или WebPageTest:
./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: запустить тесты PageSpeedInsights с ключом API:
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
В качестве альтернативы, чтобы указать использование разъема JSON для пути Tests и пути Results :
./awp run json:/examples/tests.json json:output/results.json
Tests и пути Results : ./awp run csv:/examples/tests.csv csv:output/results.csv
Test с определенным URL -адресом для аудита. Чтобы провести аудит только с одним Test с определенным URL: ./awp run url:https://example.com csv:output/results.csv
Обратите внимание, что этот разъем работает только с пути Tests , а не для пути Results .
Вы можете запустить следующее в любое время для печати использования CLI:
./awp --help
Чтобы запустить тесты, вы можете запустить следующую команду CLI с данными тестами JSON, например, examples/tests.json , которая содержит множество тестов. Вы можете проверить 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 для получения подробной информации в объектах результатов.
Если вы хотите настроить повторяющиеся тесты, вы можете определить recurring объект, который содержит frequency для этого теста.
./awp recurring examples/tests-recurring.json output/results.json
Это будет генерировать объект результата в results.json и обновляет следующее время триггера до исходного тестового объекта в tests.json . Например, обновленный тестовый объект будет выглядеть следующим образом, с обновленным nextTriggerTimestamp .
{
"label": "web.dev",
"url": "https://web.dev",
"recurring": {
"frequency": "Daily",
"nextTriggerTimestamp": 1599692305567,
"activatedFrequency": "Daily"
},
"psi": {
"settings": {
"locale": "en-GB",
"strategy": "mobile"
}
}
}
nextTriggerTimestamp будет обновлен на следующий день в зависимости от предыдущей метки времени. Это должно предотвратить повторные прогоны с тем же тестом и гарантировать, что этот тест выполняется только один раз в день.
В большинстве Unix, подобных операционной системе, вы можете настроить задание Cron для периодического запуска CLI AWP.
Например, в MacOS вы можете запустить следующие команды, чтобы настроить повседневную работу Cron с AWP:
# Edit the cronjob with a text editor.
EDITOR=nano crontab -e
Добавьте следующую строку в Crontab для ежедневного пробега в 12:00 в полдень. Обратите внимание, что это основано на системном времени, где он запускает 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 имеет свойство psi , которое определяет, как запускать аудит PageSpeedInsights.
После запуска тестов список Results генерируется ниже. Каждый Result содержит соответствующие показатели для предопределенных gatherers , таких как WebPageTest и PageSpeedInsights. См. Пример ниже.
[{
"label": "Test-1",
"url": "example1.com",
"webpagetest": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}, {
"label": "Test-2",
"url": "example2.com",
"psi": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}]
Некоторым конкататорам или сборщикам может потребоваться одна или несколько переменных окружающей среды, таких как клавиши API или путь к учетной записи службы. Например, для работы с Crux API -сборщиком требуется ключ CRUX API.
Чтобы передать переменные окружающей среды в CLI, запустите команду с регулярным использованием Environment Vars:
CRUX_APIKEY=<YOUR_KEY> ./awp run url:https://wev.dev/ json:output/results.json
AWP поддерживает следующие сборщики аудита. Пожалуйста, ознакомьтесь с соответствующими документами для получения подробной информации.
Сборник WebPageTest проводит тесты через общедоступные конечные конечные точки, либо на пользовательском частном экземпляре WebPageTest.
См. Docs/webpageTest.md для получения более подробной информации для использования веб -пакета.
Сборник PageSpeed Insights проводит тесты через API Public PageSpeed Insights.
См. Docs/psi.md для получения более подробной информации для использования PSI Satcherer.
Сборник API CRUX собирает метрики производительности через API Chrome UX Report.
См. Docs/cruxapi.md для получения более подробной информации о использовании Crux API -сборщика.
Сборник Crux BigQuery собирает метрики производительности через отчет Chrome UX со своим публичным проектом Google BigQuery. Пожалуйста, не понадобится настроить Google Cloud Project, чтобы запросить публичный таблицу BigQuery.
См. Docs/cruxbigquery.md для получения более подробной информации для использования Crux API.
AWP разработан с помощью модулей, включая модули для проведения аудитов с WebPageTest, PageSpeedInsights или другими инструментами, а также модули для чтения/написания данных с платформ данных, таких как JSON, GoogleShips или облачный сервис.
В представлении высокого уровня есть три типа модулей:
Двигатель AWP использует две основные структуры объектов JavaScript для проведения аудитов и сбора метрик.
examples/tests.json для фактического тестового объекта.examples/results.json для фактического объекта результата.Чтобы справиться с асинхронным инструментом аудита, таким как WebPageTest, AWP разбивает цикл аудита на три шага действий:
Tests и генерирует список объектов Results .Tests , генерирует список Results и обновляет Nexttriggertimestamp для каждого повторяющегося Test . Это действие полезно при работе с периодическими или на основе таймеров, такими как Cron Job.Retrieved статусе.Для настройки модулей и их конфигураций в качестве объекта JavaScript требуется общая конфигурация AWP.
AWP Config имеет следующие необходимые свойства:
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 Connector, который считывает и записывает тесты и результаты в виде файлов JSON. См. examples/tests.json и examples/results.json для примеров.
В дополнение к фундаментальным свойствам, есть несколько дополнительных свойств, используемых модулями:
json в качестве конфигурации для JSonConnector .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 и выбрал = истинные свойства.
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 или PageSpeedInsights, требуют клавиш API. Ключ API для сборщика расположен в config.apiKey .options : Дополнительные настройки, такие как verbose и debug . run(test, options) :
test : Test объект для этого аудита. Данные, необходимые для этого сборщика (например, настройки или метаданных), будут в собственности с именем собирателя. Например, данные для WebPageTest будут в webpagetest этого Test объекта.options : Дополнительные настройки. retrieve(result, options) :
result : Result объекта для получения метрик. Данные, необходимые для этого собрания, будут в собственности с именем собрателя. Например, данные и метрики будут в webpagetest этого объекта Result .options : Дополнительные настройки, такие как verbose и debug . Класс разъема расширяет src/connectors/connector.js и переопределяет следующие методы:
constructor(config, apiHandler) :
config : конфигурация, определенная в свойстве с именем этого соединителя в конфигурации AWP.apiHandler : экземпляр API -обработчика, используемый для вызова API. getConfig() : метод для возврата дополнительного объекта конфигурации разъема. Этот объект конфигурации зависит от того, где этот разъем хранит свои дополнительные настройки, включая клавиши API для сборщиков. Например, JSonConnector использует tests.json и считывает дополнительные настройки из свойства config , включая клавиши API для каждого сборщика.
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 . Например, «ежедневно», «еженедельно» или «ежемесячно».Настройки, специфичные для собирателя, будут в их собственной собственности с именем собирателя в нижнем случае. Например, настройки для веб -пакетов будут:
webpagetestsettings : Настройка объекта содержит местоположение аудита, соединение и т. Д.metadata : объект метаданных содержит идентификатор WebPageTests, URL JSON и т. Д. Стандартный объект Result содержит следующие свойства:
selected : выполнить ли извлечение для этого Result .id : автоматическая уникальная идентификация для этого Result .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
Модульный тест основан на структуре теста на шутку. Все модульные тесты расположены в папке ./test и организованы в свои собственные подпапки, как та же структура, что и в папке src .