HTML Minifier

Vad är HTML-minifiering?

HTML-minifiering är processen att minska storleken på ett HTML-dokument utan att ändra hur webbläsaren renderar det. En HTML-minifierare tar bort tecken som bara finns till för utvecklarens läsbarhet: blanksteg mellan taggar, kommentarer, valfria sluttaggar och redundanta attributvärden. Resultatet är funktionellt identiskt med källkoden men mindre i bytestorlek, vilket innebär snabbare nedladdningar och kortare tid till first-paint för användarna.

Webbläsare tolkar HTML till ett DOM-träd och kasserar det mesta av blankstegen under den processen. En sekvens av mellanslag och radbrytningar mellan två div-taggar har ingen visuell effekt på den renderade sidan. Kommentarer ignoreras också av parsern. Minifiering utnyttjar dessa regler och tar bort det som parsern ändå skulle kasta bort, så att det aldrig behöver överföras via nätverket.

Besparingarna från HTML-minifiering varierar beroende på dokument. Tätt kommenterade mallar, serverrenderade sidor med djup indragning och CMS-utdata med inbundna stilar ser ofta en 15–30 % storleksminskning enbart från minifiering. För små dokument är de absoluta besparingarna blygsamma, men på sajter med hög trafik ger även ett par kilobyte per sidinläsning verkliga bandbreddsbesparingar över miljontals förfrågningar.

Varför använda den här HTML-minifieraren?

Klistra in din HTML och få minifierat resultat direkt. Inga byggverktyg att installera, inga konfigurationsfiler, inga konton.

Användningsfall för HTML Minifier

Vad HTML-minifiering tar bort

En fullständig HTML-minifierare tillämpar flera omvandlingar utöver borttagning av blanksteg. Tabellen nedan listar de vanligaste teknikerna, ordnade från säkraste (alltid förlustfria) till mest aggressiva (kan bryta kantfall om de tillämpas okritiskt).

Minifiering kontra Gzip-komprimering

Utvecklare frågar ibland om minifiering fortfarande är nödvändigt när servern redan tillämpar Gzip- eller Brotli-komprimering. Det korta svaret: ja, och de fungerar bäst tillsammans.

Minifiering minskar den indata som Gzip bearbetar, så det komprimerade resultatet blir också mindre. Googles PageSpeed-riktlinjer rekommenderar att tillämpa båda. På en typisk sida sparar minifiering 15–25 % av råstorleken och Gzip komprimerar resultatet med ytterligare 60–80 %. Tillsammans kan total överföringsstorlek sjunka till 10–20 % av det ursprungliga ominifierade, okomprimerade dokumentet.

Kodexempel

Nedan finns fungerande exempel på HTML-minifiering i fyra miljöer. Varje exempel tar bort kommentarer och minimerar blanksteg.

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

Vanliga frågor