Что делает минификация
Минификация удаляет из кода всё, что нужно человеку, но не нужно браузеру: пробелы, переносы строк, комментарии. Для JavaScript дополнительно сокращаются имена локальных переменных. Поведение кода не меняется, а размер файла уменьшается.
/* до */
.button {
color: #ffffff;
background: #0a58ca;
}
/* после */
.button{color:#fff;background:#0a58ca}От исходного кода до пользователя
Минификация и сжатие — не одно и то же
| Приём | Что делает | Где выполняется |
|---|---|---|
| Минификация | Удаляет лишнее из самого кода | На этапе сборки проекта |
| Сжатие ответов | Упаковывает файл перед отправкой | На сервере, см. сжатие и скорость обхода |
| Удаление неиспользуемого кода | Убирает функции и стили, которые нигде не применяются | Сборка и аудит кода |
Приёмы дополняют друг друга: сначала минификация, затем сжатие на сервере — результаты складываются.
Как включить
- В современных сборщиках минификация включена для рабочей версии по умолчанию.
- В CMS используйте встроенные настройки или проверенные плагины оптимизации ресурсов.
- Для готовых файлов существуют онлайн- и консольные минификаторы.
- Сохраняйте карты исходного кода, чтобы отладка не превращалась в мучение.
Что ещё уменьшает вес и ускоряет
- Удаляйте неиспользуемые стили и скрипты, оставшиеся от прежних решений.
- Разделяйте код на части и подгружайте лишь то, что нужно странице.
- Подключайте второстепенные скрипты с отложенной или асинхронной загрузкой, чтобы они не блокировали показ страницы.
- Проверяйте, какие сторонние библиотеки подключены: часто они весят больше собственного кода.
Как проверить результат
Откройте вкладку сети в инструментах разработчика и посмотрите размеры файлов: передаваемый размер должен быть заметно меньше исходного. Запустите анализ страницы — он подскажет, остались ли неминифицированные ресурсы. Влияние размера скриптов на отзывчивость разобрано в статье про INP.
Важно: не минифицируйте вручную и без резервной копии исходников. Хранить нужно читаемую версию, а минифицированную создавать при сборке автоматически.
Что подлежит минификации
| Ресурс | Минифицировать | Замечание |
|---|---|---|
| CSS | Да | Удаляются пробелы, комментарии, сокращаются значения |
| JavaScript | Да | Дополнительно сокращаются имена переменных |
| HTML | По желанию | Выигрыш обычно меньше, чем для скриптов и стилей |
| JSON и SVG | Да | Помогает для больших файлов данных и графики |
Типичные ошибки
- Минификация без проверки: после неё скрипт может работать иначе из-за нестандартного кода.
- Подключение и минифицированного, и исходного файла одновременно.
- Отсутствие версий в имени файла: после обновления пользователи видят устаревшую копию из кеша.
Частые вопросы
Что убирает минификация?
Пробелы, переносы строк и комментарии, а для JavaScript ещё и сокращает имена локальных переменных, не меняя поведение кода.
Чем минификация отличается от сжатия gzip или brotli?
Минификация уменьшает сам код на этапе сборки, а сжатие упаковывает файл перед отправкой на сервере; их результаты складываются.
Как хранить код при использовании минификации?
Хранить читаемые исходники, а минифицированную версию создавать автоматически при сборке.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.