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

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

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

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

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

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

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

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

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

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

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

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

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

Коротко

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