Minificare codice HTML istantaneamente per ridurre la dimensione del file e migliorare la velocità di caricamento del sito web.
Introduzione
L'HTML che scrivi per lavorarci e l'HTML che arriva al browser non devono essere lo stesso file. Mentre costruisci una pagina, rientri e interruzioni di riga rendono leggibile la struttura, e i commenti lasciati nel codice spiegano le varie parti o ti servono da appunto per dopo. Al browser non serve niente di tutto questo per visualizzare la pagina correttamente: gli bastano tag validi e ben formati. La minificazione toglie ciò che c'è solo per chi legge, così la stessa pagina raggiunge il browser come file più leggero.
Come questo strumento minifica il tuo HTML
- Tutti i commenti vengono rimossi, senza eccezioni. Ogni blocco
<!-- ... -->viene eliminato, compresi i vecchi commenti condizionali di Internet Explorer e qualunque commento tu avresti voluto tenere, per esempio una nota di licenza o di attribuzione. Qui non esiste l'equivalente della convenzione «questo tienilo» che il minificatore CSS di questo sito prevede: se un commento ti serve, conservalo nella tua copia di lavoro e non contare sul fatto che sopravviva alla minificazione. - Il contenuto dentro i tag
<pre>,<code>,<script>e<textarea>conserva gli spazi esatti. Dentro questi tag interruzioni di riga e spaziatura hanno un significato, e un esempio di codice o un blocco di testo preformattato apparirebbe sbagliato se la spaziatura interna venisse compattata; lo strumento lascia quegli spazi intatti. - Altrove gli spazi vengono compattati, non cancellati. Una sequenza di spazi, tabulazioni o interruzioni di riga fra due elementi in linea, per esempio un collegamento dentro una frase, si riduce a un singolo spazio invece di sparire del tutto, così le parole vicine non finiscono attaccate. Solo lo spazio fra i tag strutturali di primo livello e quello dentro
<head>viene eliminato per intero, perché lì non c'è nulla che venga mai reso come testo scorrevole visibile. - La barra finale di autochiusura viene normalizzata.
<img src="photo.jpg" />diventa<img src="photo.jpg">: entrambe le forme sono HTML valido, e quella più corta risparmia qualche carattere su ogni tag autochiuso della pagina.
L'unico rischio reale: i commenti dentro contenuto preformattato
Dato che la rimozione dei commenti avviene come primo passaggio su tutto ciò che hai incollato, prima che lo strumento guardi dentro quale tag si trovi ogni cosa, non è in grado di distinguere un normale commento da eliminare dal testo letterale <!-- ... --> che stai mostrando di proposito dentro un blocco <pre> o <code>: è il caso, per esempio, dell'esempio di codice di un tutorial che fa vedere com'è fatto un commento HTML. In quel caso specifico il testo dell'esempio viene tolto, anche se la spaziatura intorno, nello stesso blocco, è conservata correttamente. Riguarda solo il testo che contiene letteralmente i caratteri <!-- e --> dentro un blocco preformattato; non tocca i normali esempi di codice che non includono la sintassi dei commenti fra le cose che mostrano.
Cosa sapere prima di minificare
Lo strumento cambia solo la formattazione: non riordina gli elementi, non accorpa i tag e non toglie nulla alla struttura effettiva della pagina. Non c'è un limite di dimensione a quello che puoi incollare, perché qui lavori direttamente sul testo invece di caricare un file: l'HTML completo di una pagina, anche lunga, si incolla e viene elaborato come un frammento breve.
Come con qualsiasi minificatore, conviene aprire nel browser il risultato minificato prima di pubblicarlo. Non perché la conversione sia poco affidabile, ma perché è buona pratica verificare che una pagina si presenti e si comporti come ti aspetti prima di metterla online, esattamente come si rilegge qualsiasi cosa prima di consegnarla o pubblicarla.
Quando è lo strumento giusto
- Preparare una pagina alla pubblicazione, a lavoro finito. Continua a lavorare sulla versione leggibile mentre costruisci la pagina e minifica una volta sola, poco prima di pubblicarla: non è un formato di lavoro.
- Alleggerire una pagina su un hosting limitato o una connessione lenta. Un file HTML più piccolo si scarica più in fretta, e su una rete scolastica o su un telefono con dati mobili conta più di quanto sembri.
- Confrontare il codice sorgente per vedere com'è fatto l'HTML di un sito reale. Guardando il sorgente di un sito vero si trova spesso un HTML compatto che non assomiglia per niente a quello che si scrive a mano: minificare la propria pagina e metterla a confronto è un modo concreto di capire perché.
Esempio
Uno studente finisce la pagina del suo portfolio personale per un corso di web design, con commenti sparsi nel codice rimasti dalle stesure precedenti e, dentro un blocco <pre>, un esempio di codice che mostra com'è fatto un commento HTML, come parte del racconto di quello che ha imparato. Prima di consegnare il progetto incolla qui la pagina intera. La pagina visualizzata si presenta e si comporta esattamente come prima, i vecchi commenti di lavoro non ci sono più e il file è più leggero, ma è sparito anche l'esempio di commento dentro il blocco di codice, perché conteneva proprio i caratteri letterali <!-- e -->. Per evitare il problema basta modificare quell'unico esempio in modo che non usi esattamente la sintassi dei commenti, oppure tenere quella parte fuori da ciò che viene minificato.
Domande frequenti
La minificazione cambia l'aspetto della mia pagina?
No. Tag e struttura restano intatti: cambiano solo formattazione, spazi e commenti, e nessuna di queste cose influisce su come la pagina viene visualizzata.
Che fine fanno i commenti nel mio HTML?
Vengono rimossi tutti, senza eccezioni: non c'è modo di segnare un commento come da conservare, a differenza del minificatore CSS di questo sito.
Gli spazi dentro un blocco <pre> o <code> vengono conservati?
Sì, spaziatura e interruzioni di riga dentro quei tag, e dentro <script> e <textarea>, restano esattamente come li hai scritti. L'unica eccezione è quando quel contenuto include letteralmente la sintassi dei commenti (<!-- -->) come testo che stai mostrando: quello viene rimosso insieme ai commenti veri, perché la rimozione dei commenti avviene prima che lo strumento guardi dentro quale tag si trovi.
C'è un limite di dimensione?
No: qui incolli del testo, non carichi un file, quindi non c'è un limite fisso come negli strumenti di questo sito che lavorano su file caricati.
Il mio codice viene salvato da qualche parte?
No. L'HTML incollato viene elaborato per produrre il risultato minificato e non viene archiviato come file né conservato dopo; dell'operazione resta registrato soltanto il fatto che lo strumento è stato usato, non il codice.
Quali strumenti collegati posso usare?
Per gli altri formati di codice usa CSS Minifier e JavaScript Minifier per minificare, oppure CSS Beautifier e JavaScript Beautifier per fare il percorso inverso.
