Minificatore HTML

Cos'è la Minificazione HTML?

La minificazione HTML è il processo di riduzione delle dimensioni di un documento HTML senza alterarne il rendering nel browser. Un minificatore HTML rimuove i caratteri presenti solo per la leggibilità degli sviluppatori: spazi tra i tag, commenti, tag di chiusura opzionali e valori di attributo ridondanti. L'output è funzionalmente identico alla sorgente ma più piccolo in byte, il che significa download più rapidi e un time-to-first-paint più veloce per gli utenti.

I browser analizzano l'HTML in un albero DOM e scartano la maggior parte degli spazi durante quel processo. Una sequenza di spazi e interruzioni di riga tra due tag div non ha alcun effetto visivo sulla pagina renderizzata. Anche i commenti vengono ignorati dal parser. La minificazione sfrutta queste regole, eliminando ciò che il parser avrebbe comunque scartato, in modo che non debba mai essere trasferito sulla rete.

Il risparmio ottenuto dalla minificazione HTML varia a seconda del documento. I template con molti commenti, le pagine con rendering lato server con indentazione profonda e l'output dei CMS con stili inline vedono spesso una riduzione del 15-30% delle dimensioni dalla sola minificazione. Per i documenti piccoli il risparmio assoluto è modesto, ma sui siti ad alto traffico anche pochi kilobyte per caricamento di pagina si accumulano in un reale risparmio di larghezza di banda su milioni di richieste.

Perché Usare Questo Minificatore HTML?

Incolla il tuo HTML e ottieni immediatamente l'output minificato. Nessuno strumento di build da installare, nessun file di configurazione, nessun account.

Casi d'Uso del Minificatore HTML

Cosa Rimuove la Minificazione HTML

Un minificatore HTML completo applica diverse trasformazioni oltre alla rimozione degli spazi. La tabella seguente elenca le tecniche più comuni, ordinate dalla più sicura (sempre senza perdita) alla più aggressiva (può causare problemi in casi limite se applicata indiscriminatamente).

Minificazione vs. Compressione Gzip

Gli sviluppatori a volte chiedono se la minificazione sia ancora necessaria quando il server applica già la compressione Gzip o Brotli. La risposta breve: sì, e funzionano meglio insieme.

La minificazione riduce l'input che Gzip elabora, quindi anche l'output compresso è più piccolo. Le linee guida PageSpeed di Google raccomandano di applicare entrambe. Su una pagina tipica, la minificazione risparmia il 15-25% delle dimensioni raw e Gzip comprime ulteriormente il risultato del 60-80%. Insieme, le dimensioni totali di trasferimento possono scendere al 10-20% del documento originale non minificato e non compresso.

Esempi di Codice

Di seguito sono riportati esempi funzionanti di minificazione HTML in quattro ambienti. Ogni esempio rimuove i commenti e comprime gli spazi.

import { minify } from 'html-minifier-terser'

const html = `
  <div class="card">
    <!-- user profile -->
    <p>  Hello, world!  </p>
  </div>
`

const result = await minify(html, {
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeEmptyAttributes: true,
})
// → '<div class="card"><p>Hello, world!</p></div>'

import htmlmin

html = """
<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>
"""

result = htmlmin.minify(html, remove_comments=True, remove_empty_space=True)
# → '<div class="card"><p>Hello, world!</p></div>'

package main

import (
    "fmt"
    "github.com/tdewolff/minify/v2"
    "github.com/tdewolff/minify/v2/html"
)

func main() {
    m := minify.New()
    m.AddFunc("text/html", html.Minify)

    input := `<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>`

    result, _ := m.String("text/html", input)
    fmt.Println(result)
    // → <div class=card><p>Hello, world!</div>
}

# Install globally
npm install -g html-minifier-terser

# Minify a file
html-minifier-terser --collapse-whitespace --remove-comments input.html -o output.html

# Pipe from stdin
cat index.html | html-minifier-terser --collapse-whitespace --remove-comments

# With all common optimizations
html-minifier-terser \
  --collapse-whitespace \
  --remove-comments \
  --remove-redundant-attributes \
  --remove-empty-attributes \
  --minify-css true \
  --minify-js true \
  input.html -o output.min.html

Domande Frequenti