Hai lavorato duramente per ottenere velocità, ora assicurati di mantenerla automatizzando i test delle prestazioni con Lighthouse Bot.
Lighthouse valuta la tua app in 5 categorie e una di queste è il rendimento. Anche se potresti provare a ricordarti di monitorare le modifiche al rendimento con DevTools o Lighthouse CLI ogni volta che modifichi il codice, non è necessario. Gli strumenti possono fare il lavoro noioso per te. Travis CI è un ottimo servizio che esegue automaticamente i 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 per il rendimento garantisce che non si verifichi un downgrade accidentale del rendimento senza che tu te ne accorga. Puoi configurare il repository in modo che non consenta l'unione delle richieste pull se i punteggi di Lighthouse scendono al di sotto della soglia che hai impostato (ad es. < 96/100).
Sebbene tu possa testare le prestazioni su localhost, spesso il tuo sito si comporta in modo diverso sui server live. Per ottenere un quadro più realistico, è consigliabile eseguire il deployment del sito su un server di staging. Puoi utilizzare qualsiasi servizio di hosting. Questa guida ti mostrerà come utilizzare 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. Una volta fatto, crea un nuovo progetto nella console Firebase facendo clic su "Aggiungi progetto":
Deployment in Firebase
Per eseguire il deployment dell'app, devi utilizzare l'interfaccia a riga di comando di Firebase. Anche se l'hai già installata, è buona norma aggiornare spesso l'interfaccia a riga di comando all'ultima versione 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 configurare l'app come app monopagina.
Questo processo crea un file di configurazione firebase.json nella radice della directory del progetto.
Congratulazioni, ora puoi eseguire il deployment. Esegui:
firebase deploy
In un attimo avrai un'app live.
3. Configurazione di Travis
Dovrai registrare un account su Travis e poi attivare l'integrazione delle app GitHub nella sezione Impostazioni del tuo profilo.
Una volta creato un account
Vai a Impostazioni nel tuo profilo, premi il pulsante Sincronizza account e assicurati che il repository del progetto sia elencato su Travis.
Per iniziare l'integrazione continua, ti servono due cose:
- Avere un file
.travis.ymlnella directory principale - Per attivare una build eseguendo un normale comando git push
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 creare l'app. Ora tocca a te eseguire il push dell'app di esempio nel tuo repository GitHub. Se non l'hai ancora fatto, esegui il seguente comando:
git push origin main
Fai clic sul tuo repository in Impostazioni in Travis per visualizzare la dashboard di Travis del tuo progetto. Se tutto va bene, vedrai la build passare da gialla a verde in un paio di minuti. 🎉
4. Automatizzare 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 dell'app su
Firebase, devi autorizzarlo. E come potete farlo? Con un token Firebase.
🗝️🔥
Autorizzare 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 e vedrai il token appena creato. Copialo e torna a Travis.
Nella dashboard di Travis del tuo progetto, vai a Altre opzioni > Impostazioni > Variabili di ambiente.
Incolla il token nel campo del valore, assegna alla variabile il nome FIREBASE_TOKEN e aggiungila.
Aggiungi il deployment alla configurazione di Travis
Devi inserire le seguenti righe per indicare a Travis di eseguire il deployment dell'app dopo ogni build riuscita.
Aggiungili 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 log di Travis, dovrebbe presto apparire il messaggio ✔️ Deploy complete! (Deployment completato).
Ora, ogni volta che apporti modifiche alla tua app, queste verranno automaticamente implementate in Firebase.
5. Configurazione di Lighthouse Bot
Il bot amichevole di Lighthouse ti aggiorna sui punteggi Lighthouse della tua app. Ha solo bisogno di un invito al tuo repository.
Su GitHub, vai alle impostazioni del progetto e aggiungi "lighthousebot" come collaboratore (Impostazioni > Collaboratori):
L'approvazione di queste richieste è un processo manuale, quindi non sempre avviene istantaneamente. Prima di iniziare i test, assicurati che lighthousebot abbia approvato il suo stato di collaboratore. Nel frattempo, devi anche aggiungere un'altra chiave alle variabili di ambiente del tuo progetto su Travis. Lascia qui la tua email e riceverai una chiave del bot Lighthouse nella posta in arrivo. 📬
Su Travis, aggiungi questa chiave come variabile di ambiente e chiamala LIGHTHOUSE_API_KEY:
Aggiungere Lighthouse Bot al progetto
Poi, aggiungi Lighthouse Bot al tuo progetto eseguendo:
npm i --save-dev https://github.com/ebidel/lighthousebot
e aggiungi questo bit a package.json:
"scripts": {
"lh": "lighthousebot"
}
Aggiungere il bot Lighthouse alla configurazione di Travis
Come ultimo trucco, testa 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
(your-app-123.firebaseapp.com).
Imposta standard elevati e modifica la configurazione in modo da non accettare modifiche all'app che portino il punteggio di rendimento al di sotto di 95:
- npm run lh -- --perf=95 https://staging.example.com
Crea una richiesta di pull per attivare il test di Lighthouse Bot su Travis
Lighthouse Bot testerà solo le richieste di pull, quindi se esegui il push sul branch principale ora, nel log di Travis verrà visualizzato solo il messaggio "This script can only be run on Travis PR requests".
Per attivare il test del bot Lighthouse:
- Checkout di un nuovo branch
- Esegui il push su GitHub
- Inviare una richiesta di pull
Rimani in attesa nella pagina della richiesta di pull e attendi che Lighthouse Bot canti! 🎤
Il punteggio di rendimento è ottimo, l'app rispetta il budget e il controllo è stato superato.
Altre opzioni di Lighthouse
Ricordi che Lighthouse testa 5 categorie diverse? Puoi applicare i punteggi per qualsiasi di quelli con i 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
La richiesta pull non verrà approvata se il punteggio di rendimento scende al di sotto di 93 o il punteggio SEO scende al di sotto di 100.
Puoi anche scegliere di non ricevere i commenti del bot Lighthouse con l'opzione --no-comment.