Dovrei minimizzare insieme HTML, CSS e JavaScript?

Sì, di solito vengono minimizzati insieme in una pipeline di costruzione perché ognuno mira a una risorsa diversa. Questo strumento minimizza la shell HTML e lascia deliberatamente in linea e contenuto in linea, quindi abbinalo a un minifier CSS per fogli di stile e un minifier JavaScript dedicato (come Terser) per gli script. Il minimizzare tutti e tre offre la più grande riduzione totale di byte su una pagina.

Il minimismo romperà i miei blocchi o script inline?

no . Prima di qualsiasi esecuzione di trasformata, i contenuti completi di , , e vengono mascherati e ripristinati alla fine. Gli esempi di codice mantengono ogni interruzione di riga e spazio, i valori predefiniti di TextArea non vengono toccati e JavaScript o CSS in linea viene passato attraverso byte per byte anziché essere remissionato.

Quanto risparmia effettivamente la minimizzazione HTML?

Le tipiche pagine renderizzate o generate da modelli si riducono del 10–25%, principalmente a causa di indentazione e commenti; il markup profondamente nidificato e fortemente indentato può diminuire di più. Oltre a Gzip o Brotli, i risparmi sui cavi sono più piccoli, ma il documento HTML è in blocco per definizione, quindi vale la pena avere anche solo pochi KB di sconto sulla prima risposta. Il badge di risparmio mostra i tuoi numeri esatti.

Il collasso degli spazi bianchi tra i tag è sicuro?

Questo strumento comprime le esecuzioni di spazi bianchi in un singolo spazio anziché eliminarli, che è la scelta conservativa: HTML tratta qualsiasi spazio bianco come uno spazio durante il rendering, quindi l'output visivo è identico. L'eliminazione del tutto di spazi bianchi tra tag (come possono fare i minifier aggressivi) può unire visibilmente elementi inline, questa è esattamente la classe di bug evitata da questo strumento.

Cosa sono i commenti condizionali e perché mantenerli?

Commenti condizionali come ... sono direttive che Internet Explorer legacy ha analizzato per includere il markup specifico di IE. Se servi ancora gli utenti aziendali su vecchi IE o mantieni modelli di email legacy, eliminandoli cambia silenziosamente il comportamento. L'opzione Conserva li mantiene mentre i commenti ordinari vengono rimossi; disattivalo se non hai target legacy.

Il minifier rimuove gli spazi bianchi all'interno dei valori degli attributi?

no . Il parser di tag è attenti alle virgolette, quindi qualsiasi cosa tra virgolette singole o doppie - testo alternativo, attributi del titolo, json inline negli attributi di dati, liste srcset - viene copiato esattamente come scritto. Solo gli spazi bianchi tra gli attributi e la sintassi intorno al tag vengono compressi.

Posso annullare l'minificazione di una pagina che ho salvato dalla produzione?

Sì, incollalo e fai clic su Beautify. I tag nidificati ottengono un'indentazione corretta, gli elementi di blocco ognuno ottengono la propria riga e gli elementi inline rimangono nel flusso di testo in modo che i paragrafi rimangano leggibili. I blocchi di script e stile mantengono la loro formattazione interna originale; se anche quelli sono minimizzati, eseguili separatamente tramite un abbellitore JS o CSS dedicato separatamente.

Dovrei invece minimizzare l'HTML al momento della build?

Per le app di produzione, sì, metti HTML-Minifier-Terser o la compressione integrata del tuo framework nella pipeline in modo che accada su ogni distribuzione. Questo strumento è per i casi che una pipeline non copre: pagine di destinazione una tantum, modelli di e-mail, frammenti CMS, controllando cosa risparmierebbe un passaggio minimizzato o abbellindo il markup che non hai creato.

Gestisce correttamente elementi vuoti come e ?

si. I 14 elementi vuoti HTML (BR, IMG, Input, Meta, Link, HR e il resto) sono riconosciuti come autonomi, quindi l'abbellitore non aumenta mai il rientro dopo di loro o si aspetta un tag di chiusura. La sintassi in stile XML a chiusura automatica come viene anche accettata e lasciata come scritta.

La minimizzazione cambierà il modo in cui la mia pagina esegue il rendering o influirà sulla SEO?

Il rendering è invariato perché solo gli spazi bianchi che il browser ignora già viene compresso e i commenti sono comunque invisibili agli utenti. Per SEO l'effetto è da folle a positivo: i motori di ricerca analizzano il codice HTML minimizzato in modo identico e i segnali di consegna dei feed di documenti più veloci come LCP. I dati strutturati in si trovano all'interno di un tag script, quindi vengono conservati esattamente.

Il mio html è stato caricato da qualche parte?

no Sia Minify che Beautify vengono eseguiti interamente nel tuo browser: non viene effettuata alcuna richiesta di rete con il markup, non viene registrato o memorizzato e lo strumento funziona offline una volta caricato. Puoi incollare pagine di prodotti inedite o lavori del cliente senza problemi di gestione dei dati.

