Te esforzaste mucho para ser rápido. Ahora, asegúrate de mantener esa velocidad automatizando las pruebas de rendimiento con Lighthouse Bot.
Lighthouse califica tu app en 5 categorías, y una de ellas es el rendimiento. Si bien podrías intentar recordar supervisar los cambios en el rendimiento con DevTools o la CLI de Lighthouse cada vez que edites tu código, no es necesario que lo hagas. Las herramientas pueden hacer el trabajo tedioso por ti. Travis CI es un excelente servicio que ejecuta automáticamente pruebas para tu app en la nube cada vez que envías código nuevo.
El bot de Lighthouse se integra con Travis CI, y su función de presupuesto de rendimiento garantiza que no degradarás accidentalmente el rendimiento sin darte cuenta. Puedes configurar tu repositorio para que no permita combinar solicitudes de extracción si las puntuaciones de Lighthouse son inferiores al umbral que estableciste (p.ej., < 96/100).
Si bien puedes probar el rendimiento en localhost, es posible que tu sitio funcione de manera diferente en los servidores activos. Para obtener una imagen más realista, lo mejor es implementar tu sitio en un servidor de pruebas. Puedes usar cualquier servicio de hosting. En esta guía, se usará Firebase Hosting.
1. Configuración
Esta app simple te ayuda a ordenar tres números.
Clona el ejemplo de GitHub y asegúrate de agregarlo como repositorio en tu cuenta de GitHub.
2. Cómo implementar en Firebase
Para comenzar, necesitarás una cuenta de Firebase. Una vez que hayas hecho eso, crea un proyecto nuevo en Firebase console haciendo clic en "Agregar proyecto":
Implementa en Firebase
Necesitarás Firebase CLI para implementar la app. Incluso si ya la tienes instalada, es una buena práctica actualizar con frecuencia la CLI a la versión más reciente con este comando:
npm install -g firebase-tools
Para autorizar Firebase CLI, ejecuta el siguiente comando:
firebase login
Ahora, inicializa el proyecto:
firebase init
La consola te hará una serie de preguntas durante la configuración:
- Cuando se te solicite que selecciones funciones, elige “Alojamiento”.
- Para el proyecto predeterminado de Firebase, selecciona el proyecto que creaste en Firebase console.
- Escribe "público" como tu directorio público.
- Escribe “N” (no) para configurar como una app de una sola página.
Este proceso crea un archivo de configuración firebase.json en la raíz del directorio del proyecto.
¡Felicitaciones! Ya puedes realizar la implementación. Ejecución:
firebase deploy
En un instante, tendrás una app en vivo.
3. Cómo configurar Travis
Deberás registrar una cuenta en Travis y, luego, activar la integración de las GitHub Apps en la sección Configuración de tu perfil.
Una vez que tengas una cuenta
Ve a Configuración en tu perfil, presiona el botón Sincronizar cuenta y asegúrate de que el repositorio de tu proyecto aparezca en Travis.
Para iniciar la integración continua, necesitas dos elementos:
- Tener un archivo
.travis.ymlen el directorio raíz - Para activar una compilación con un git push normal
El repo lighthouse-bot-starter ya tiene un archivo YAML .travis.yml:
language: node_js
node_js:
- "8.1.3"
install:
- npm install
before_script:
- npm install -g firebase-tools
script:
- webpack
El archivo YAML le indica a Travis que instale todas las dependencias y compile tu app. Ahora es tu turno de enviar la app de ejemplo a tu propio repositorio de GitHub. Si aún no lo hiciste, ejecuta el siguiente comando:
git push origin main
Haz clic en tu repo en Configuración en Travis para ver el panel de Travis de tu proyecto. Si todo está bien, verás que la compilación cambia de amarillo a verde en unos minutos. 🎉
4. Automatiza la implementación de Firebase con Travis
En el paso 2, accediste a tu cuenta de Firebase y, luego, implementaste la app desde la línea de comandos con firebase deploy. Para que Travis implemente tu app en Firebase, debes autorizarlo. ¿Cómo puede hacerlo? Con un token de Firebase
🗝️🔥
Autoriza Firebase
Para generar el token, ejecuta este comando:
firebase login:ci
Se abrirá una pestaña nueva en una ventana del navegador para que Firebase pueda verificar tu identidad. Después, vuelve a mirar la consola y verás el token recién creado. Cópialo y vuelve a Travis.
En el panel de Travis de tu proyecto, ve a Más opciones > Configuración > Variables de entorno.
Pega el token en el campo de valor, asigna el nombre FIREBASE_TOKEN a la variable y agrégala.
Agrega la implementación a tu configuración de Travis
Necesitas las siguientes líneas para indicarle a Travis que implemente la app después de cada compilación exitosa.
Agrégalos al final del archivo .travis.yml. 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
Envía este cambio a GitHub y espera tu primera implementación automatizada. Si consultas tu registro de Travis, pronto debería decir ✔️ Deploy complete!
Ahora, cada vez que realices cambios en tu app, se implementarán automáticamente en Firebase.
5. Cómo configurar Lighthouse Bot
El bot de Lighthouse amigable te informa sobre las puntuaciones de Lighthouse de tu app. Solo necesita una invitación a tu repo.
En GitHub, ve a la configuración de tu proyecto y agrega "lighthousebot" como colaborador (Configuración > Colaboradores):
La aprobación de estas solicitudes es un proceso manual, por lo que no siempre se realiza de inmediato. Antes de comenzar las pruebas, asegúrate de que lighthousebot haya aprobado su estado de colaborador. Mientras tanto, también debes agregar otra clave a las variables de entorno de tu proyecto en Travis. Deja tu correo electrónico aquí y recibirás una clave de Lighthouse Bot en tu bandeja de entrada. 📬
En Travis, agrega esta clave como una variable de entorno y asígnale el nombre LIGHTHOUSE_API_KEY:
Agrega Lighthouse Bot a tu proyecto
A continuación, agrega Lighthouse Bot a tu proyecto ejecutando el siguiente comando:
npm i --save-dev https://github.com/ebidel/lighthousebot
Agrega este fragmento a package.json:
"scripts": {
"lh": "lighthousebot"
}
Agrega Lighthouse Bot a tu configuración de Travis
Como último truco, prueba el rendimiento de la app después de cada solicitud de extracción.
En .travis.yml, agrega otro paso en after_success:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Se ejecutará una auditoría de Lighthouse en la URL proporcionada, por lo que debes reemplazar https://staging.example.com por la URL de tu app (es decir, tu-app-123.firebaseapp.com).
Establece estándares altos y ajusta la configuración para no aceptar ningún cambio en la app que haga que la puntuación de rendimiento sea inferior a 95:
- npm run lh -- --perf=95 https://staging.example.com
Realiza una solicitud de extracción para activar la prueba de Lighthouse Bot en Travis
Lighthouse Bot solo probará las solicitudes de extracción, por lo que, si ahora envías a la rama principal, solo obtendrás el mensaje "This script can only be run on Travis PR requests" en tu registro de Travis.
Para activar la prueba de Lighthouse Bot, haz lo siguiente:
- Cómo cambiar a una rama nueva
- Envía el cambio a GitHub
- Cómo realizar una solicitud de extracción
Espera en la página de la solicitud de extracción y espera a que cante el bot de Lighthouse. 🎤
La puntuación de rendimiento es excelente, la app está dentro del presupuesto y la verificación se aprobó.
Más opciones de Lighthouse
¿Recuerdas que Lighthouse prueba 5 categorías diferentes? Puedes aplicar puntuaciones para cualquiera de los siguientes elementos con marcas de Lighthouse Bot:
--perf # performance
--pwa # progressive web app score
--a11y # accessibility score
--bp # best practices score
--seo # SEO score
Ejemplo:
npm run lh -- --perf=93 --seo=100 https://staging.example.com
La PR fallará si la puntuación de rendimiento cae por debajo de 93 o la puntuación de SEO cae por debajo de 100.
También puedes elegir no recibir los comentarios del bot de Lighthouse con la opción --no-comment.