HTML Minifier

Co je minifikace HTML?

Minifikace HTML je proces zmenšení velikosti HTML dokumentu bez změny způsobu, jakým ho prohlížeč vykresluje. HTML minifier odstraňuje znaky, které slouží pouze pro čitelnost kódu vývojářem: mezery mezi tagy, komentáře, nepovinné uzavírací tagy a nadbytečné hodnoty atributů. Výstup je funkčně identický se zdrojovým kódem, ale menší v bajtech, což znamená rychlejší stahování a kratší dobu do prvního vykreslení stránky.

Prohlížeče parsují HTML do stromové struktury DOM a při tomto procesu zahazují většinu mezer. Sekvence mezer a zalomení řádků mezi dvěma tagy div nemá žádný vizuální vliv na vykreslenou stránku. Komentáře jsou parserem také ignorovány. Minifikace využívá těchto pravidel a odstraňuje vše, co by parser stejně zahodil, takže tato data vůbec nemusí být přenášena po síti.

Úspora z minifikace HTML se liší podle dokumentu. Silně komentované šablony, stránky generované serverem s hlubokým odsazením a výstup CMS s vloženými styly dosahují při samotné minifikaci často 15–30% zmenšení velikosti. U malých dokumentů jsou absolutní úspory skromné, ale na stránkách s vysokou návštěvností se i několik kilobajtů na načtení stránky sčítá na reálné úspory šířky pásma při milionech požadavků.

Proč používat tento HTML Minifier?

Vložte své HTML a okamžitě získejte minifikovaný výstup. Žádné nástroje k instalaci, žádné konfigurační soubory, žádné účty.

Případy použití HTML Minifieru

Co minifikace HTML odstraňuje

Plně vybavený HTML minifier provádí několik transformací nad rámec pouhého odstraňování mezer. Níže uvedená tabulka uvádí nejběžnější techniky, seřazené od nejbezpečnější (vždy bezztrátová) po nejagresivnější (může narušit okrajové případy při slepé aplikaci).

Minifikace vs. komprese Gzip

Vývojáři se někdy ptají, zda je minifikace stále potřebná, když server již používá kompresi Gzip nebo Brotli. Krátká odpověď: ano, a společně fungují nejlépe.

Minifikace zmenšuje vstup, který Gzip zpracovává, takže komprimovaný výstup je také menší. Pokyny Google PageSpeed doporučují použít obojí. Na typické stránce minifikace ušetří 15–25 % nezpracované velikosti a Gzip výsledek zkomprimuje o dalších 60–80 %. Celkově může celková velikost přenosu klesnout na 10–20 % původního neminifikovaného a nekomprimovaného dokumentu.

Příklady kódu

Níže jsou funkční příklady minifikace HTML ve čtyřech prostředích. Každý příklad odstraňuje komentáře a slučuje mezery.

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

Často kladené otázky