HTML Minifier

Що таке мінімізація HTML?

Мінімізація HTML — це процес зменшення розміру HTML-документа без зміни того, як браузер його відображає. HTML-мінімізатор видаляє символи, які існують виключно для зручності розробника: пробіли між тегами, коментарі, необов'язкові закриваючі теги та надлишкові значення атрибутів. Результат функціонально ідентичний вихідному коду, але менший за розміром у байтах, що означає швидше завантаження та менший час до першого відображення для користувачів.

Браузери розбирають HTML у DOM-дерево та відкидають більшість пробілів під час цього процесу. Послідовність пробілів і переносів рядків між двома тегами div не має жодного візуального ефекту на відображену сторінку. Коментарі також ігноруються парсером. Мінімізація використовує ці правила, видаляючи те, що парсер і так відкинув би, щоб це ніколи не довелось передавати по мережі.

Економія від мінімізації HTML залежить від документа. Шаблони з великою кількістю коментарів, серверно-рендерені сторінки з глибокими відступами та виведення CMS із вбудованими стилями часто дають зменшення розміру на 15–30% лише від мінімізації. Для невеликих документів абсолютна економія скромна, але на сайтах із високим трафіком навіть кілька кілобайт на завантаження сторінки перетворюються на реальну економію трафіку за мільйонів запитів.

Навіщо використовувати цей HTML Minifier?

Вставте свій HTML і отримайте мінімізований результат миттєво. Не потрібно встановлювати інструменти збирання, налаштовувати конфіги чи реєструватися.

Сфери застосування HTML Minifier

Що видаляє мінімізація HTML

Повнофункціональний HTML-мінімізатор застосовує кілька перетворень, що виходять за межі простого видалення пробілів. У таблиці нижче перераховані найпоширеніші методи — від найбезпечніших (завжди без втрат) до найагресивніших (можуть порушити роботу в окремих випадках).

Мінімізація проти стиснення Gzip

Розробники іноді запитують, чи потрібна мінімізація, якщо сервер уже застосовує Gzip або Brotli. Коротка відповідь: так, і разом вони працюють найкраще.

Мінімізація скорочує вхідні дані для Gzip, тому стиснений результат також менший. Рекомендації Google PageSpeed радять застосовувати обидва методи. На типовій сторінці мінімізація заощаджує 15–25% від вихідного розміру, а Gzip стискає результат ще на 60–80%. Разом загальний обсяг передачі може скоротитися до 10–20% від оригінального немінімізованого та нестисненого документа.

Приклади коду

Нижче наведено робочі приклади мінімізації HTML у чотирьох середовищах. Кожен приклад видаляє коментарі та згортає пробіли.

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

Часті запитання