Руководство по минификации кода — Оптимизация HTML, CSS, JS

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

Это руководство рассказывает, что минификация делает для каждого языка, чем отличается от сжатия и как интегрировать её в рабочий процесс. Вы также можете использовать наш Минификатор кода для быстрой минификации любого фрагмента без настройки инструментов сборки.

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

Минификация — это процесс удаления ненужных символов из исходного кода без изменения его функциональности:

Комментарии — полезны для разработчиков, невидимы для браузеров
Пробелы — пробелы, табуляции, переносы строк для читабельности
Избыточный синтаксис — необязательные точки с запятой, кавычки, закрывающие теги
Длинные идентификаторы — сокращение имён переменных и функций (только JavaScript)

Результат — меньшие файлы, более быстрая загрузка и более быстрый парсинг браузером.

Минификация vs Сжатие: Они работают вместе

Распространённое заблуждение — что минификация и сжатие (gzip/Brotli) взаимозаменяемы. Это не так — они дополняют друг друга.

Минификация удаляет избыточные символы на уровне исходного кода.

Сжатие (gzip, Brotli) применяет универсальный алгоритм сжатия к байтам, передаваемым по сети.

Почему нужны оба:

Оригинальный CSS:           28.4 КБ
Только минификация:         18.2 КБ  (на 36% меньше)
Только сжатие:               7.1 КБ  (на 75% меньше)
Минификация + Сжатие:        5.3 КБ  (на 81% меньше)

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

Минификация HTML

Минификация HTML — самая консервативная из трёх. Браузеры очень терпимы к HTML.

Что удаляется

Комментарии:

<!-- До -->
<!-- Секция навигации -->
<nav>
  <!-- Главное меню -->
  <ul>
    <li><a href="/">Главная</a></li>
  </ul>
</nav>

<!-- После -->
<nav><ul><li><a href="/">Главная</a></li></ul></nav>

Ненужные пробелы между тегами:

<!-- До -->
<div>
  <p>
    Привет мир
  </p>
</div>

<!-- После -->
<div><p>Привет мир</p></div>

Необязательные закрывающие теги:

<!-- До -->
<ul>
  <li>Элемент один</li>
  <li>Элемент два</li>
</ul>

<!-- После -->
<ul><li>Элемент один<li>Элемент два</ul>

Типичная экономия HTML

Минификация HTML обычно уменьшает размер файла на 10–25%. Попробуйте сами с нашим Минификатором кода.

Минификация CSS

CSS значительно выигрывает от минификации, потому что таблицы стилей обычно сильно комментированы и отформатированы с обильными пробелами.

Что удаляется

Комментарии и пробелы:

/* До */
/* Стили основной кнопки */
.btn-primary {
  background-color: #3b82f6;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
}

/* После */
.btn-primary{background-color:#3b82f6;color:#fff;padding:12px 24px;border-radius:8px;font-weight:600}

Преобразование в сокращённую запись:

/* До */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* После */
margin:10px 20px

Оптимизация цветов:

/* До */
color: #ffffff;
background: #aabbcc;

/* После */
color:#fff;background:#abc

Типичная экономия CSS

Минификация CSS обычно уменьшает размер файла на 20–40%.

Минификация JavaScript

Минификация JavaScript — самая агрессивная, потому что язык позволяет трансформации, выходящие за рамки простого удаления пробелов.

Что удаляется и трансформируется

Комментарии, пробелы и сокращение переменных:

// До
// Рассчитать общую стоимость с учётом налога
function calculateTotal(price, taxRate) {
  const tax = price * taxRate;
  return price + tax;
}

// После
function calculateTotal(n,t){const a=n*t;return n+a}

Минификатор также сократил имена переменных: price стал n, taxRate стал t, а tax стал a. Это называется манглинг (mangling).

Удаление мёртвого кода:

// До
function processData(data) {
  if (false) {
    console.log('Это никогда не выполнится');
  }
  return data.map(item => item.value);
}

// После
function processData(d){return d.map(i=>i.value)}

Типичная экономия JavaScript

Минификация JavaScript обычно уменьшает размер файла на 30–60%.

Сводка по экономии

Язык	Типичное снижение	Основной источник экономии
HTML	10–25%	Пробелы, комментарии
CSS	20–40%	Комментарии, сокращения, цвета
JavaScript	30–60%	Манглинг переменных, мёртвый код

Когда НЕ минифицировать

Во время разработки

Минифицированный код почти невозможно читать. Оставляйте сборки для разработки без минификации.

Библиотеки с открытым кодом

Распространяйте неминифицированный исходный код. Позвольте потребителям минифицировать в рамках их собственной сборки.

Очень маленькие файлы

Встроенный скрипт на 200 байт не нуждается в минификации. Сосредоточьте усилия на файлах более 1 КБ.

Source Maps: Сохранение возможности отладки минифицированного кода

Source maps связывают минифицированный продакшен-код с вашим оригинальным исходным кодом.

//# sourceMappingURL=app.min.js.map

Лучшие практики для source maps:

Генерируйте source maps в пайплайне сборки, но не раздавайте их публично в продакшене
Загружайте source maps в сервис отслеживания ошибок (Sentry, Bugsnag)
Используйте опцию hidden source map в webpack/Vite

Интеграция в пайплайн сборки

webpack

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
  },
};

Vite

export default {
  build: {
    minify: 'esbuild',
    cssMinify: true,
  },
};

esbuild

esbuild app.js --bundle --minify --outfile=app.min.js

Rollup

import terser from '@rollup/plugin-terser';
export default { plugins: [terser()] };

Быстрая минификация без инструмента сборки

Не для каждой задачи нужен полный пайплайн сборки. Для разовых задач наш Минификатор кода обрабатывает HTML, CSS и JavaScript в браузере — без установки, без настройки, данные не отправляются на сервер.

Для форматов данных мы также предлагаем Минификатор JSON и Минификатор YAML.

Чек-лист минификации

Все CSS и JS файлы минифицированы
Source maps сгенерированы
HTML минифицирован
Сжатие включено — проверьте Content-Encoding: gzip или br
Сборки для разработки не минифицированы
Console.log удалены
Нет двойной минификации

Связанные ресурсы

Оптимизация изображений для веба — уменьшите главный фактор веса страницы
Руководство по минификации YAML — техники сжатия файлов конфигурации
Чек-лист инструментов веб-разработчика — необходимые инструменты для каждого рабочего процесса

Начните минифицировать

Минификация — это оптимизация с низкими затратами и высокой отдачей.

Открыть Минификатор кода → — вставьте HTML, CSS или JavaScript и получите оптимизированный результат мгновенно. Без регистрации, без установки, полностью конфиденциально.