Performance Budget: Imporre Velocità in CI/CD

Performance Budget: Imporre Velocità in CI/CD

Un performance budget è un insieme di limiti su metriche che influenzano la velocità del sito. Imporre budget in CI/CD previene regressioni performance in produzione.

Tipi di Budget

Bundle size: JS (gzippato), CSS, totale. Core Web Vitals: Soglie LCP, INP, CLS. Conteggio risorse: Richieste, domini terze parti, peso immagini. Timing: TTFB, FCP, TTI, TBT. Custom: Business-specific (latenza ricerca, API p99).

Impostare Budget Realistici

Baseline: Misura performance attuali (Lighthouse, WebPageTest, CrUX). Analisi competitor: Confronta con top 3 competitor. Aspettative utenti: 3s caricamento, 100ms interazione. Mix device: Budget mobile vs desktop. Rete: 4G, 3G, offline-first. Inizia generoso, stringi nel tempo.

Budget Bundle Size

JavaScript: <170KB gzippato (ideale), <350KB (max). CSS: <50KB gzippato. Totale: <500KB iniziale. Tool: webpack-bundle-analyzer, rollup-plugin-visualizer, vite-bundle-analyzer, bundlesize, webpack performance hints. Code splitting: Route-level, component-level. Tree shaking: ES modules, sideEffects: false.

Budget Core Web Vitals

LCP: <2.5s (buono), <4s (da migliorare). INP: <200ms (buono), <500ms (da migliorare). CLS: <0.1 (buono), <0.25 (da migliorare). TTFB: <800ms. FCP: <1.8s. TBT: <200ms. Misura: Lighthouse CI, WebPageTest, Chrome DevTools Protocol.

Budget Terze Parti

Limite: <5 domini terze parti, <100KB JS terze parti. Audit: Request Map, Lighthouse third-party summary. Strategie: Self-host font/analytics, async/defer, resource hints (preconnect, dns-prefetch), facade pattern (lazy-load third-party UI), rimuovi inutilizzati.

Integrazione CI/CD

Lighthouse CI: Esegui su ogni PR, fallisci se budget superato. GitHub Actions: lighthouse-ci-action, commenta PR con report. WebPageTest: wpt-cli, GitHub Action. bundlesize: npm package, CLI, GitHub Action. Custom: Playwright + Lighthouse, k6 per budget API. Commenti PR: Regressione visuale, status budget.

Monitoraggio in Produzione

RUM: CrUX (Chrome UX Report), Web Vitals library, Datadog RUM, New Relic. Alert: Budget burn rate (multi-window). Dashboard: Grafana, Datadog, custom. Correlazione: Deploy → cambio metrica. Feature flag: Rollback senza deploy.

Cultura Performance

Rendi performance visibili: Dashboard in area team, review settimanali. Performance review: Parte checklist code review. Educazione: Workshop, learnings condivisi. Incentivi: Celebra miglioramenti. Ownership: Ogni team possiede i propri budget. Continuo: Non progetto one-time.