Hiciste un gran esfuerzo para lograr que el contenido sea rápido. Ahora, asegúrate de mantener la rapidez automatizando las pruebas de rendimiento con el bot de Lighthouse.
Lighthouse califica tu app en 5 categorías, una de ellas es el rendimiento. Si bien puedes intentar supervisar los cambios de 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 las tareas tediosas por ti. Travis CI es un gran 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 cambies el rendimiento por accidente sin darte cuenta. Puedes configurar tu repositorio para que no permita combinar solicitudes de extracción si las puntuaciones de Lighthouse caen por debajo del umbral que estableciste (p.ej., < 96/100).
Si bien puedes probar el rendimiento en localhost, tu sitio a menudo se comportará de manera diferente en servidores activos. Para obtener un panorama más realista, es mejor implementar el sitio en un servidor de etapa de pruebas. Puedes usar cualquier servicio de hosting. En esta guía, te familiarizarás con 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. Realiza la implementación en Firebase
Para comenzar, necesitarás una cuenta de Firebase. Cuando termines, haz clic en “Agregar proyecto” para crear un proyecto nuevo en Firebase console:
Implementa en Firebase
Necesitarás Firebase CLI para implementar la app. Incluso si ya la tienes instalada, se recomienda actualizar frecuentemente la CLI a la versión más reciente con el siguiente 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 seleccionar funciones, elige “Hosting”.
- Para el proyecto predeterminado de Firebase, selecciona el proyecto que creaste en Firebase console.
- Escribe “public” 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 de tu proyecto.
¡Felicitaciones, está todo listo para la implementación! Ejecuta:
firebase deploy
En menos de un segundo, tendrás una app activa.
3. Cómo configurar Travis
Deberás registrar una cuenta en Travis y, luego, activar la integración de las apps de GitHub 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 una integración continua, necesitas dos elementos:
- Para tener un archivo
.travis.ymlen el directorio raíz - Activar una compilación mediante un envío de git antiguo normal
El repositorio 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 repositorio en Configuración en Travis para ver el panel de Travis de tu proyecto. Si todo está bien, verás que tu compilación pasar de amarillo a verde en un par de 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 autorizarla. ¿Cómo puede hacerlo? Con un token de Firebase
🗝️🔥
Autorizar 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 verificarte. Después, vuelve a la consola y verás tu token recién emitido. Cópialo y regresa 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, asígnale un nombre a la variable FIREBASE_TOKEN y agrégala.
Agrega una implementación a tu configuración de Travis
Necesitarás las siguientes líneas para indicarle a Travis que implemente la app después de cada compilación correcta.
Agrégalas 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 observas el registro de Travis, pronto debería decir ✔️ Deploy complete.
De ahora en adelante, cada vez que hagas cambios en tu app, estos se implementarán automáticamente en Firebase.
5. Cómo configurar el bot de Lighthouse
El amigable bot de Lighthouse te actualiza las puntuaciones de Lighthouse de tu app. Solo necesita una invitación a tu repositorio.
En GitHub, ve a la configuración del 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 realizan al instante. Antes de comenzar a realizar pruebas, asegúrate de que Lightbot 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 del bot de Lighthouse en tu bandeja de entrada. 📬
En Travis, agrega esta clave como una variable de entorno y asígnale el nombre LIGHTHOUSE_API_KEY:
Agrega el bot de Lighthouse a tu proyecto
A continuación, ejecuta el siguiente comando para agregar el Bot de Lighthouse a tu proyecto:
npm i --save-dev https://github.com/ebidel/lighthousebot
Agrega este bit a package.json:
"scripts": {
"lh": "lighthousebot"
}
Cómo agregar el bot de Lighthouse 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 dada, así que reemplaza
https://staging.example.com por la URL de tu app
(es decir, your-app-123.firebaseapp.com).
Establece tus estándares altos y ajusta la configuración para no aceptar ningún cambio en la app que baje la puntuación de rendimiento por debajo de 95:
- npm run lh -- --perf=95 https://staging.example.com
Realiza una solicitud de extracción para activar la prueba del bot de Lighthouse en Travis
El bot de Lighthouse solo probará las solicitudes de extracción, por lo que si envías a la rama principal ahora, solo verás el mensaje "Esta secuencia de comandos solo se puede ejecutar en solicitudes de relaciones públicas de Travis" en tu registro de Travis.
Para activar la prueba del bot de Lighthouse, haz lo siguiente:
- Confirma la compra de una sucursal nueva
- Envíalo a GitHub
- Realiza una solicitud de extracción
Espera a que aparezca esa página de solicitud de extracción y espera a que el bot de Lighthouse cante. 🎤
La puntuación de rendimiento es excelente, la app está por debajo del presupuesto y se aprobó la verificación.
Más opciones de Lighthouse
¿Recuerdas cómo Lighthouse prueba 5 categorías diferentes? Puedes aplicar puntuaciones a cualquiera de los que tengan marcas del bot de Lighthouse:
--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
Esta acción fallará en la solicitud de extracción si la puntuación de rendimiento es inferior a 93 o si la puntuación de SEO es inferior a 100.
También puedes optar por no recibir los comentarios del bot de Lighthouse con la opción --no-comment.