Minifier e abbellimento HTML

Minimizza il markup HTML per caricare le pagine più veloci o abbellirlo per una fonte leggibile e rientrata

Indent:

Minify optionsRemove commentsCollapse whitespaceKeep conditional comments

Input HTML

Output

Output will appear here...

Che cos'è il minifier e l'abbellimento HTML?

HTML Minifier & Beautifier comprime i documenti HTML rimuovendo i commenti e collassando gli spazi bianchi che i tuoi modelli ed editor si lasciano alle spalle: il rientro, le righe vuote e gli spazi finali che i browser ignorano ma ogni visitatore continua a scaricare. Il documento HTML è la prima risorsa in ogni caricamento di pagina; nulla viene visualizzato fino all'arrivo, quindi i byte ritagliati qui spostano la prima pittura contenta e il tempo per le prime metriche adiacenti al byte più direttamente di quasi tutte le altre risorse. Le pagine renderizzate e l'output del modello per il server permettono di regolare il 10-25% delle loro dimensioni.

Il dettaglio critico nella minimizzazione HTML è sapere cosa non toccare. Questo strumento maschera i contenuti di <pre>, <textarea>, <script> e <style> prima di fare qualsiasi altra cosa e li ripristina in seguito byte per byte, quindi gli esempi di codice mantengono le loro interruzioni di riga, le impostazioni predefinite di TextArea mantengono la loro formattazione e JavaScript in linea e CSS non vengono mai riscritti. I valori degli attributi citati vengono conservati esattamente e i commenti condizionali di IE possono essere conservati anche mentre i commenti ordinari vengono rimossi: la stessa disciplina si applica a un minifier del tempo di costruzione come HTML-Minifier-Terser.

L'abbellimento fa il contrario: prende il markup minimizzato o disordinato e lo reindenta con una struttura sensibile al nidificazione, mantenendo elementi in linea come <span>, <a> e <strong> che scorre con il testo circostante invece di esplodere ogni tag sulla propria linea. Tutto funziona al 100% dal lato client nel tuo browser: il tuo markup non viene mai caricato o registrato, quindi le pagine raschiate, le esportazioni CMS e i modelli proprietari sono tutti sicuri da incollare e lo strumento continua a funzionare offline.

Gli spazi bianchi in HTML non sono sempre insignificanti, motivo per cui pre, textarea, script e stile vengono lasciati esattamente come sono. Il collasso di uno spazio all'interno di un preblocco cambia ciò che vede il lettore e il collasso di uno all'interno di uno script può cambiare ciò che fa lo script.

Come utilizzare il minifier e l'abbellimento HTML?

Incolla il tuo HTML
rilasciare un frammento, un modello di componente o un documento completo nell'area di input. Sia il markup formattato che quello già minimizzato sono accettati.
Imposta le tue opzioni
Per minimizzazione, attiva la rimozione dei commenti, il collasso degli spazi bianchi e la conservazione del commento condizionale. Per abbellire, scegli 2, 4 o 8 spazi per indentazione.
Fare clic su Minify o abbellire
Minify comprime il markup proteggendo <pre>, <textarea>, <script> e <style>. Beautify Reindentate i tag nidificati e mantiene leggibili gli elementi inline. Il badge di risparmio mostra le taglie esatte prima/dopo.
Copia o scarica
Copia il risultato negli appunti o scaricalo come file .html pronto per la distribuzione o ispezionarlo.

Caratteristiche principali

Blocchi di contenuti protetti
<pre>, <textarea>, <script> e <style> I contenuti vengono mascherati e ripristinati byte per byte - Gli esempi di codice e gli script in linea non vengono mai alterati
Minificazione configurabile
Interruttori indipendenti per la rimozione dei commenti, il collasso degli spazi bianchi e la conservazione dei commenti condizionali di IE
Ribaltamento sicuro per attributi
Gli spazi bianchi all'interno dei valori degli attributi citati vengono conservati esattamente, quindi il testo alternativo, gli attributi dei dati e JSON in linea sopravvivono intatti
Abbellitore sensibile alla struttura
Rientra gli elementi di blocco nidificati mantenendo i tag in linea come <span> e <a> che scorre con il loro testo; i tag void non hanno bisogno di coppia di chiusura

Frequently Asked Questions

La minimizzazione HTML rimuove le parti di un documento che un browser ignora durante il rendering - commenti, rientro, righe vuote e spazi finali - per ridurre il file senza modificare ciò che viene visualizzata dalla pagina. Poiché il documento HTML è la prima risorsa in ogni caricamento di pagina e nulla viene visualizzato fino all'arrivo, il taglio delle sue dimensioni aiuta a tempo per le prime metriche adiacenti al byte e la prima vernice contenta.