Se usó la API de Cloud Translation para traducir esta página.

Supervisión del rendimiento con Lighthouse CI

Cómo agregar Lighthouse a un sistema de integración continua, como GitHub Actions

Katie Hempenius

Lighthouse CI es un paquete de para usar Lighthouse durante la integración continua. Lighthouse CI puede incorporarse a los flujos de trabajo de los desarrolladores de muchas formas diferentes. En esta guía, se abarcan los siguientes temas:

Usar la CLI de Lighthouse CI.
Configuración de tu proveedor de CI para ejecutar Lighthouse CI.
Configurar una acción de GitHub y estado verificación para Lighthouse CI. Se mostrarán automáticamente los resultados de Lighthouse en Solicitudes de extracción de GitHub.
Creación de un panel de rendimiento y un almacén de datos para informes de Lighthouse.

Descripción general

Lighthouse CI es un paquete de herramientas gratuitas que facilita el uso de Lighthouse la supervisión del rendimiento. Un solo informe de Lighthouse proporciona el resumen de una el rendimiento de la página en el momento de su ejecución; Lighthouse CI muestra cómo estas de análisis de datos han cambiado con el tiempo. Esto se puede usar para identificar el impacto de cambios de código específicos o garantizar que se alcancen los umbrales de rendimiento durante procesos de integración continua. Si bien la supervisión del rendimiento es en un caso de uso común para Lighthouse CI, se puede usar para supervisar otros aspectos el informe de Lighthouse, por ejemplo, SEO o accesibilidad.

La funcionalidad principal de Lighthouse CI la proporciona el comando de Lighthouse CI de línea de comandos. (Nota: Esta es una herramienta independiente de la Lighthouse CLI). El La CLI de Lighthouse CI proporciona comandos por usar Lighthouse CI. Por ejemplo, el comando autorun ejecuta varias Lighthouse ejecuta, identifica el informe de Lighthouse promedio y lo sube para su almacenamiento. Este comportamiento se puede personalizar en gran medida si se pasan marcas adicionales o personalizar el archivo de configuración de Lighthouse CI, lighthouserc.js.

Aunque la funcionalidad principal de Lighthouse CI se encapsula principalmente en la CLI de Lighthouse CI, Lighthouse CI generalmente se usa mediante una de las los siguientes enfoques:

Ejecución de Lighthouse CI como parte de la integración continua
Usa una acción de GitHub de Lighthouse CI que se ejecute y comente en cada extracción solicitud
Se realiza un seguimiento del rendimiento en el tiempo mediante el panel que proporciona Lighthouse. Servidor.

Todos estos enfoques se basan en la CLI de Lighthouse CI.

Las alternativas a Lighthouse CI incluyen la supervisión del rendimiento de terceros o escribir tu propia secuencia de comandos para recopilar datos de rendimiento durante la CI el proceso de administración de recursos. Deberías considerar la posibilidad de usar un servicio de terceros si prefieres que otra persona se encargue de la administración del servidor probar dispositivos o, si deseas capacidades de notificación (como correo electrónico o Slack integración) sin tener que compilar estas funciones por tu cuenta.

Usa Lighthouse CI de manera local

En esta sección, se explica cómo ejecutar e instalar la CLI de Lighthouse CI de manera local y cómo configurar lighthouserc.js Ejecutar la CLI de Lighthouse CI de forma local es la la forma más sencilla de asegurarte de que lighthouserc.js esté configurado correctamente.

Instalar la CLI de Lighthouse CI.
```
npm install -g @lhci/cli
```
Lighthouse CI se configura colocando un archivo lighthouserc.js en la raíz de el repositorio de tu proyecto. Este archivo es obligatorio y contendrá Lighthouse CI la información de configuración relacionada. Si bien Lighthouse CI se puede configurar para que usarse sin un git repo, En las instrucciones de este artículo, se da por sentado que el repositorio de tu proyecto está configurado para usar Git.
En la raíz de tu repositorio, crea una configuración de lighthouserc.js. archivo.
```
touch lighthouserc.js
```
Agrega el siguiente código a lighthouserc.js. Este código está vacío Configuración de Lighthouse CI. Agregarás elementos a esta configuración en pasos posteriores.
```
module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};
```
Cada vez que se ejecuta Lighthouse CI, se inicia un servidor para que entregue tu sitio. Este servidor es lo que permite a Lighthouse cargar tu sitio incluso cuando ningún otro servidores se estén ejecutando. Cuando Lighthouse CI termine de ejecutarse, apagar el servidor automáticamente. Para garantizar que la publicación funcione correctamente, debes configurar staticDistDir o startServerCommand propiedades.

