CodeKitHubChe cos'è questo strumento?
Un minificatore HTML rimuove tutto ciò che non è necessario al browser per visualizzare correttamente una pagina: commenti, spazi bianchi superflui tra i tag, attributi ridondanti come type="text/javascript" e le barre di chiusura opzionali. Il risultato è un codice HTML funzionalmente identico, ma che viene scaricato e analizzato più rapidamente.
Questo strumento si basa su html-minifier-terser, lo stesso minificatore utilizzato all’interno di popolari strumenti di compilazione, quindi comprende la struttura HTML anziché eliminare ciecamente gli spazi bianchi: non modificherà i contenuti sensibili alla formattazione all’interno dei tag <pre>, <textarea> o nei blocchi inline <script>/<style>, e ottimizza anche i file CSS e JS incorporati nel tuo markup.
Perché usarlo?
- Utilizza un vero parser interno, non espressioni regolari — garantisce la sicurezza anche in casi limite come i blocchi <pre>, gli script inline e i commenti condizionali.
- Ottimizza anche i contenuti incorporati <style> e <script>, non solo il codice di markup circostante.
- Scopri esattamente quanti byte hai risparmiato prima di inviare il file.
- La modalità "Formato" trasforma il codice HTML compresso su una sola riga in un formato leggibile e modificabile dall'utente.
- Elaborazione al 100% in locale: il tuo markup e tutti i dati privati in esso contenuti non lasciano mai il tuo browser.
Come si usa
- Incolla il tuo codice HTML nella casella di immissione oppure clicca su "Carica esempio" per provare un esempio.
- Clicca su "Minify" per comprimerlo, oppure su "Format" per formattarlo con un'indentazione di 2 spazi.
- Controlla il messaggio sotto i campi: la modalità "minify" mostra la riduzione delle dimensioni; se il codice HTML non può essere analizzato, vedrai l'errore esatto invece di un output errato.
- Fai clic su "Copia" per salvare il risultato.
Esempio
Input
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<!-- greeting -->
<p class="greeting">
Hello, world!
</p>
</body>
</html>Risultato
<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>I commenti, le indentazioni e le interruzioni di riga vengono rimossi; il doctype viene abbreviato. La pagina visualizzata appare identica.
Consigli pratici
- Ottimizzare il codice subito prima della distribuzione, non durante lo sviluppo: mantenere l'HTML leggibile nel controllo di versione e ottimizzare solo il risultato della compilazione.
- Se una pagina si comporta in modo anomalo dopo la minificazione, verifica la presenza di codice JavaScript che fa affidamento su spazi esatti all'interno dei nodi di testo (è raro, ma può accadere con alcuni widget meno recenti).
- La formattazione dell'HTML minificato proveniente da un sito attivo è un modo veloce per esaminarne la struttura prima di scrivere uno scraper o di risolvere problemi di layout.
- Se il tuo processo di compilazione conserva gli stili e gli script in file separati, utilizzali insieme ai minificatori CSS e JS riportati di seguito.
Come si inserisce tutto questo nei flussi di lavoro reali
I siti statici, i modelli di email e le landing page realizzati manualmente spesso vengono pubblicati con la stessa indentazione e gli stessi commenti utilizzati durante lo sviluppo. La minificazione prima della pubblicazione riduce in misura concreta, seppur modesta, il peso dei dati trasferiti; inoltre, per quanto riguarda in particolare l’HTML delle email, il numero di caratteri a volte influisce sulla soglia di troncamento di Gmail, quindi un codice più snello offre un vantaggio funzionale che va oltre la velocità.
L'opzione "Formato" è altrettanto utile anche al contrario: incollare una pagina minimizzata dal "Visualizza sorgente" e riformattarla è spesso il modo più veloce per comprendere la struttura della landing page di un concorrente o per correggere un codice incorporato di terze parti.
Casi d'uso comuni
- Ridurre leggermente le dimensioni di una landing page statica o di un modello di email prima della sua pubblicazione.
- Riformattazione di un frammento di codice HTML minimizzato estratto da “Visualizza sorgente” per comprenderne la struttura.
- Pulizia del codice HTML incollato da un editor WYSIWYG o da un'esportazione CMS, che spesso contiene spazi bianchi in eccesso.
- Verificare rapidamente se un frammento di codice HTML scritto a mano è ben formato, poiché un errore di analisi viene segnalato chiaramente.
Domande frequenti
Il mio codice HTML viene caricato da qualche parte?
No. Sia la minificazione che la formattazione avvengono localmente nel browser tramite JavaScript. Nulla di ciò che si incolla viene inviato a un server, quindi è sicuro da usare con modelli interni o pagine non ancora pubblicate.
La minificazione potrebbe compromettere il funzionamento della mia pagina?
Non dovrebbe: lo strumento utilizza un vero e proprio parser HTML (html-minifier-terser) in grado di interpretare la struttura dei tag, quindi conserva gli elementi sensibili agli spazi bianchi come <pre> e <textarea> e non unisce gli attributi in modo errato. Controlla sempre a campione le pagine critiche dopo la minificazione, specialmente se utilizzi script inline non convenzionali.
Minimizza anche i file CSS e JavaScript all’interno del codice HTML?
Sì. I blocchi inline <style> e <script> vengono minificati direttamente utilizzando gli stessi motori degli strumenti dedicati alla minificazione di CSS e JS, quindi non è necessario estrarli manualmente.
Di quanto si riduce in genere la dimensione del codice HTML?
Dipende dalla quantità di spazi bianchi, commenti e formattazione presenti nel codice originale: l’HTML scritto a mano con molte indentazioni e commenti si riduce solitamente del 20-40%. L’HTML generato da un framework, che è già compatto, consentirà un risparmio minore.
È possibile riconvertire l'HTML minificato in un formato leggibile?
Sì — incolla il codice HTML minimizzato e clicca su "Format" invece che su "Minify" per ottenere un codice ben indentato e leggibile.