HTML Minifier

Wat is HTML-minificatie?

HTML-minificatie is het proces waarbij de bestandsgrootte van een HTML-document wordt verkleind zonder de weergave in de browser te veranderen. Een HTML-minifier verwijdert tekens die alleen voor de leesbaarheid van de ontwikkelaar bestaan: spaties tussen tags, commentaar, optionele sluitingstags en overbodige attribuutwaarden. Het resultaat is functioneel identiek aan de broncode maar kleiner in bytes, wat zorgt voor snellere downloads en een kortere tijd tot eerste weergave voor gebruikers.

Browsers parseren HTML naar een DOM-boom en verwijderen de meeste spaties tijdens dat proces. Een reeks spaties en regeleinden tussen twee div-tags heeft geen visueel effect op de weergegeven pagina. Commentaar wordt ook genegeerd door de parser. Minificatie maakt gebruik van deze regels en verwijdert wat de parser toch zou weggooien, zodat het nooit over het netwerk hoeft te worden verstuurd.

De besparing door HTML-minificatie verschilt per document. Zwaar becommentarieerde sjablonen, server-rendered pagina's met diepe inspringing en CMS-uitvoer met inline stijlen zien vaak een groottereductie van 15 tot 30% door minificatie alleen. Voor kleine documenten zijn de absolute besparingen bescheiden, maar op drukbezochte websites tellen zelfs enkele kilobytes per paginalading op tot echte bandbreedtebesparingen over miljoenen verzoeken.

Waarom deze HTML Minifier gebruiken?

Plak uw HTML en ontvang direct geminimaliseerde uitvoer. Geen buildtools te installeren, geen configuratiebestanden, geen accounts.

Toepassingen van HTML Minifier

Wat HTML-minificatie verwijdert

Een volwaardige HTML-minifier past meerdere transformaties toe naast het verwijderen van spaties. De onderstaande tabel geeft de meest voorkomende technieken weer, geordend van veiligst (altijd verliesvrij) tot meest agressief (kan edge cases breken als blindelings toegepast).

Minificatie versus Gzip-compressie

Ontwikkelaars vragen soms of minificatie nog nodig is als de server al Gzip- of Brotli-compressie toepast. Het korte antwoord: ja, en ze werken het best samen.

Minificatie verkleint de invoer die Gzip verwerkt, zodat de gecomprimeerde uitvoer ook kleiner is. De PageSpeed-richtlijnen van Google raden aan beide toe te passen. Op een gemiddelde pagina bespaart minificatie 15-25% van de ruwe grootte en comprimeert Gzip het resultaat met nog eens 60-80%. Gecombineerd kan de totale overdrachtsgrootte dalen tot 10-20% van het originele, niet-geminimaliseerde, ongecomprimeerde document.

Codevoorbeelden

Hieronder staan werkende voorbeelden van HTML-minificatie in vier omgevingen. Elk voorbeeld verwijdert commentaar en voegt spaties samen.

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

Veelgestelde vragen