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

Это удаление из CSS, JS и HTML всего, что не влияет на работу: лишних пробелов, переносов строк, комментариев, иногда сокращение имён переменных. Для браузера код работает так же, но весит меньше, поэтому страница грузится быстрее. Для человека минифицированный код становится нечитаемым.

Зачем минифицировать, если есть gzip?

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

Как минифицировать CSS и JS?

Проще всего — сборщиком (build-процесс минифицирует при сборке) или плагином оптимизации на CMS (WordPress, Битрикс и др.) без правки кода. Для статичного сайта можно прогнать файлы через онлайн-минификатор и залить результат. Главное — минифицировать копию, а читаемый исходник хранить отдельно.

Может ли минификация сломать сайт?

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

Нужно ли минифицировать HTML?

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

Минификация CSS, JS и HTML

Q: Как отлаживать минифицированный код?

С помощью source maps — это отдельный файл, который связывает минифицированный код с исходным. Браузер в инструментах разработчика показывает читаемый код, хотя на сервере лежит сжатый. Сборщики генерируют source maps автоматически; обычным посетителям их не отдают, но подключают при отладке.

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

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

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

До — 142 символа

.button {
  color: #ffffff;
  background: #2d7ff9;
  /* основная кнопка */
  padding: 10px 20px;
}

После — 78 символов

.button{color:#fff;background:#2d7ff9;padding:10px 20px}

На одном правиле экономия скромная, но в реальном файле стилей или скриптов на тысячи строк она складывается в десятки процентов веса.

Минификация и gzip — это разное

Частый вопрос: зачем минифицировать, если есть сжатие gzip? Это два разных приёма, и они складываются. Минификация убирает лишнее из самого файла (его меньше и в исходнике), а gzip сжимает при передаче по сети и распаковывается у пользователя. Минифицированный файл к тому же сжимается gzip чуть эффективнее. Поэтому делают и то, и другое.

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

Как минифицировать

Сборщики и инструменты разработки. Если сайт собирается через build-процесс, минификация обычно включается одной настройкой и применяется автоматически при сборке.
Плагины CMS. На WordPress, Битрикс и других движках минификацию CSS/JS включают плагины оптимизации — без правки кода.
Онлайн-минификаторы. Для статичного сайта можно прогнать файлы через онлайн-сервис вручную и залить результат.

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

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

Проверьте, что ничего не сломалось. Изредка агрессивная минификация JS задевает хитрый код — после включения пройдитесь по основным функциям сайта.
Не минифицируйте дважды. Если плагин уже минифицирует, не нужно второй надстройки поверх — это лишняя нагрузка и риск конфликтов.
HTML тоже можно, но выигрыш от минификации HTML обычно меньше, чем от CSS и JS, — начните с них.

⚡

Минификация — часть базовой оптимизации скорости вместе с сжатием, кэшированием и ленивой загрузкой картинок. Как это влияет на метрики — в статье Core Web Vitals.

Что именно вырезает минификатор

Полезно понимать, что происходит с кодом. Из CSS и JS убираются все необязательные пробелы, отступы и переносы строк — браузеру они безразличны. Удаляются комментарии, которые писались для разработчиков. В JS дополнительно сокращаются имена локальных переменных: длинное userAccountBalance превращается в одну букву, ведь снаружи это имя всё равно не видно. Продвинутые сборщики идут дальше и вырезают «мёртвый код» — функции, которые нигде не используются (это называют tree-shaking). В сумме файл худеет, а работает в точности так же.

Source maps: как отлаживать минифицированный код

Резонный вопрос: если код на сайте нечитаем, как искать в нём ошибки? Для этого есть source maps — карты соответствия. Это отдельный файл, который связывает минифицированный код с исходным: браузер в инструментах разработчика показывает вам нормальный, читаемый код, хотя на сервере лежит сжатый. Сборщики генерируют source maps автоматически. Обычным посетителям их не отдают, чтобы не раскрывать исходники, но подключают при отладке. Так вы получаете и лёгкие файлы для пользователей, и удобную отладку для себя.

Объединение файлов и HTTP/2

Раньше к минификации часто добавляли склейку: десять CSS-файлов объединяли в один, чтобы браузер делал один запрос вместо десяти. На старом протоколе HTTP/1.1 это заметно ускоряло загрузку. С приходом HTTP/2 и HTTP/3 необходимость отпала: новые протоколы умеют грузить много файлов параллельно по одному соединению, и склейка почти не даёт выигрыша, а иногда мешает кэшированию — поменяли один файл, и пользователь перекачивает всю склейку. Так что сегодня минификация важна по-прежнему, а вот агрессивное объединение — уже на ваше усмотрение и зависит от протокола.

Когда осторожнее

Минификация почти всегда безопасна, но пара моментов требует внимания. Не минифицируйте то, что уже минифицировано: подключаемые библиотеки часто поставляются в .min-версии, повторная обработка ничего не даст, только рискует сломать. Не включайте две минификации сразу — например, плагин CMS и настройку сборщика поверх него; выберите что-то одно. И после включения минификации JS обязательно прокликайте основные функции сайта: изредка агрессивные настройки задевают нестандартный код. Если что-то сломалось — отключите сокращение имён переменных, это самая «рискованная» часть.

Коротко

Минификация убирает из CSS, JS и HTML лишние пробелы, переносы и комментарии — код становится легче, а сайт грузится быстрее. Это не замена gzip, а дополнение: минификация облегчает сам файл, сжатие — его передачу, и вместе они работают лучше. Включается сборщиком или плагином CMS, для статики подойдёт онлайн-минификатор. Главное — хранить читаемый исходник отдельно и проверить, что после минификации JS ничего не сломалось.