Si tu sitio es estático, agrega la propiedad staticDistDir a ci.collect. para indicar dónde se encuentran tus archivos estáticos. Lighthouse CI hará usa su propio servidor para publicar los archivos mientras pruebas tu sitio. Si el sitio no es estático, agrega la propiedad startServerCommand al ci.collect para indicar el comando que inicia tu servidor. Lighthouse CI iniciará un nuevo proceso de servidor durante la prueba y lo cerrará después.
```
// Static site example
collect: {
  staticDistDir: './public',
}
```
```
// Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}
```
Agrega el url al objeto ci.collect para indicar las URLs que Lighthouse CI ejecutar Lighthouse. El valor de la propiedad url debe ser el siguiente: proporcionarse como un array de URLs; este array puede contener una o más URLs. De de forma predeterminada, Lighthouse CI ejecutará Lighthouse tres veces en cada URL.
```
collect: {
  // ...
  url: ['http://localhost:8080']
}
```
Nota: El servidor que configuraste en el paso anterior. Por lo tanto, si ejecutas Lighthouse CI de forma local, estas URLs no deberían Es probable que incluyas localhost en lugar del host de producción.
Agrega el target al objeto ci.upload y establece el valor en 'temporary-public-storage' Los informes de Lighthouse recopilados por Lighthouse CI se subirá al almacenamiento público temporal. El informe permanecen allí durante siete días y, luego, se borran automáticamente. Esta configuración usa el almacenamiento público temporal de carga rápida porque es rápida para configurarlo. Para obtener más información sobre otras formas de almacenar los informes de Lighthouse, consulta al documentación.
```
upload: {
  target: 'temporary-public-storage',
}
```
La ubicación de almacenamiento del informe será similar a la siguiente:
```
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
```
(Esta URL no funcionará porque ya se borró el informe).
Ejecuta la CLI de Lighthouse CI desde la terminal con el comando autorun. Se ejecutará Lighthouse tres veces y se subirá el Lighthouse medio. .
```
lhci autorun
```
Si configuraste Lighthouse CI correctamente, deberías ejecutar este comando produce un resultado similar al siguiente:
```
✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Started a web server on port 65324...
Running Lighthouse 3 time(s) on http://localhost:65324/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:65324/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.
```
Puedes ignorar el mensaje GitHub token not set en el resultado de la consola. R El token de GitHub solo es necesario si quieres usar Lighthouse CI con un GitHub Acción. La manera de configurar una acción de GitHub se explica más adelante en este artículo.

Hacer clic en el vínculo del resultado que comienza con https://storage.googleapis.com... te llevará al informe de Lighthouse correspondiente a la mediana de ejecución de Lighthouse.

Los valores predeterminados que usa autorun se pueden anular a través de la línea de comandos. lighthouserc.js Por ejemplo, la configuración de lighthouserc.js que aparece a continuación indica que se deben recopilar cinco ejecuciones de Lighthouse cada vez que autorun que se ejecute.

Actualiza lighthouserc.js para usar la propiedad numberOfRuns:

module.exports = {
    // ...
    collect: {
      numberOfRuns: 5
    },
  // ...
  },
};

Vuelve a ejecutar el comando autorun:

lhci autorun

El resultado de la terminal debería mostrar que Lighthouse se ejecutó cinco veces en lugar que los predeterminados tres:

✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Automatically determined ./dist as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.

Started a web server on port 64444...
Running Lighthouse 5 time(s) on http://localhost:64444/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Run #4...done.
Run #5...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:64444/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.

Para obtener información sobre otras opciones de configuración, consulta Lighthouse CI configuración documentación.

Configura el proceso de CI para ejecutar Lighthouse CI

Lighthouse CI se puede usar con tu herramienta de CI favorita. El botón Configura tu CI Proveedor de la documentación de Lighthouse CI contiene muestras de código que muestran cómo Incorporar Lighthouse CI en los archivos de configuración de herramientas comunes de CI Específicamente, estas muestras de código indican cómo ejecutar Lighthouse CI para recopilar y realizar mediciones del rendimiento durante el proceso de CI.

Usar Lighthouse CI para recopilar mediciones de rendimiento es un buen punto de partida con la supervisión del rendimiento. Sin embargo, los usuarios avanzados pueden ir un paso y usar Lighthouse CI para que las compilaciones no se cumplan si no cumplen criterios, como aprobar auditorías de Lighthouse específicas o cumplir con todos los requisitos presupuestos. Este comportamiento se configura mediante assert del archivo lighthouserc.js.

Lighthouse CI admite tres niveles de aserciones:

off: Ignora las aserciones.
warn: Fallas de impresión en stderr
error: Fallas de impresión en stderr y salir de Lighthouse CI con un valor distinto de cero salir código

A continuación, se muestra un ejemplo de una configuración lighthouserc.js que incluye aserciones. Establece aserciones para las puntuaciones del rendimiento de Lighthouse y categorías de accesibilidad. Para probarlo, agrega las aserciones que se muestran a continuación a tu archivo lighthouserc.js y, luego, vuelve a ejecutar Lighthouse CI.

module.exports = {
  ci: {
    collect: {
      // ...
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 1}],
        'categories:accessibility': ['error', {minScore: 1}]
      }
    },
    upload: {
      // ...
    },
  },
};

El resultado de la consola que genera se ve de la siguiente manera:

Captura de pantalla de un mensaje de advertencia generado por Lighthouse CI

Para obtener más información sobre las aserciones de Lighthouse CI, consulta la documentación.

Configura una acción de GitHub para ejecutar Lighthouse CI

