Minifikator HTML

Co to jest minifikacja HTML?

Minifikacja HTML to proces zmniejszania rozmiaru dokumentu HTML bez zmiany sposobu jego renderowania przez przeglądarkę. Minifikator HTML usuwa znaki służące wyłącznie czytelności kodu przez programistów: białe znaki między tagami, komentarze, opcjonalne tagi zamykające oraz nadmiarowe wartości atrybutów. Wynik jest funkcjonalnie identyczny ze źródłem, ale mniejszy pod względem bajtów, co oznacza szybsze pobieranie i krótszy czas pierwszego renderowania strony dla użytkowników.

Przeglądarki przetwarzają HTML do drzewa DOM i odrzucają większość białych znaków podczas tego procesu. Ciąg spacji i podziałów linii między dwoma tagami div nie ma żadnego wizualnego wpływu na wyrenderowaną stronę. Komentarze są również ignorowane przez parser. Minifikacja wykorzystuje te reguły, usuwając to, co parser i tak by odrzucił, dzięki czemu nie musi być w ogóle przesyłane przez sieć.

Oszczędności wynikające z minifikacji HTML różnią się w zależności od dokumentu. Szablony z dużą liczbą komentarzy, strony renderowane po stronie serwera z głębokim wcięciem kodu oraz dane wyjściowe systemów CMS z osadzonymi stylami często zyskują 15–30% redukcji rozmiaru dzięki samej minifikacji. W przypadku małych dokumentów bezwzględne oszczędności są skromne, ale na stronach o dużym ruchu nawet kilka kilobajtów na żądanie przekłada się na realne oszczędności przepustowości przy milionach zapytań.

Dlaczego warto użyć tego minifikatora HTML?

Wklej HTML i natychmiast otrzymaj zminifikowany wynik. Żadnych narzędzi do instalowania, plików konfiguracyjnych ani rejestracji konta.

Przypadki użycia minifikatora HTML

Co usuwa minifikacja HTML

Pełnofunkcjonalny minifikator HTML stosuje kilka przekształceń wykraczających poza samo usuwanie białych znaków. Poniższa tabela przedstawia najczęstsze techniki, uszeregowane od najbezpieczniejszych (zawsze bezstratnych) do najbardziej agresywnych (mogących powodować błędy w skrajnych przypadkach, jeśli stosowane ślepo).

Minifikacja a kompresja Gzip

Programiści czasem pytają, czy minifikacja jest nadal konieczna, skoro serwer stosuje już kompresję Gzip lub Brotli. Krótka odpowiedź: tak, i działają najlepiej razem.

Minifikacja zmniejsza dane wejściowe przetwarzane przez Gzip, więc skompresowany wynik jest też mniejszy. Wytyczne Google PageSpeed zalecają stosowanie obu metod. Na typowej stronie minifikacja oszczędza 15–25% surowego rozmiaru, a Gzip kompresuje wynik o kolejne 60–80%. Łącznie całkowity rozmiar transferu może spaść do 10–20% oryginalnego, niezminifikowanego i nieskompresowanego dokumentu.

Przykłady kodu

Poniżej znajdują się działające przykłady minifikacji HTML w czterech środowiskach. Każdy przykład usuwa komentarze i zwija białe znaki.

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

Często zadawane pytania