Performance budget di un sito: come si fissa

Un performance budget è un tetto di byte e di millisecondi che ogni deploy deve rispettare: la home del nostro sito carica 327.750 byte in 23 richieste, e 196.252 byte sono font. Il budget che ne deriva è 400 KB in totale, 200 KB di font, 100 KB di JavaScript, 30 KB di CSS e 40 KB di immagini.

Dove finiscono i byte

Anche il tempo ha un tetto

I font sono il 60% del totale: sei file per 196.252 byte, e ogni peso è un download che il browser deve completare prima di mostrare il testo. Il margine positivo sul totale non compensa uno sforamento per tipo: se un tipo sfonda il suo tetto il deploy si blocca lo stesso, ed è il comportamento che vuoi.

Il budget che si applica da solo

{
  "performance": {
    "budget": [
      { "resourceType": "total", "budget": 400 },
      { "resourceType": "stylesheet", "budget": 220 },
      { "resourceType": "script", "budget": 60 },
      { "resourceType": "font", "budget": 50 },
      { "resourceType": "image", "budget": 40 }
    ],
    "timings": [
      { "metric": "largest-contentful-paint", "budget": 2500 },
      { "metric": "cumulative-layout-shift", "budget": 0.1 }
    ]
  }
}

Le cifre sono in kilobyte e descrivono il trasferimento, non il peso decompresso. Il file si passa a Lighthouse con --budget-path:

npx lighthouse http://localhost:3100/ --budget-path=budget.json \
  --output=json --output-path=./lh.json --chrome-flags="--headless"

Lighthouse elenca le voci fuori budget nella categoria budgets. Per far fallire la pipeline serve Lighthouse CI, che con le stesse soglie in assert restituisce un exit code diverso da zero.

Cosa tagliare per primo

• Font: sei file per 196.252 byte sono il primo bersaglio; due pesi bastano, e il solo Inter latino regular pesa 48.256 byte. Fonte: web.dev, CC BY 4.0.
• JavaScript: carica i chunk di rotta solo quando servono. I due file iniziali misurati sono 90.897 byte. Fonte: web.dev, CC BY 4.0.
• CSS: cinque fogli per 22.486 byte compressi; qui il margine c'è, e va speso in regole, non in un altro foglio. Fonte: MDN, CC BY-SA 2.5.
• Immagini: qui pesano 3.717 byte perché la home ne usa quattro piccole; su un catalogo diventano la voce più grande e vanno servite in AVIF o WebP.

Il limite da dichiarare

Il budget misura il laboratorio, non i tuoi utenti: 2.672 ms di LCP su Slow 4G simulato non sono il 75° percentile di campo. I byte restano validi perché non dipendono dalla rete; le soglie di tempo vanno confrontate con i dati reali, e su una connessione peggiore il long task da 492 ms può raddoppiare.

Dove continuare

Il catalogo EneUI indicizza 111.985 componenti, per esempio sparkles, e il blocco banner-01: una pagina con tre di questi blocchi aggiunge immagini e CSS al budget. Per le soglie leggi cosa sono i Core Web Vitals, per il costo degli script JavaScript di terze parti, per la cache cache e CDN e per il confronto tra architetture framework frontend a confronto.