Budget delle Prestazioni Web: Metriche, Limiti e Integrazione CI/CD
Il budget delle prestazioni web sono i limiti definiti per la dimensione della pagina, il tempo di caricamento e le metriche di Core Web Vitals. Questa guida copre la creazione del budget delle prestazioni, il monitoraggio e l'integrazione CI/CD.
Ultimo aggiornamento:
Cos'è il Budget delle Prestazioni?
Il budget delle prestazioni sono i valori massimi definiti per le metriche di prestazione della pagina web. Dimensione della pagina, dimensione del bundle JavaScript, tempo di LCP, ecc.
Scopo: Prevenire le regressioni delle prestazioni. Prevenire il degrado delle prestazioni quando si aggiungono nuove funzionalità.
Superamento del budget: Fallimento del build o avviso. Verifica delle prestazioni nella pipeline CI/CD.
Budget di esempio: JS bundle < 200KB, CSS < 50KB, LCP < 2.5s, dimensione totale della pagina < 1MB.
Metriche delle Prestazioni
Dimensione del bundle: Dimensioni dei file JavaScript e CSS. Analizzate con webpack bundle analyzer.
LCP (Largest Contentful Paint): Tempo di caricamento del più grande elemento di contenuto. Obiettivo < 2.5s.
CLS (Cumulative Layout Shift): Spostamenti nel layout della pagina. Obiettivo < 0.1.
INP (Interaction to Next Paint): Tempo di risposta all'interazione dell'utente. Obiettivo < 200ms.
TTFB (Time to First Byte): Tempo di risposta del server. Obiettivo < 600ms.
Peso totale della pagina: Dimensione totale della pagina. Obiettivo < 1-2MB (per mobile).
Creazione del Budget
Misurate le prestazioni attuali: Create la baseline con Lighthouse, WebPageTest.
Impostate gli obiettivi: Basati sull'analisi dei concorrenti e sulle aspettative degli utenti. Budget più rigoroso per mobile.
File di budget: Definite le metriche e i limiti con performance-budget.json.
Inasprimento graduale: Iniziate con un budget vicino alle prestazioni attuali. Inasprite gradualmente.
Adozione del team: Tutto il team dovrebbe adottare il budget delle prestazioni. Le prestazioni sono responsabilità di tutti.
Integrazione CI/CD
Lighthouse CI: Audit Lighthouse ad ogni PR. Verifica della soglia del punteggio delle prestazioni. Fallimento del build se il budget viene superato.
WebPageTest: Integrazione di WebPageTest nella pipeline CI/CD. Confronto di filmstrip e waterfall.
Verifica della dimensione del bundle: Verifica della dimensione del bundle con webpack-bundle-analyzer o bundlesize.
GitHub Actions: Test delle prestazioni automatico con l'azione Lighthouse CI. Rapporto dei risultati come commento PR.
Configurazione della soglia: Livelli di avviso ed errore. Avviso: 90% del budget. Errore: 100% del budget.
Monitoraggio e Reporting
RUM (Real User Monitoring): Dati di prestazione degli utenti reali. CrUX, Datadog, New Relic.
Synthetic monitoring: Test delle prestazioni periodici. WebPageTest, Pingdom, GTmetrix.
Dashboard: Visualizzate le tendenze delle prestazioni. Dashboard di Grafana, Datadog.
Alerting: Alert quando il budget viene superato. Notifica Slack, email.
Reporting: Rapporto delle prestazioni settimanale/mensile. Analisi delle tendenze e raccomandazioni di miglioramento.
Migliori Pratiche
Performance champion: Assegnate la responsabilità delle prestazioni nel team. Diffondete la cultura delle prestazioni.
Revisione del budget: Rivedete il budget alla fine di ogni sprint. Regolate il budget per le nuove funzionalità.
Trade-off: Nuova funzionalità vs prestazioni. Ogni funzionalità porta un costo di prestazione. Prendete una decisione consapevole.
Documentazione: Documentate il budget delle prestazioni e la giustificazione. Per l'onboarding del team.
Miglioramento continuo: Inasprite gradualmente il budget delle prestazioni. Obiettivo di miglioramento del 10%.