Минификатор CSS онлайн
Удаление пробелов, переносов и комментариев из файлов стилей CSS и скриптов JavaScript с наглядной оценкой экономии.
Оптимизация и сжатие стилей CSS и скриптов JavaScript с удалением избыточных пробелов, комментариев и форматирования. Инструмент сокращает вес веб-ресурсов до 40%, рассчитывает точный процент экономии байт и ускоряет показатели Core Web Vitals (LCP и FCP) вашего сайта.
Как пользоваться
Выбор языка (CSS или JavaScript)
Переключите тумблер в верхней панели на нужный тип исходного кода.
Вставка исходного кода
Скопируйте стили или функции со всеми отступами и комментариями в поле ввода.
Мгновенная оптимизация
Скрипт сожмёт пробелы, уберёт комментарии, нули с единицами измерения и отобразит объём сэкономленных байт.
Копирование сжатого результата
Заберите компактный однострочный код для размещения на боевом веб-сервере.
Формулы, правила и стандарты
Удаление комментариев: code.replace(/\/\*[\s\S]*?\*\//g, '') и однострочных //.
Нормализация пробельных разделителей: удаление пробелов вокруг знаков {}:;,>+~=().
Удаление завершающей точки с запятой перед скобкой: replace(/;}/g, '}').
Оптимизация нулевых величин: замена 0px, 0em, 0rem, 0% на чистый 0.
Сжатие 6-значных HEX-цветов: замена дублирующихся пар #ffffff -> #fff.
Практические примеры
Пример 1: Сжатие CSS-стилей блока навигации
Удаление пробелов, оптимизация нулей и цветов:
/* Стили навигации */
.nav-container {
display: flex;
justify-content: space-between;
padding: 0px 20px;
margin: 0px;
background-color: #ffffff;
}
.nav-container > .nav-item {
color: #000000;
}
Минифицированный CSS (140 байт, экономия 39.7%):
.nav-container{display:flex;justify-content:space-between;padding:0 20px;margin:0;background-color:#fff}.nav-container>.nav-item{color:#000}
Пример 2: Минификация вспомогательной функции JavaScript
Удаление комментариев и лишних пробелов в коде скрипта:
// Инициализация калькулятора
function add(a, b) {
/* Суммируем два числа */
var sum = a + b;
return sum;
}
Минифицированный JS (42 байта, экономия 73.9%):
function add(a,b){var sum=a+b;return sum;}
Частые ошибки и нюансы
Сохранение пробелов внутри строковых литералов
Минификатор корректно анализирует кавычки и не удаляет пробелы внутри значений content: " " или строковых переменных скрипта.
Удаление единиц измерения только у нуля
Сжатие заменяет 0px на 0, однако величины больше нуля (например, 10px) сохраняют единицы измерения, так как браузеры игнорируют числа без размерности.
Автоматическая вставка точек с запятой в JS
При минификации JavaScript важно сохранять точки с запятой, иначе объединение строк может вызвать сбой синтаксического анализатора движка браузера (ASI).
Отличие минификации от сжатия Gzip/Brotli
Минификация изменяет исходный текст файла, удаляя ненужные символы навсегда. Gzip/Brotli — это транспортное сжатие потока байт веб-сервером. Они должны использоваться вместе.
Частые вопросы (FAQ)
Минификация напрямую сокращает объём передаваемого исходного кода на 20–40%. Это ускоряет синтаксический парсинг CSSOM и DOM-дерева браузером, сокращает время блокировки основного потока рендеринга и улучшает критические показатели Largest Contentful Paint (LCP) и First Contentful Paint (FCP).
Минификация выполняется один раз на этапе сборки и очищает код от символов, не нужных компьютеру (комментарии, пробелы, переводы строк). Gzip и Brotli — это алгоритмы сжатия данных на стороне Nginx/Apache перед отправкой в сеть. Наилучшая скорость достигается при сжатии уже минифицированных файлов.
Нет, если исходный код был написан с соблюдением стандартов JavaScript и обязательной расстановкой точек с запятой. Алгоритм Utilora бережно очищает комментарии и пробелы вокруг операторов, не изменяя структуры переменных и логических выражений.
Спецификация CSS W3C прямо определяет, что нулевая длина равна нулю в любых относительных и абсолютных единицах измерения (0px = 0em = 0rem = 0%). Браузеры однозначно интерпретируют число 0 без размерности во всех геометрических свойствах (margin, padding, border).
Да, инструмент работает полностью на стороне клиента. Ваш CSS и JavaScript код обрабатывается исключительно регулярными выражениями JavaScript в оперативной памяти вкладки и никогда не пересылается на серверы Utilora.
Для обратного форматирования сжатого кода используются инструменты Pretty Print (Beautifier). В инструментах разработчика браузера (F12 -> вкладка Sources) достаточно нажать иконку фигурных скобок {}, чтобы браузер автоматически расставил отступы.
Похожие инструменты
JSON Formatter
Форматирование с отступами в 2 или 4 пробела, сжатие и перевод JSON в одну строку (Minify), валидация синтаксиса.
Открыть ▸Markdown to HTML
Мгновенное преобразование разметки Markdown в чистый HTML с интерактивным живым превью и подсчётом статистики.
Открыть ▸Color Picker (HEX / RGB / HSL)
Визуальный выбор цвета, мгновенная конвертация между HEX, RGB и HSL, проверка читаемости текста (WCAG) и готовая палитра.
Открыть ▸Сравнение текстов (Diff)
Построчное и пословное сравнение двух версий текста или кода с наглядной подсветкой добавленных и удалённых фрагментов.
Открыть ▸Руководства по теме
Минификация CSS и JavaScript: как работает и зачем нужна
Минификация — процесс удаления из исходного кода всех символов, не влияющих на его выполнение: пробелов, переносов строк, отступов и комментариев. Для JavaScript минификаторы также переименовывают локальные переменные в однобуквенные идентификаторы. В результате размер файлов уменьшается на 20–60%, что напрямую ускоряет загрузку страницы.
Читать руководствоКак сжать изображение без потери качества: форматы, параметры и реальные тесты
Тяжёлая графика отвечает более чем за 60% общего веса веб-страницы. В этом руководстве разбираем практическую механику компрессии: почему показатель качества 80–82% является точкой перегиба на графике SSIM, как избежать размытия красного цвета из-за субдискретизации и ускорить Largest Contentful Paint (LCP) до целевых показателей Google Core Web Vitals.
Читать руководствоЧто такое JSON и как правильно его форматировать и валидировать
JSON (JavaScript Object Notation) стал общепринятым стандартом обмена данными в веб-сервисах, микросервисах и REST API. Однако простота формата обманчива: в статье разбираем неочевидные тонкости стандарта RFC 8259, фатальную потерю точности 64-битных чисел в JavaScript и правила безопасной обработки полезной нагрузки.
Читать руководствоФорматирование HTML и XML: правила и валидация
Фундаментальное техническое руководство по форматированию, чистоте синтаксиса и W3C-валидации документов HTML5 и XML. Разбираем стандарты отступов (2 пробела vs табы), иерархию вложенности блочных и строчных элементов в DOM-дереве, самозакрывающиеся теги, экранирование HTML-сущностей для защиты от XSS и настройку автоматических линтеров.
Читать руководство