AutoWebPerf
1.0.0
AutoWebperf proporciona un marco flexible y escalable para ejecutar auditorías de rendimiento web con herramientas de auditoría arbitrarias como WebPageTest y PageSpeedInsights. Esta biblioteca permite a los desarrolladores recopilar métricas de manera consistente y almacenar métricas en un almacén de datos preferido, como archivos JSON locales, hojas de Google, BigQuery o una base de datos SQL interna.
Echa un vistazo a https://web.dev/autowebperf para su introducción.
AutoWebPerf toma una lista de pruebas de una plataforma arbitraria de almacenes de datos, como Jsons Local, Hojas de Google, BigQuery o una base de datos SQL autohostada. Con la lista de pruebas, ejecuta auditorías basadas en cada configuración de prueba, recopila métricas de fuentes de datos individuales en una lista de resultados .
El proceso de ejecutar una auditoría a través de una herramienta de medición (por ejemplo, WebPageTest) se define en el recolector individual. La lógica de lectura y escritura con una plataforma de datos (por ejemplo, JSON local) se implementa en un conector .
src/connectors/csv-connector para más detalles)AutoWebPerf sirve como un agregador de auditoría de rendimiento que automatiza el proceso de auditoría de rendimiento y la recopilación de métricas a través de herramientas de medición de velocidad múltiple que incluyen WebPageTest, PageSpeedInsights y el informe Chrome UX. Como cada herramienta de medición de velocidad individual proporciona métricas de auditoría, AutoWebPerf agrega los resultados y las escrituras a cualquier plataforma de almacenamiento de datos preferida, como Jsons locales, base de datos basada en la nube o hojas de Google.
Primero, Clone AWP Repo y ejecute la instalación de NPM:
git clone https://github.com/GoogleChromeLabs/AutoWebPerf.git
npm install
Una vez terminado, verifique la instalación ejecutando una sola prueba con el siguiente comando:
./awp run examples/tests.json output/results.json
Este comando usa el archivo de ejemplo en examples/tests.json y devuelve los resultados a output/results.json .
Para comenzar a las pruebas recurrentes, deberá incluir una propiedad recurring.frequency en el archivo de prueba y establecer el siguiente activador en el archivo de prueba. Para configurar el siguiente tiempo de activación y ejecutar una prueba única, use este comando después de agregar la propiedad recurring.frequency .
./awp recurring examples/tests-recurring.json output/results.json
Si esto fuera exitoso, el tiempo de activación tendrá una base actualizada en la frecuencia elegida, y un resultado se habría escrito en output/results.json .
Una vez que el tiempo de activación se establece correctamente, puede realizar sus pruebas automáticamente en la siguiente hora de Triger con el comando continue :
./awp continue examples/tests-recurring.json output/results.json
Esto ejecutará automáticamente cada prueba a la frecuencia especificada. Se puede encontrar más información a continuación en la sección "Ejecutar pruebas recurrentes" a continuación.
URL individual: para probar una sola URL a través de PageSpeedInsights:
./awp run url:https://www.thinkwithgoogle.com/ json:output/results.json
Pick Reather: Probar una sola URL con un recolector específico como PageSpeedInsights o WebPagetest:
./awp run --gatherers=psi url:https://web.dev json:output/results.json
Archivo CSV: para ejecutar pruebas definidas en un archivo CSV y escribir resultados en un archivo JSON:
./awp run csv:examples/tests.csv json:output/results.json
API de PageSpeedinSights: ejecutar las pruebas de PageSpeedInsights con una clave API:
PSI_APIKEY=SAMPLE_KEY ./awp run examples/tests.json output/results.json
API WebPageTest: para ejecutar pruebas de WebPageTest:
WPT_APIKEY=SAMPLE_KEY ./awp run examples/tests-wpt.json output/results.json
Anular vs. append: para ejecutar las pruebas y anular los resultados existentes en el archivo de salida
./awp run examples/tests.json output/results.json --override-results
./awp run examples/tests.json output/results.json
Alternativamente, para especificar usando el conector JSON para la ruta Tests y la ruta Results :
./awp run json:/examples/tests.json json:output/results.json
Tests y la ruta Results : ./awp run csv:/examples/tests.csv csv:output/results.csv
Test con una URL específica para la auditoría. Para ejecutar una auditoría con una sola Test con una URL específica: ./awp run url:https://example.com csv:output/results.csv
Tenga en cuenta que este conector solo funciona con la ruta Tests , no para la ruta Results .
Puede ejecutar el siguiente tiempo para imprimir usos de CLI:
./awp --help
Para ejecutar pruebas, puede ejecutar el siguiente comando CLI con pruebas dadas JSON, como examples/tests.json , que contiene una variedad de pruebas. Puede consultar los examples/tests.json para la estructura de datos de las pruebas.
./awp run examples/tests.json output/results.json
Esto generará los objetos de resultados en la ruta dada a results.json .
De forma predeterminada, AWP usará JSON como conector predeterminado para pruebas de lectura y escritura de resultados. Alternativamente, puede especificar un conector diferente en el formato de <connector>:<path> .
Por ejemplo, ejecutar pruebas definidas en CSV y escribir resultados en JSON:
./awp run csv:examples/tests.csv json:output/results.csv
Para algunas plataformas de auditoría como WebPageTest, cada prueba puede tardar unos minutos en obtener resultados reales. Para este tipo de auditorías asincrónicas , cada resultado permanecerá en estado "enviado". Deberá recuperar explícitamente los resultados más tarde.
Ejecute lo siguiente para recuperar las métricas finales de resultados en los results.json . JSON.
./awp retrieve examples/tests.json output/results.json
Esto obtendrá métricas para todas las plataformas de auditoría y se actualizará al objeto de resultados en la output/results.json . Puede consultar examples/results.json para obtener detalles en los objetos de resultados.
Si desea configurar pruebas recurrentes, puede definir el objeto recurring que contiene frequency para esa prueba.
./awp recurring examples/tests-recurring.json output/results.json
Esto generará el objeto de resultados en el results.json y actualiza el siguiente tiempo de activación a su objeto de prueba original en tests.json . Por ejemplo, el objeto de prueba actualizado se vería como el siguiente, con el nextTriggerTimestamp actualizado.
{
"label": "web.dev",
"url": "https://web.dev",
"recurring": {
"frequency": "Daily",
"nextTriggerTimestamp": 1599692305567,
"activatedFrequency": "Daily"
},
"psi": {
"settings": {
"locale": "en-GB",
"strategy": "mobile"
}
}
}
El nextTriggerTimestamp se actualizará al día siguiente en función de la marca de tiempo anterior. Esto es para evitar las ejecuciones repetidas con la misma prueba y garantizar que esta prueba se ejecute solo una vez al día.
En la mayoría del sistema operativo similar a UNIX, puede configurar un trabajo cron para ejecutar la CLI AWP periódicamente.
Por ejemplo, en MacOS, puede ejecutar los siguientes comandos para configurar un trabajo de cron diario con AWP:
# Edit the cronjob with a text editor.
EDITOR=nano crontab -e
Agregue la siguiente línea al Crontab para una carrera diaria a las 12:00 al mediodía. Tenga en cuenta que esto se basa en el tiempo del sistema donde ejecuta AWP.
0 12 * * * PSI_APIKEY=SAMPLE_KEY cd ~/workspace/awp && ./awp run examples/tests.json csv:output/results-recurring.csv
Una extensión es un módulo para ayudar a AWP a ejecutar pruebas con procesos y cálculo adicionales. Por ejemplo, la extensión budgets puede agregar presupuestos de rendimiento y calcular el delta entre los objetivos y las métricas de resultados.
Para correr con extensiones:
./awp run examples/tests.json output/results.json --extensions=budgets
La lista de pruebas es simplemente una variedad de objetos de pruebas, como las pruebas de muestra a continuación. O consulte src/examples/tests.js para obtener un ejemplo detallado de la lista de pruebas.
[{
"label": "Test-1",
"url": "example1.com",
"webpagetest": {
...
}
}, {
"label": "Test-2",
"url": "example2.com",
"psi": {
...
}
}]
Cada objeto Test define qué auditorías se ejecutarán definiendo la propiedad gatherers . Por ejemplo, la primera Test tiene una propiedad webpagetest que define la configuración de ejecutar una auditoría WebPageTest. La segunda Test tiene una propiedad psi que define cómo ejecutar la auditoría de PageSpeedInsights.
Después de ejecutar pruebas, se genera una lista de Results como a continuación. Cada Result contiene sus métricas correspondientes a los gatherers predefinidos, como WebPagetest y PageSpeedInsights. Vea el ejemplo a continuación.
[{
"label": "Test-1",
"url": "example1.com",
"webpagetest": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}, {
"label": "Test-2",
"url": "example2.com",
"psi": {
"metrics": {
FirstContentfulPaint: 900,
...
}
}
}]
Algunos Conenctors o recolectores pueden requerir una o más variables ambientales, como las claves API o la cuenta de Path to Service. Por ejemplo, ejecutar con el recolectador de API de Crux requiere la tecla API Crux.
Para pasar las variables ambientales en la CLI, ejecute el comando con el uso regular de Vars de entorno:
CRUX_APIKEY=<YOUR_KEY> ./awp run url:https://wev.dev/ json:output/results.json
AWP admite los siguientes recolectores de auditoría. Consulte las documentos correspondientes para obtener más detalles.
WebPageTest Reatherer ejecuta pruebas a través de los puntos finales de WebPageTest Public o una instancia de WebPageTest privada personalizada.
Consulte Docs/WebPageTest.md para obtener más detalles para el uso de WebPagetest Reatherer.
PageSpeed Insights Recolecter ejecuta pruebas a través de la API pública de PageSpeed Insights.
Consulte Docs/PSI.MD para obtener más detalles para el uso de PSI Recisioner.
El recolectador de API de Crux recopila métricas de rendimiento a través de la API del informe Chrome UX.
Consulte Docs/Cruxapi.MD para obtener más detalles para el uso de Crux API Recisioner.
El Crux BigQuery Recolecter recopila métricas de rendimiento a través del informe Chrome UX con su proyecto público de Google BigQuery. No seque que necesite configurar un proyecto de Google Cloud para consultar la tabla Public BigQuery.
Consulte Docs/CruxBigQuery.md para obtener más detalles para el uso de Crux API Recisioner.
AWP está diseñado con módulos, que incluyen módulos para ejecutar auditorías con WebPageTest, PageSpeedInsights u otras herramientas, y módulos para leer/escribir datos de plataformas de datos como JSON, Hojas de Google o un servicio en la nube.
En una vista de alto nivel, hay tres tipos de módulos:
El motor AWP utiliza dos estructuras de objetos JavaScript principales para ejecutar auditorías y recolectar métricas.
examples/tests.json para un objeto de prueba real.examples/results.json para un objeto de resultado real.Para lidiar con la herramienta de auditoría asincrónica como WebPagetest, AWP divide el ciclo de auditoría en tres pasos de acciones:
Tests y genera una lista de objetos Results .Tests , genera una lista de Results y actualiza NextTiggertimestamp para cada Test recurrente. Esta acción es útil cuando se ejecuta con tareas periódicas o basadas en el temporizador como el trabajo cron.Retrieved .Para configurar módulos y sus configuraciones, se requiere una configuración AWP general como un objeto JavaScript.
La configuración de AWP tiene las siguientes propiedades requeridas:
connector : el nombre del conector.helper : un ayudante para un conector específico, que incluye el manejador API y otras funciones auxiliares, que se utilizarán en recolectores y extensiones.dataSources : una variedad de fuentes de auditoría, como webpagetest o psi . Cada una de las fuentes de datos debe tener un archivo recolectador correspondiente en la carpeta src/gatherers .extensions : una variedad de extensiones. Cada extensión debe tener un archivo de extensión correspondiente en src/extensions .Otras propiedades opcionales:
verbose : si imprimir mensajes detallados.debug : si imprimir mensajes de depuración. El siguiente ejemplo de configuración proviene de los 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,
}
Con la configuración de ejemplo anterior, usará JSON Connector que lee y escribe pruebas y resultados como archivos JSON. Ver examples/tests.json y examples/results.json para ejemplos.
Además de las propiedades fundamentales, hay algunas propiedades adicionales utilizadas por los módulos:
json como configuración para JSONConnector .budgets como configuración para presupuestoEjemplos de creación de una nueva instancia de 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,
});
Para enviar todas las pruebas:
awp.run();
Para enviar pruebas específicas usando filtros: esto ejecutará la prueba que tiene ID = 1 y seleccionada = propiedades verdaderas.
awp.run({
filters: ['id="1"', 'selected'],
});
Para recuperar todos los resultados pendientes, filtrándose con el estado! == "recuperado".
awp.retrieve({
filters: ['status!=="Retrieved"'],
});
src/utils/pattern-filter.js con más ejemplos.Para ejecutar pruebas recurrentes:
// This will run the actual audit and update the nextTriggerTimestamp.
awp.recurring();
Para ejecutar pruebas con extensiones específicas:
// This will override the extension list defined in the awpConfig.
awp.run({
extensions: ['budgets']
})
Una clase recolectadora extiende src/gatherers/gatherer.js y anula los siguientes métodos:
constructor(config, apiHelper, options) :
config : la configuración definida en una propiedad con el nombre de este receptor en la configuración AWP. Algunas herramientas de auditoría como WebPageTest o PageSpeedInsights requieren claves API. La tecla API para el recolector se encuentra en la configuración. config.apiKey .options : Configuración adicional como verbose y debug . run(test, options) :
test : un objeto Test para esta ejecución de auditoría. Los datos requeridos para este recolector (EG Configuración o metadatos) estarán en la propiedad con el nombre del receptor. Por ejemplo, los datos de WebPageTest estarán en webpagetest de este objeto Test .options : Configuración adicional. retrieve(result, options) :
result : un resultado Result para recuperar métricas con. Los datos requeridos para este recolector estarán en la propiedad con el nombre del receptor. Por ejemplo, los datos y las métricas estarán en webpagetest de este objeto Result .options : Configuración adicional como verbose y debug . Una clase de conector extiende src/connectors/connector.js y anula los siguientes métodos:
constructor(config, apiHandler) :
config : la configuración definida en una propiedad con el nombre de este conector en la configuración AWP.apiHandler : La instancia del controlador API utilizado para hacer llamadas API. getConfig() : el método para devolver el objeto de configuración adicional del conector. Este objeto de configuración depende de dónde almacene este conector su configuración adicional, incluidas las teclas API para recolectores. Por ejemplo, JSONConnector usa tests.json y lee configuraciones adicionales de la propiedad config , incluidas las claves API para cada recolectores.
getTestList(options) : el método para devolver la lista de Tests como una matriz.
updateTestList(newTests, options) : el método para actualizar la lista Tests , dada la lista de nuevas Tests .
getResultList(options) : el método para devolver la lista de Results como una matriz.
appendResultList(newResults, options) : el método para agregar nuevos Results al final de la lista Results actual.
updateResultList(newResults, options) : el método para actualizar Results existentes en la lista Results actual.
Una clase de extensión extiende src/extensions/extension.js y anula los siguientes métodos:
constructor(config) :config : la configuración definida en una propiedad con el nombre de esta extensión en la configuración AWP.beforeRun(context) : el método antes de ejecutar el paso de ejecución para una Test .context.test : el objeto Test correspondiente.afterRun(context) : el método después de ejecutar el paso Ejecutar para una Test .context.test : el objeto Test correspondiente.context.result : el objeto Result correspondiente.beforeAllRuns(context) : el método antes de ejecutar el paso de ejecución .context.tests : todos los objetos Test en esta ejecución .afterAllRuns(context) : el método después de ejecutar el paso Ejecutar .context.tests : todos los objetos Test en esta ejecución .context.results : todos los objetos Result en esta ejecución .beforeRetrieve(context) : el método antes de ejecutar el paso de recuperación para un Result .context.result : el objeto Result correspondiente.afterRetrieve(context) : el método después de ejecutar el paso de recuperación para un Result .context.result : el objeto Result correspondiente.beforeAllRetrieves(context) : el método antes de ejecutar el paso de recuperación .context.result : el objeto Result correspondiente.afterAllRetrieves(context) : el método después de ejecutar el paso de recuperación .context.result : el objeto Result correspondiente. Un objeto Test estándar contiene las siguientes propiedades:
(Puede consultar examples/tests.json para un ejemplo).
selected : si realizar la ejecución para esta Test .label : Nombre de esta Test .url : URL para auditar.recurring : Configuración para auditoría recurrente.frequency : la cadena de frecuencia definida en src/common/frequency.js . Por ejemplo, 'diario', 'semanal' o 'mensual'.La configuración específica del recolector estará en su propia propiedad con el nombre del recolector en minúsculas. Por ejemplo, la configuración de WebPageTests será:
webpagetestsettings : la configuración del objeto contiene ubicación de auditoría, conexión, etc.metadata : el objeto de metadatos contiene la identificación de WebPageTests, JSON URL, etc. Un objeto Result estándar contiene las siguientes propiedades:
selected : si realizar la recuperación para este Result .id : ID única generada automáticamente para este Result .type : auditoría Single o Recurring .status : Submitted , Retrieved o Error . Consulte src/common/status.js para más detalles.label : etiqueta de cadena para este Result . Esta etiqueta hereda de su objeto Test original.url : URL auditada.createdTimestamp : cuando se crea este Result .modifiedTimestamp : cuando este Result se modifica por última vez. Se requieren todos los nombres métricos utilizados en AWP para seguir los nombres, sensibles a la caja. Consulte la lista completa de métricas estandarizadas en src/common/metrics.js
Métricas de tiempo
TimeToFirstByteFirstPaintFirstMeaningfulPaintFirstContentfulPaintVisualCompleteSpeedIndexDOMContentLoadedLoadEventTimeToInteractiveTotalBlockingTimeFirstCPUIdleFirstInputDelayLargestContentfulPaintTamaño de recursos
HTMLJavascriptCSSFontsImagesVideosRecuento de recursos
DOMElementsConnectionsRequestsPuntajes de recursos
PerformanceProgressiveWebApp Todos los códigos de origen para funciones principales se encuentran en la carpeta src . Los archivos se organizan en las siguientes subcarpetas:
common : Clases y definiciones comunes, como estado, frecuencia, métricas, etc.connectors : clases de conector.extensions : clases de extensión.gatherers : clases de recolectores.utils : utilidades y herramientas. Ejecute los siguientes comandos para ejecutar la prueba unitaria:
npm test
Para ejecutar la especificación de prueba individual, puede instalar el módulo NPM Jest en su máquina local:
npm install -g jest
jest test/some-module.test.js
La prueba unitaria se basa en el marco de prueba unitario de Jest. Todas las pruebas unitarias se encuentran en la carpeta ./test y se organizan en sus propias subcarpetas correspondientes, como la misma estructura que en la carpeta src .
