Minificatore HTML

La minificazione HTML rimuove ogni carattere di cui un browser non ha bisogno per renderizzare la pagina — commenti, interruzioni di riga, rientri e spazi bianchi tra i tag — senza cambiare l'aspetto o il funzionamento della pagina. Ad esempio, '<ul>\n <li>Uno</li>\n <li>Due</li>\n</ul>' (circa 43 byte) si minifica in '<ul><li>Uno</li><li>Due</li></ul>' (33 byte). La lista renderizzata è identica per il visitatore. Il risparmio sembra piccolo per singoli snippet, ma le pagine HTML reali piene di rientri e markup generato da CMS si riducono abitualmente del 15–25% in byte grezzi — di più se combinati con la compressione gzip sul server.

Meno byte HTML significa meno dati da scaricare e meno lavoro di parsing per il browser, quindi la pagina si carica più velocemente — il che migliora il First Contentful Paint (FCP) e i punteggi Core Web Vitals, specialmente su mobile. Google PageSpeed Insights segnala l'HTML non minificato come problema di performance standard e lo include nelle sue raccomandazioni. Il vantaggio è maggiore per pagine scritte a mano o generate da CMS piene di rientri e commenti degli sviluppatori. Ogni kilobyte che elimini è un kilobyte che il visitatore non deve mai scaricare, il che conta di più su connessioni mobile lente dove la banda è limitata.

Vengono rimossi i commenti (<!-- … -->), le sequenze di spazi bianchi, i rientri e le interruzioni di riga tra i tag, e i gap tra elementi block-level. Il minificatore comprime anche gli attributi booleani (quindi 'disabled="disabled"' diventa semplicemente 'disabled') e può opzionalmente eliminare i tag di chiusura ridondanti come </li> e </td>. I commenti condizionali (<!--[if IE]>) vengono sempre preservati poiché sono ancora rilevanti per il targeting di IE vecchi. I contenuti di <pre>, <textarea>, <script> e <style> non vengono mai toccati — gli spazi bianchi in quegli elementi sono significativi e cambiarli romperebbe la pagina.

Sì, quando l'HTML non passa già attraverso una fase di build. Le pagine scritte a mano, esportate da un CMS, o assemblate in un tema WordPress, più le email HTML e i blocchi inline <style>/<script>, vengono tutti inviati con rientri e commenti che la minificazione elimina gratuitamente. Se un bundler come Vite o webpack già minifica il tuo output, quei file non hanno bisogno di un secondo passaggio — ma la maggior parte dell'HTML nel mondo reale non vede mai un bundler. I generatori di siti statici come Jekyll e Hugo includono minificatori HTML come plugin opzionali, e i plugin WordPress come WP Rocket, LiteSpeed Cache e Autoptimize lo fanno automaticamente per ogni rendering di pagina.

Come testo grezzo, la minificazione risparmia tipicamente il 10–25%. Una pagina scritta a mano da 30 KB spesso scende a circa 24 KB, e un piccolo snippet come '<ul>\n <li>Uno</li>\n <li>Due</li>\n</ul>' (43 byte) si riduce a 33 byte — circa il 23% in meno. Una volta che il server comprime il risultato con gzip, la riduzione combinata è solitamente del 70–85%. Questo strumento mostra la dimensione minificata e una stima gzip fianco a fianco, così vedi entrambi i numeri insieme. La stima gzip è calcolata localmente nel tuo browser — non su un server — quindi ottieni il risparmio combinato reale senza caricare nulla.

Non quando viene eseguita in modo sicuro, che è come funziona questo strumento. Non tocca mai i contenuti di <pre>, <textarea>, <script> o <style>, dove gli spazi bianchi sono significativi, e preserva gli spazi singoli tra elementi inline come link e <span> — così 'un <a href="/x">link</a> qui' non diventa mai 'un linkqui' unito. Alcuni minificatori online veloci collassano quegli spazi e cambiano sottilmente il rendering o il layout. L'HTMLMinifier di Kangax (la libreria Node.js di minificazione HTML più popolare) usa un approccio sicuro per impostazione predefinita per la stessa ragione. Se vedi qualche differenza nel rendering dopo la minificazione, usa la modalità Abbellisci per ripristinare la struttura originale.

Passa alla modalità Abbellisci con l'interruttore in alto e incolla il tuo HTML minificato. Lo strumento reindenta il markup e mette i tag su righe proprie, trasformando '<ul><li>Uno</li><li>Due</li></ul>' di nuovo in codice leggibile e formattato. Scegli indentazione a 2 spazi, 4 spazi o tabulazione per abbinarti allo stile del tuo progetto. Questo è l'inverso della minificazione — utile per ispezionare una pagina minificata trovata in produzione, leggere un template CMS compresso da uno strumento di build, o fare debug di un layout vedendo la struttura completa dei tag chiaramente disposta.

