Hai lavorato duramente per essere veloce. Ora, automatizza i test delle prestazioni con Lighthouse Bot per assicurarti la massima velocità.
Lighthouse valuta la tua app in 5 categorie, una delle quali è il rendimento. Anche se potresti provare a ricordarti di monitorare le variazioni delle prestazioni con DevTools o Lighthouse CLI ogni volta che modifichi il codice, non è necessario farlo. Gli strumenti possono fare le cose noiose al posto tuo. Travis CI è un ottimo servizio che esegue automaticamente test per la tua app nel cloud ogni volta che esegui il push di un nuovo codice.
Lighthouse Bot si integra con Travis CI e la sua funzionalità di budget delle prestazioni assicura che non eseguirerai accidentalmente il downgrade delle prestazioni senza accorgerti. Puoi configurare il tuo repository in modo che non consenta l'unione delle richieste di pull se i punteggi Lighthouse scendono al di sotto della soglia che hai impostato (ad es. < 96/100).
Sebbene sia possibile testare le prestazioni su localhost, il rendimento del sito sarà diverso sui server in tempo reale. Per ottenere un quadro più realistico, ti consigliamo di implementare il tuo sito su un server di gestione temporanea. Puoi utilizzare qualsiasi servizio di hosting; questa guida prenderà in esame Firebase Hosting.
1. Configurazione
Questa semplice app ti aiuta a ordinare tre numeri.
Clona l'esempio da GitHub e assicurati di aggiungerlo come repository nel tuo account GitHub.
2. Esegui il deployment in Firebase
Per iniziare, devi avere un account Firebase. Dopo aver eseguito questa operazione, crea un nuovo progetto nella console Firebase facendo clic su "Aggiungi progetto":
Deployment in Firebase
Per eseguire il deployment dell'app, devi avere l'interfaccia a riga di comando di Firebase. Anche se l'hai già installata, è consigliabile aggiornare di frequente l'interfaccia a riga di comando alla versione più recente con questo comando:
npm install -g firebase-tools
Per autorizzare l'interfaccia a riga di comando di Firebase, esegui:
firebase login
Ora inizializza il progetto:
firebase init
Durante la configurazione, la console ti porrà una serie di domande:
- Quando ti viene chiesto di selezionare le funzionalità, scegli "Hosting".
- Per il progetto Firebase predefinito, seleziona il progetto che hai creato nella console Firebase.
- Digita "public" come directory pubblica.
- Digita "N" (no) per eseguire la configurazione come app a pagina singola.
Questo processo crea un file di configurazione firebase.json nella directory principale della directory del progetto.
Congratulazioni, sei pronto per il deployment. Esecuzione:
firebase deploy
In una frazione di secondo, avrai un'app pubblicata.
3. Configurazione di Travis in corso...
Devi registrare un account su Travis e attivare l'integrazione delle app GitHub nella sezione Impostazioni del tuo profilo.
Una volta che hai un account
Vai a Impostazioni sotto il tuo profilo, premi il pulsante Sincronizza account e assicurati che il repository del tuo progetto sia elencato su Travis.
Per avviare l'integrazione continua, sono necessarie due cose:
- Avere un file
.travis.ymlnella directory root - Per attivare una build eseguendo un normale push Git precedente
Il repository lighthouse-bot-starter ha già un file YAML .travis.yml:
language: node_js
node_js:
- "8.1.3"
install:
- npm install
before_script:
- npm install -g firebase-tools
script:
- webpack
Il file YAML indica a Travis di installare tutte le dipendenze e di creare la tua app. Ora tocca a te eseguire il push dell'app di esempio nel tuo repository GitHub. Se non lo hai già fatto, esegui questo comando:
git push origin main
Fai clic sul repository in Impostazioni in Travis per visualizzare la dashboard Travis del progetto. Se è tutto freddo, la build passerà dal giallo al verde in un paio di minuti. 🎉
4. Automatizza il deployment di Firebase con Travis
Nel passaggio 2, hai eseguito l'accesso al tuo account Firebase e hai eseguito il deployment dell'app dalla riga di comando con firebase deploy. Affinché Travis possa eseguire il deployment della tua app
in Firebase, devi autorizzarla. E come potete farlo? Con un token Firebase.
🗝️🔥
Autorizza Firebase
Per generare il token, esegui questo comando:
firebase login:ci
Si aprirà una nuova scheda in una finestra del browser in modo che Firebase possa verificare la tua identità. Dopodiché, torna alla console, dove vedrai il token appena creato. Copialo e torna a Travis.
Nella dashboard Travis del progetto, vai ad Altre opzioni > Impostazioni > Variabili di ambiente.
Incolla il token nel campo del valore, assegna un nome alla variabile FIREBASE_TOKEN e aggiungilo.
Aggiungi un deployment alla configurazione di Travis
Sono necessarie le righe seguenti per indicare a Travis di eseguire il deployment dell'app dopo ogni build riuscita.
Aggiungile alla fine del file .travis.yml. 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
Esegui il push di questa modifica su GitHub e attendi il primo deployment automatico. Se dai un'occhiata al tuo log Travis, a breve dovresti vedere ✔️ Deployment completato!
Ogni volta che apporti modifiche alla tua app, il deployment verrà eseguito automaticamente in Firebase.
5. Configurazione del bot Lighthouse
L'amichevole Bot Lighthouse ti aggiorna sui punteggi di Lighthouse della tua app. Ha solo bisogno di un invito al tuo repository.
Su GitHub, vai alle impostazioni del tuo progetto e aggiungi "Lightbot" come collaboratore (Impostazioni > Collaboratori):
L'approvazione di queste richieste è un processo manuale, perciò non sempre avviene immediatamente. Prima di iniziare i test, assicurati che farobot abbia approvato il suo stato di collaboratore. Nel frattempo, devi aggiungere anche un'altra chiave alle variabili di ambiente del progetto su Travis. Lascia la tua email qui e riceverai una chiave Bot Lighthouse nella tua posta in arrivo. 📬
Su Travis, aggiungi questa chiave come variabile di ambiente e assegnale il nome LIGHTHOUSE_API_KEY:
Aggiungi il bot Lighthouse al tuo progetto
Poi, aggiungi il bot Lighthouse al progetto eseguendo:
npm i --save-dev https://github.com/ebidel/lighthousebot
Aggiungi questo bit a package.json:
"scripts": {
"lh": "lighthousebot"
}
Aggiungi il bot Lighthouse alla tua configurazione Travis
In definitiva, verifica le prestazioni dell'app dopo ogni richiesta di pull.
In .travis.yml aggiungi un altro passaggio in after_success:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Verrà eseguito un controllo Lighthouse sull'URL specificato, quindi sostituisci
https://staging.example.com con l'URL della tua app
(ovvero your-app-123.firebaseapp.com).
Imposta standard elevati e modifica la configurazione in modo da non accettare modifiche all'app che portino il punteggio delle prestazioni inferiore a 95:
- npm run lh -- --perf=95 https://staging.example.com
Effettua una richiesta di pull per attivare il test del bot Lighthouse su Travis
Il bot Lighthouse testerà solo le richieste di pull, quindi se ora esegui il push al ramo principale, visualizzerai solo "Questo script può essere eseguito solo su richieste Travis PR" nel tuo log Travis.
Per attivare il test del bot Lighthouse:
- Effettua il pagamento per una nuova filiale
- Esegui il push su GitHub
- invia una richiesta di pull
Attendi la pagina di richiesta di pull e attendi che il bot Lighthouse canti. 🎤
Il punteggio relativo alle prestazioni è ottimo, l'app è al di sotto del budget e il controllo è stato superato.
Altre opzioni per Lighthouse
Ricordi come Lighthouse testa 5 diverse categorie? Puoi applicare i punteggi a tutte quelle con flag del bot Lighthouse:
--perf # performance
--pwa # progressive web app score
--a11y # accessibility score
--bp # best practices score
--seo # SEO score
Esempio:
npm run lh -- --perf=93 --seo=100 https://staging.example.com
Questa operazione non supererà il PR se il punteggio del rendimento scendono al di sotto di 93 o se il punteggio della SEO scende sotto 100.
Puoi anche scegliere di non ricevere i commenti di Lighthouse Bot tramite l'opzione --no-comment.