Incorporare i budget delle prestazioni nel processo di creazione

Milica Mihajlija
Milica Mihajlija

Una volta definito un budget delle prestazioni, è il momento di configurare la procedura di compilazione per monitorarlo. Esistono diversi strumenti che ti consentono di definire soglie per le metriche sul rendimento scelte e di ricevere avvisi se superi il budget. Scopri come scegliere il tipo più adatto alle tue esigenze e alla configurazione attuale. 🕵️‍♀️

Budget delle prestazioni di Lighthouse

Lighthouse è uno strumento di controllo che testa i siti in alcune aree chiave: prestazioni, accessibilità, best practice e rendimento del sito come applicazione web progressiva.

La versione a riga di comando di Lighthouse (v5 e versioni successive) supporta l'impostazione di budget di rendimento in base a:

  • dimensione delle risorse
  • conteggio risorse

Puoi impostare i budget per uno dei seguenti tipi di risorse:

  • document
  • font
  • image
  • media
  • other
  • script
  • stylesheet
  • third-party
  • total

I budget vengono impostati in un file JSON e, dopo averli definiti, la nuova colonna "Over Budget" indica se stai superando i limiti.

Sezione Budget nel report Lighthouse
Sezione "Budget" nel report Lighthouse

Suggerimenti sulle prestazioni Webpack

Webpack è un potente strumento di compilazione per ottimizzare il modo in cui il codice viene consegnato agli utenti. Supporta inoltre l'impostazione di budget delle prestazioni in base alle dimensioni degli asset.

Attiva i suggerimenti per le prestazioni in webpack.config.js per ricevere avvisi o errori dalla riga di comando quando le dimensioni del bundle superano il limite. È un ottimo modo per tenere d'occhio le dimensioni degli asset durante lo sviluppo.

Dopo il passaggio di creazione, Webpack genera un elenco di asset codificati per colore e le relative dimensioni. Gli elementi che superano il budget sono evidenziati in giallo.

Output di Webpack che evidenzia bundle.js
Il file bundle.js evidenziato è più grande del tuo budget

Il limite predefinito sia per gli asset sia per i punti di contatto è 250 KB. Puoi impostare i tuoi target nel file di configurazione.

Avviso sulle dimensioni del bundle Webpack
Avviso relativo alle dimensioni del bundle Webpack ⚠️

I budget vengono confrontati con le dimensioni degli asset non compressi. Le dimensioni del codice JavaScript non compresso sono correlate al tempo di esecuzione e l'esecuzione dei file di grandi dimensioni può richiedere molto tempo, in particolare sui dispositivi mobili.

Consiglio per l'ottimizzazione delle prestazioni Webpack
Funzionalità extra: webpack non solo ti avviserà, ma ti darà anche consigli su come ridimensionare i tuoi bundle. 💁

Bundlesize

Bundlesize è un semplice pacchetto npm che testa le dimensioni degli asset rispetto a una soglia impostata. Può essere eseguito localmente e integrato con la tua CI.

Interfaccia a riga di comando Bundlesize

Esegui l'interfaccia a riga di comando bundlesize specificando una soglia e il file da testare.

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize restituisce i risultati del test codificati per colore in una riga.

Test dell'interfaccia a riga di comando bundlesize non riuscito
Test dell'interfaccia a riga di comando bundlesize non superato ❌
Superamento del test dell'interfaccia a riga di comando bundlesize
Test dell'interfaccia a riga di comando bundlesize superato ✔️

Dimensione del pacchetto per CI

Per ottenere il massimo valore da bundlesize, ti consigliamo di integrarlo con un sistema di CI per applicare automaticamente i limiti di dimensione alle richieste pull. Se il test del bundlesize non va a buon fine, la richiesta pull non viene unita. Funziona per le richieste di pull su GitHub con Travis CI, CircleCI, Wercker e Drone.

Stato del controllo delle dimensioni del bundle su GitHub
Stato del controllo della dimensione del bundle su GitHub

Oggi potresti avere un'app veloce, ma l'aggiunta di nuovo codice può spesso cambiare la situazione. Controllare le richieste pull con bundlesize ti aiuterà a evitare regressioni del rendimento. Bootstrap, Tinder, Trivago e molti altri lo utilizzano per tenere sotto controllo i loro budget.

Con bundlesize è possibile impostare le soglie per ogni file separatamente. Questa opzione è particolarmente utile se stai suddividendo un bundle nella tua applicazione.

Per impostazione predefinita, testa le dimensioni degli asset compressi con gzip. Puoi utilizzare l'opzione di compressione per passare alla compressione brotli o disattivarla completamente.

Lighthouse Bot

Lighthouse Bot

Lighthouse Bot si integra con Travis CI e applica i budget in base a una delle cinque categorie di controllo di Lighthouse. Ad esempio, un budget di 100 per il punteggio del rendimento di Lighthouse. A volte è più semplice tenere d'occhio un singolo numero rispetto ai budget dei singoli asset e i punteggi di Lighthouse prendono in considerazione molti aspetti.

Risultati del faro Ұ
Punteggi Lighthouse 💯

Il bot Lighthouse esegue un controllo dopo aver eseguito il deployment di un sito sul server di gestione temporanea. In .travis.yml imposta i budget per determinate categorie Lighthouse con le opzioni --perf, --a11y, --bp, --seo o --pwa. Cerca di rimanere nella zona verde con punteggi di almeno 90.

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

Se i punteggi di una richiesta di pull su GitHub sono inferiori alla soglia che hai impostato, Lighthouse Bot può impedire l'unione della richiesta di pull. ⛔

Stato del controllo del bot Lighthouse su GitHub
Stato del controllo dei bot Lighthouse su GitHub

Lighthouse Bot commenta quindi la pull request con i punteggi aggiornati. Si tratta di una funzionalità interessante che incoraggia la conversazione sul rendimento durante le modifiche al codice.

Punteggi dei report Lighthouse nelle richieste pull
Scori dei report di Lighthouse nelle richieste pull 💬

Se la tua richiesta di pull è bloccata da un punteggio Lighthouse basso, esegui un controllo con Lighthouse CLI o in DevTools. Genera un report con dettagli sui colli di bottiglia e suggerimenti per semplici ottimizzazioni.

Riepilogo

Strumento Interfaccia a riga di comando CI Riepilogo
Faro ✔️
  • Budget per tipi diversi di risorse in base alle loro dimensioni o al loro numero.
webpack ✔️
  • Budget basati sulle dimensioni degli asset generati dal webpack.
  • Controlla le dimensioni non compresse.
bundlesize ✔️ ✔️
  • Budget basati sulle dimensioni di risorse specifiche.
  • Controlla le dimensioni compresse o non compresse.
Lighthouse Bot ✔️
  • Budget basati sui punteggi Lighthouse.