Se puede usar una acción de GitHub para ejecutar Lighthouse CI Esto generará un nuevo informe de Lighthouse cada vez que se actualice cambio se envía a cualquier rama de un repositorio de GitHub. Usa esta información en conjunto con un estado verificación para mostrar estos resultados en cada solicitud de extracción.

Captura de pantalla de una verificación de estado de GitHub

En la raíz de tu repositorio, crea un directorio llamado .github/workflows El flujos de trabajo de tu proyecto estarán en este directorio. Un flujo de trabajo es un proceso que se ejecuta en un tiempo predeterminado (por ejemplo, cuando se envía el código) y se compuesto por una o más acciones.
```
mkdir .github
mkdir .github/workflows
```
En .github/workflows, crea un archivo llamado lighthouse-ci.yaml. Este archivo contendrá la configuración de un nuevo flujo de trabajo.
```
touch lighthouse-ci.yaml
```

Agrega el siguiente texto a lighthouse-ci.yaml.

name: Build project and run Lighthouse CI
on: [push]
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - name: npm install
        run: |
          npm install
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.3.x
          lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"

Esta configuración establece un flujo de trabajo que consiste en un único trabajo que se ejecutará cada vez que se envía código nuevo al repositorio. Este trabajo tiene cuatro pasos:

Revisa el repositorio con el que se ejecutará Lighthouse CI
Instala y configura Node
Instala los paquetes de npm necesarios
Ejecuta Lighthouse CI y sube los resultados al almacenamiento público temporal.

Confirma estos cambios y envíalos a GitHub. Si seguiste correctamente pasos anteriores, el envío de código a GitHub activará la ejecución del flujo de trabajo que acabas de agregar.
Confirmar que se activó Lighthouse CI y ver el informe generado, ve a la pestaña Actions de tu proyecto. Deberías ver la El flujo de trabajo Build project y Run Lighthouse CI se enumera en las una confirmación reciente.

Puedes navegar al informe de Lighthouse que corresponde a una confirmación en particular en la pestaña Acciones. Haz clic en la confirmación y, luego, en Lighthouse CI. del flujo de trabajo y, luego, expande los resultados del paso ejecutar Lighthouse CI.

Acabas de configurar una acción de GitHub para ejecutar Lighthouse CI. Esto será lo más útil cuando se usa con un estado de GitHub marca.

Configura una verificación de estado de GitHub

Una comprobación de estado, si está configurada, es un mensaje que aparece en todas las solicitudes de normalmente incluye información, como los resultados de una prueba o el éxito de una compilar.

Captura de pantalla de la sección "Configuración" de GitHub pestaña

Los pasos que se indican a continuación explican cómo configurar una verificación de estado para Lighthouse CI.

Ve a la app de GitHub de Lighthouse CI. y haz clic en Configurar.
(Opcional) Si formas parte de varias organizaciones en GitHub, elige la organización que es propietaria del repositorio para el que quieres usar Lighthouse CI
Selecciona Todos los repositorios si quieres habilitar Lighthouse CI en todos los repositorios o elige Seleccionar solo repositorios si solo quieres usar en repositorios específicos y, luego, seleccionar los repositorios. Luego, haz clic en Instalación y Autorizar.
Copia el token que se muestra. La necesitarás en el próximo paso.
Para agregar el token, ve a la página Configuración de tu GitHub repositorio, haz clic en Secretos y, luego, en Agregar un secreto nuevo.
Establece el campo Nombre en LHCI_GITHUB_APP_TOKEN y configura el Valor al token que copiaste en el último paso y, luego, haz clic en el botón Agregar botón Secret.
Ve al archivo lighthouse-ci.yaml y agrega el secreto de entorno nuevo para "ejecutar Lighthouse CI". kubectl.

-           name: run Lighthouse CI
            run: |
              npm install -g @lhci/cli@0.3.x
              lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+            env:
+              LHCI_GITHUB_APP_TOKEN: $

La verificación de estado está lista para usarse. Para probarlo, crea una nueva extracción solicitud o enviar una confirmación a una solicitud de extracción existente.

Configura el servidor de Lighthouse CI

El servidor de Lighthouse CI proporciona un panel para explorar Informes de Lighthouse. También puede actuar como almacén de datos privado a largo plazo Informes de Lighthouse.

Captura de pantalla del panel del servidor de Lighthouse CI

Captura de pantalla que muestra la comparación de dos informes de Lighthouse en el servidor de CI de Lighthouse

Elige qué confirmaciones deseas comparar.
La cantidad que cambió la puntuación de Lighthouse entre las dos confirmaciones.
En esta sección, solo se muestran las métricas que cambiaron entre las dos confirmaciones.
Las regresiones se destacan en rosa.
Las mejoras se destacan en azul.

Lighthouse CI Server es más adecuado para usuarios que se sienten cómodos implementando y administran su propia infraestructura.

Para obtener información sobre la configuración del servidor de Lighthouse CI, incluidas las recetas para con Heroku y Docker para la implementación, consulta estas instrucciones.

Más información

Repositorio de GitHub de Lighthouse CI