Una volta definito un budget delle prestazioni, è il momento di configurare il processo di creazione per monitorarlo. Esistono diversi strumenti che consentono di definire le soglie per le metriche di rendimento scelte e di avvisarti se superi il budget. Scopri come scegliere quello più adatto alle tue esigenze e alla tua configurazione attuale. 🕵️ ♀️
Budget per le prestazioni di Lighthouse
Lighthouse è uno strumento di controllo che testa i siti in alcune aree chiave: prestazioni, accessibilità, best practice e le prestazioni del tuo sito come applicazione web progressiva.
La versione a riga di comando di Lighthouse (v5+) supporta l'impostazione di budget delle prestazioni in base a:
- dimensione della risorsa
- conteggio risorse
Puoi impostare budget per uno dei seguenti tipi di risorse:
documentfontimagemediaotherscriptstylesheetthird-partytotal
I budget vengono impostati in un file JSON e, una volta definiti, la nuova colonna "Budget superato" indica se hai superato i limiti.
Suggerimenti sulle prestazioni dei Webpack
Webpack è un potente strumento di creazione per ottimizzare il modo in cui il codice viene inviato agli utenti. Supporta anche l'impostazione di budget del rendimento in base alle dimensioni degli asset.
Attiva i suggerimenti sul rendimento in webpack.config.js per ricevere avvisi o errori della riga di comando quando le dimensioni del bundle superano il limite. È un ottimo modo per essere consapevoli delle dimensioni degli asset durante lo sviluppo.
Dopo la fase di creazione, il webpack restituisce un elenco di asset codificati a colori e le relative dimensioni. Tutti gli elementi oltre il budget vengono evidenziati in giallo.
Il limite predefinito sia per gli asset che per i punti di ingresso è di 250 kB. Puoi impostare target personalizzati nel file di configurazione.
I budget vengono confrontati con le dimensioni degli asset non compressi. Le dimensioni JavaScript non compresse sono correlate al tempo di esecuzione e l'esecuzione dei file di grandi dimensioni può richiedere molto tempo, in particolare sui dispositivi mobili.
Dimensioni bundle
Bundlesize è un semplice pacchetto npm che verifica le dimensioni degli asset in base a una soglia da te impostata. Può essere eseguita localmente e si integra con la tua CI.
interfaccia a riga di comando dimensione del bundle
Esegui l'interfaccia a riga di comando bundlesize specificando una soglia e il file che vuoi testare.
bundlesize -f "dist/bundle.js" -s 170kB
Bundlesize restituisce i risultati del test codificati per colore su un'unica riga.
Dimensione del bundle per CI
Otterrai il massimo valore dalla dimensione del bundle se la integri con una CI per applicare automaticamente i limiti di dimensione alle richieste di pull. Se il test delle dimensioni del bundle non riesce, la richiesta di pull non viene unita. Funziona per le richieste di pull su GitHub con Travis CI, CircleCI, Wercker e Drone.
Oggi potresti avere un'app veloce, ma l'aggiunta di nuovo codice spesso può modificare la situazione. Il controllo delle richieste di pull con bundlesize ti aiuterà a evitare regressioni delle prestazioni. Bootstrap, Tinder, Trivago e molti altri lo utilizzano per tenere sotto controllo i propri budget.
Con la dimensione del pacchetto è possibile impostare separatamente le soglie per ogni file. Questo è particolarmente utile se vuoi suddividere un bundle nella tua applicazione.
Per impostazione predefinita, verifica le dimensioni degli asset compressi con gzip. Puoi utilizzare l'opzione di compressione per passare alla compressione Brotli o disattivarla completamente.
Bot Lighthouse
Lighthouse Bot si integra con Travis CI e applica i budget in base a una qualsiasi delle cinque categorie di controllo di Lighthouse. Ad esempio, un budget di 100 per il punteggio delle prestazioni di Lighthouse. A volte è più semplice tenere d'occhio un singolo numero rispetto ai budget dei singoli asset e i punteggi Lighthouse tengono conto di molti aspetti.
Il bot Lighthouse esegue un controllo dopo che hai eseguito il deployment di un sito sul server temporaneo. In .travis.yml imposta budget per determinate categorie Lighthouse con le opzioni --perf, --a11y, --bp, --seo o --pwa. Cerca di rimanere in zona verde con un punteggio 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, il bot Lighthouse può impedire l'unione delle richieste di pull. ⛔
Il bot Lighthouse commenta la tua richiesta di pull con i punteggi aggiornati. Si tratta di una funzionalità molto utile che incoraggia la conversazione sulle prestazioni man mano che vengono apportate modifiche al codice.
Se noti che la tua richiesta di pull è bloccata da un punteggio di Lighthouse basso, esegui un controllo con l'interfaccia a riga di comando Lighthouse o in Strumenti per sviluppatori. Genera un report con dettagli sui colli di bottiglia e suggerimenti per semplici ottimizzazioni.
Riepilogo
| Strumento | CLI | CI | Riepilogo |
|---|---|---|---|
| Faro | ✔️ | ❌ |
|
| webpack | ✔️ | ❌ |
|
| dimensione del gruppo | ✔️ | ✔️ |
|
| Bot Lighthouse | ❌ | ✔️ |
|