# Compressione fino al 70% con statistiche di byte risparmiati

> Minifica e beautify online HTML, CSS, JSON, XML. Riduzione 30-50% HTML/CSS, fino al 70% JSON. Preserva whitespace dentro pre, textarea, script, style.

Strumento gratuito nel browser (nessun upload): https://www.mauriziofonte.it/strumenti/minifica-html-css-js-online

Minify e beautify per **HTML, CSS, JSON, XML**. Riduzione tipica del 30-50% sui sorgenti HTML/CSS, fino al 70% sul JSON pretty-printed. Statistiche di compressione inline. Per JavaScript serve un minifier AST-based (Terser, esbuild, swc) integrato nella build pipeline: questo tool si limita ai linguaggi che si possono trattare con regole text-replacement deterministiche.

## Come usare il minifier

1. **Incolla il sorgente** - HTML, CSS, JSON o XML. Per HTML il tool preserva il contenuto di `<pre>`, `<textarea>`, `<script>`, `<style>` intatto (whitespace significativo).
2. **Scegli l'azione** - Minify rimuove commenti e collassa whitespace. Beautify riformatta con indentazione consistente. Funzionalità inverse: minify l'output del beautify ti restituisce un sorgente equivalente.
3. **Verifica le stats** - Lo status bar mostra dimensione input, dimensione output, percentuale di riduzione/aumento. Tipico: HTML -30%, CSS -25%, JSON pretty -> minified -65%.
4. **Copia o re-elabora** - Copia per uso diretto. Per workflow di build (Webpack, Vite, esbuild), questi minifier sono integrati nei tool: usa il minifier qui solo per script ad-hoc o quick check.

## Cosa minifica e cosa lascia stare

**Linguaggi coperti.** Il minifier elabora HTML, CSS, JSON e XML, cioè linguaggi su cui la riduzione di whitespace e commenti può essere applicata con regole deterministiche di text-replacement. Per JavaScript la riduzione affidabile richiede un parser AST (Terser, esbuild, swc) capace di operare su rinomina variabili, dead code elimination e mangling: trasformazioni semanticamente complesse, fuori scope per un'utility lightweight e correttamente di responsabilità della build pipeline (Webpack, Vite, esbuild).

**HTML, le regole di preservazione.** Il minifier HTML rispetta i contesti dove whitespace è significativo: dentro `<pre>`, `<textarea>`, `<script>`, `<style>` il contenuto resta intatto. Alcuni minifier più aggressivi rimuovono newline dentro `<pre>` spezzando i code samples o rimuovono whitespace dentro `<script>` spezzando i template literal multi-riga: qui questi errori sono prevenuti.

**Privacy operativa.** HTML, CSS e JSON di un sito in build possono contenere riferimenti a backend interni, schema database, struttura API, dummy account o secret in commenti. La minificazione avviene direttamente nel browser, evitando di trasferire questi sorgenti a un servizio terzo per un'operazione che è essenzialmente meccanica.

## Glossario

- **Minify**: Rimozione di whitespace, commenti, indentazione non significativi per ridurre la dimensione del file. Tipicamente -20-50% bytes per HTML/CSS, -50-70% per JSON pretty-printed.
- **Beautify**: Operazione inversa: re-indenta e re-spazia un file minificato o mal formattato per renderlo leggibile umano.
- **Whitespace significativo**: Spazi/newline che hanno effetto sul rendering o sull'esecuzione. Esempi: dentro `<pre>`, dentro stringhe JS/CSS, in CDATA XML. Il minifier rispetta questi contesti.

## Domande frequenti

### Perché non c'è il JS minify?

Per ridurre i byte JS in modo affidabile serve un parser AST (Terser, esbuild, swc): trasformazioni come rinomina variabili, dead code elimination e mangling richiedono comprensione semantica del codice. Sono librerie pesanti, normalmente integrate in una build pipeline (Webpack, Vite, esbuild). Per minify ad-hoc da terminale: `npx terser file.js -c -m`.

### Il CSS minifier collassa colors?

Si parzialmente: `#aabbcc` diventa `#abc` dove possibile (solo se i tre canali hanno entrambi i nibble uguali). Altri micro-ottimizzazioni (rimozione unità su 0, conversione rgba(0,0,0,1) -> #000) non sono implementate per non rischiare di rompere CSS edge case.

### HTML minify rompe il rendering?

Non dovrebbe. Il tool preserva il contenuto di `<pre>`, `<textarea>`, `<script>`, `<style>`. Edge case: HTML con whitespace significativo nell'inline (es. `<span>a</span> <span>b</span>`) può diventare `<span>a</span><span>b</span>` con i due span attaccati. Per layout testuali sensibili al whitespace, usare beautify e rivedere a mano.

### Funziona offline?

Si. Bookmark per uso offline.

### JSON minify gestisce JSON con commenti (JSONC)?

No, JSON.parse rifiuta commenti. Per JSONC: rimuovi commenti via regex prima di pasteare, oppure usa un parser JSONC dedicato (lib jsonc-parser di Microsoft per esempio).

### C'è un limit di dimensione?

Il tool non impone un limite fisso. File HTML/CSS/JSON da 1-2 MB sono comodi. Oltre i 10 MB l'UI può diventare lenta. Per file enormi: `html-minifier-terser` CLI.

### XML beautify gestisce CDATA section?

Tratta <![CDATA[...]]> come elemento da preservare. Verificare il risultato per casi complessi (CDATA con tag interni testuali che il parser potrebbe confondere).

---
Uno strumento di Maurizio Fonte, senior backend engineer. Tutti gli strumenti: https://www.mauriziofonte.it/strumenti/