HTML Minifier

Что такое минификация HTML?

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

Браузеры разбирают HTML в дерево DOM и в этом процессе отбрасывают большую часть пробельных символов. Последовательность пробелов и переносов строк между двумя тегами div не оказывает никакого визуального эффекта на отрендеренную страницу. Комментарии также игнорируются парсером. Минификация использует эти правила, убирая то, что парсер всё равно отбросил бы, — чтобы эти данные не нужно было передавать по сети.

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

Зачем использовать этот HTML Minifier?

Вставьте HTML и мгновенно получите минифицированный результат. Никаких инструментов сборки для установки, никаких конфигурационных файлов, никаких аккаунтов.

Сценарии использования HTML Minifier

Что удаляет минификация HTML

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

Минификация vs. сжатие 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

Часто задаваемые вопросы