HTML-мініфікатор

Вставте HTML, щоб видалити коментарі й зайві пробіли та мініфікувати вбудовані CSS і JavaScript. Вміст <pre> і <textarea> залишається точно таким, як написано.

Працює в браузеріБез реєстраціїНічого не завантажується

Мініфікований результат

Як користуватися: HTML-мініфікатор

  1. Вставте HTML-документ або фрагмент чи відкрийте файл .html.
  2. Виберіть, що видаляти: коментарі, пробіли, і чи потрібно мініфікувати вбудовані блоки <style> і <script>.
  3. Перевірте рядок попереджень: вбудований скрипт із синтаксичною помилкою залишається без змін, щоб не зламати сторінку.
  4. Скопіюйте мініфікований HTML або завантажте його.

Що видаляється?

  • Коментарі: <!-- … --> видаляються, крім умовних коментарів Internet Explorer і коментарів, що починаються з <!--!.
  • Пробіли між блоковими елементами: переведення рядків і відступи між тегами на кшталт <div>, <li> або <head> ніколи не відображаються, тому видаляються повністю.
  • Серії пробілів у тексті: стискаються до одного пробілу — саме так їх однаково відображає браузер.
  • Пробіли всередині тегів: <p class = "a"> стає <p class="a">.

Що зберігається?

У деяких місцях пробіли значущі, і мініфікатор це враховує. Вміст <pre> і <textarea> зберігається байт у байт. Одиночний пробіл між рядковими елементами, наприклад <b>bold</b> text, зберігається, бо без нього слова злилися б. Значення атрибутів і лапки ніколи не змінюються.

Вбудовані CSS і JavaScript

Вбудовані блоки <style> оптимізуються CSSO, а вбудовані <script> — Terser, тими самими рушіями, що й на сторінках CSS-мініфікатора та JavaScript-мініфікатора. JSON-LD та інші JSON-скрипти стискаються, а скрипти невідомих типів (наприклад, шаблони) не чіпаються.

Чи варто мініфікувати HTML?

Для сторінок із серверним рендерингом і статичних сайтів HTML-документ — перше, що завантажує браузер, тому кожен заощаджений байт пришвидшує перше відмальовування. Економія 10–25% до стиснення — звична річ, а для шаблонів із великими відступами й сторінок із великими вбудованими скриптами — ще більша.

Поширені запитання

Чи змінить мініфікація HTML вигляд сторінки?
Ні. Видаляються лише пробіли, які браузер і так стиснув би, а вміст <pre>/<textarea> не чіпається. Якщо ви стилізуєте елементи через white-space: pre у CSS, вимкніть Стискати пробіли.
Чи мініфікує він вбудовані JavaScript і CSS?
Так, якщо ввімкнено відповідні опції. Якщо у вбудованому блоці є синтаксична помилка, він залишається без змін і показується попередження, тож сторінка ніколи не ламається.
Чи можна мініфікувати шаблони Handlebars, Jinja або Blade?
Зазвичай так, якщо шаблонні теги розташовані в тексті чи значеннях атрибутів. Шаблони, де логіка стоїть усередині імен тегів або між атрибутами, можуть потребувати ручної перевірки.
Чи надсилається мій HTML кудись?
Ні. Усе обробляється локально у вашому браузері.

Схожі інструменти

CSS-мініфікатор Стиснення таблиць стилів: короткі значення й об'єднання правил. JavaScript-мініфікатор Стиснення й обфускація імен JS через Terser зі статистикою розміру та gzip. Кодувальник HTML-сутностей Екранування спецсимволів HTML і декодування &сутностей;. URL: кодування / декодування Percent-кодування й декодування тексту, розбір рядка запиту URL.