La minificazione riduce il testo sorgente stesso — si invia un file .html fisicamente più piccolo. Gzip e Brotli comprimono i byte durante il trasferimento, e il browser li decomprime trasparentemente all'arrivo. I due si sommano: minifica il sorgente prima, poi lascia che il tuo server lo comprima con gzip. web.dev di Google raccomanda di fare entrambi i passaggi — la minificazione elimina byte che gzip non riesce a comprimere completamente, mentre gzip gestisce i pattern ripetitivi che la minificazione lascia intatti. Per questo questo strumento mostra sia il conteggio dei byte minificati sia una stima gzip, così puoi vedere il guadagno combinato completo prima e dopo il deploy.

La minificazione rende l'HTML più piccolo mantenendolo valido e completamente leggibile una volta abbellito — elimina solo i caratteri che il browser ignora. L'offuscamento invece rimescola o riscrive deliberatamente il codice per renderlo difficile da capire o copiare. Minificare HTML non rinomina mai le tue classi, ID o contenuti né cambia il significato; è senza perdite e reversibile, cosa che l'offuscamento non è. Se vuoi impedire alle persone di leggere il sorgente HTML (che i browser espongono comunque tramite Visualizza sorgente), la sola minificazione non aiuterà — avresti bisogno di tecniche aggiuntive che esulano da ciò che un minificatore fa.

Sì, in un unico passaggio. Lascia attivo 'Minifica CSS inline' e lo strumento comprime i contenuti di ogni blocco <style> — rimuovendo commenti e spazi bianchi proteggendo stringhe, url() e calc(). 'Minifica JS inline' tratta i blocchi <script> in modo conservativo: rimuove commenti e comprime gli spazi ma preserva le interruzioni di riga così l'inserimento automatico dei punto e virgola (ASI) non può rompere il codice. Gli script indicati come JSON o template vengono lasciati intatti. Questo approccio copre un gap che i soli minificatori CSS e i soli minificatori JS non riescono a coprire — pagine HTML con tutti e tre i linguaggi mescolati insieme.

Con questo strumento, sì — perché gira al 100% nel tuo browser usando JavaScript. Il tuo HTML non viene mai caricato, registrato o memorizzato da nessuna parte, quindi anche pagine non ancora pubblicate, lavori con clienti o markup contenente dati privati rimane interamente sul tuo dispositivo. Puoi verificarlo disconnettendoti dalla rete: il minificatore funziona ancora offline perché non è coinvolto alcun server. Al contrario, HTMLMinifier.com e Minifier.org inviano entrambi il tuo HTML a un server remoto per l'elaborazione. Anche il minificatore HTML di Willpeavy.com fa un giro sul server. Per progetti riservati, l'elaborazione locale nel browser è l'unica opzione sicura.

Hai due opzioni. Per un uso occasionale, copia il sorgente della pagina renderizzata (o l'output di un template) e incollalo qui per minificarlo. Per ogni pagina automaticamente, un plugin di caching o ottimizzazione può minificare HTML al volo: WP Rocket, W3 Total Cache, LiteSpeed Cache e Autoptimize includono tutti impostazioni di minificazione HTML. WP Rocket e LiteSpeed Cache sono i più affidabili per temi complessi con molto contenuto dinamico. Questo strumento è perfetto per snippet di tema, blocchi personalizzati e template di email HTML che quei plugin non coprono automaticamente, come le sezioni personalizzate di Elementor o i template di campi ACF.

HTMLMinifier.com e Minifier.org sono minificatori HTML online popolari, ma entrambi inviano il tuo HTML a un server remoto per l'elaborazione. Ciò significa che il tuo markup — incluse eventuali pagine non ancora pubblicate, password nei moduli o lavori riservati con clienti — lascia il tuo dispositivo. Minifycode.com è un altro strumento lato server con la stessa limitazione. Questo strumento fa tutto localmente nel browser, quindi non viene mai caricato nulla. Quanto alle funzionalità, aggiunge un abbellitore bidirezionale nella stessa interfaccia, stime gzip in tempo reale e minificazione di CSS/JS inline — tutto senza ricaricamenti di pagina o giri sul server.

Sì, funziona completamente su mobile — incolla HTML dagli appunti, vedi il risultato minificato immediatamente e ricopialo. L'interfaccia si adatta agli schermi piccoli. È stato testato su Safari per iOS e Chrome per Android. Un caso d'uso mobile comune è verificare quanto si riduce un template di pagina prima di fare il commit di una modifica — puoi incollare l'HTML dal Visualizza sorgente di un browser mobile e vedere subito il risparmio. Nessun download di app, nessuna registrazione e nessun limite di utilizzo su mobile. Funziona anche senza connessione di rete una volta che la pagina è stata caricata.