Компрессор CSS-бандла

Загрузите или вставьте CSS-бандл и сразу увидите его минифицированный размер, точный GZIP-размер и оценочный Brotli-размер, а также готовые фрагменты конфигурации nginx и Apache для включения сжатия. Наш компрессор CSS-бандлов также показывает панель анализа с числом правил, селекторов и медиазапросов. Всё сжатие выполняется в вашем браузере. Без регистрации.

CSS Bundle Compressor

Upload or paste a CSS bundle and instantly see its minified size, GZIP size, and Brotli size - with ready-to-use nginx and Apache server configuration snippets. All compression runs locally in your browser. Your CSS never leaves your device.

CSS Bundle Input

1.45 KBUpload .css

/* Reset styles */
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

/* Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
  background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #111111;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0px auto;
  padding: 0px 16px;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: 0px solid transparent;
}

.btn-primary {
  background-color: #0099ff;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #0077cc;
}

.btn-secondary {
  background-color: #f0f0f0;
  color: #333333;
}

/* Cards */
.card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Media queries */
@media (max-width: 768px) {
  .container {
    padding: 0px 8px;
  }
  .flex {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .btn {
    width: 100%;
  }
}

Зачем использовать наш компрессор CSS-бандлов?

Мгновенное сжатие CSS-бандла: сжимайте любой CSS-бандл прямо в браузере — без загрузки на сервер и инструментов сборки. Наш компрессор CSS-бандлов минифицирует ваш CSS и вычисляет точный GZIP- и оценочный Brotli-размер в один клик.
Безопасный онлайн-компрессор CSS-бандлов: ваш CSS-бандл не покидает устройство при использовании этого компрессора CSS-бандлов. Обработка на 100 % на стороне клиента означает полную приватность: без облачного хранилища, серверных логов и раскрытия таблиц стилей.
Компрессор CSS-бандлов без установки: сжимайте CSS-бандлы прямо в браузере — без npm-пакетов, инструментов сборки и аккаунта. Этот бесплатный компрессор CSS-бандлов работает в любом современном браузере и любой ОС.
Фрагменты конфигурации сервера и анализ бандла: получайте готовые фрагменты конфигурации nginx и Apache для включения GZIP- и Brotli-сжатия. Плюс панель анализа с числом правил, селекторов, комментариев и медиазапросов.

Типичные сценарии использования компрессора CSS-бандлов

Оптимизация Core Web Vitals: используйте компрессор CSS-бандлов, чтобы уменьшить размер бандла перед развёртыванием. Меньшие CSS-бандлы сокращают время блокировки отрисовки и улучшают показатели LCP и FCP; фрагменты конфигурации упрощают включение GZIP на вашем CDN.
Контроль бюджета размера бандла: проверяйте с помощью компрессора CSS-бандлов, укладывается ли ваш CSS-бандл в бюджет производительности. Смотрите минифицированный, GZIP- и Brotli-размер в одном окне — те же цифры, что показывает ваш сборщик в продакшене.
Аудит CSS перед развёртыванием: прогоняйте CSS-бандл через компрессор CSS-бандлов перед каждым развёртыванием, чтобы вовремя замечать лишний код. Панель анализа показывает число правил, селекторов и комментариев — полезно для поиска неиспользуемого CSS.
Настройка CDN и сервера: получайте с помощью компрессора CSS-бандлов готовые фрагменты конфигурации nginx и Apache для включения GZIP- и Brotli-сжатия CSS-файлов. Копируйте и вставляйте прямо в конфигурацию сервера.
Отчёты о производительности для клиентов: используйте компрессор CSS-бандлов, чтобы получить данные о размере CSS для отчётов. Показывайте исходный, минифицированный, GZIP- и Brotli-размер, чтобы обосновать рекомендации по оптимизации CSS.
Оптимизация производительности на мобильных: используйте компрессор CSS-бандлов, чтобы оценить экономию CSS для мобильных пользователей. При 100 000 мобильных посетителей в день сокращение CSS-бандла с 50 КБ до 12 КБ с GZIP экономит 3,8 ГБ мобильного трафика в день.

Что такое сжатие CSS-бандла?

Сжатие CSS-бандла — это процесс уменьшения размера файла таблицы стилей CSS двумя взаимодополняющими методами: минификацией (удаление пробелов и комментариев и применение сокращённых записей) и транспортным сжатием (кодирование GZIP или Brotli, которое веб-сервер применяет перед отправкой файла в браузер). Наш компрессор CSS-бандлов применяет оба: он минифицирует CSS с помощью минификатора на чистом JS, а затем вычисляет точный GZIP-размер через нативный API CompressionStream браузера. Brotli-размер оценивается примерно на 18 % меньше GZIP на основе типичных коэффициентов сжатия Brotli для CSS.

Как работает наш компрессор CSS-бандлов

1 Загрузите или вставьте CSS-бандл: перетащите файл .css или вставьте CSS прямо в поле ввода. Компрессор CSS-бандлов принимает любой корректный CSS: бандлы фреймворков, стили компонентов, CSS для писем или собственные таблицы стилей.
2 Мгновенное сжатие в браузере: нажмите «Сжать бандл», и компрессор CSS-бандлов минифицирует ваш CSS, вычислит точный GZIP-размер через API CompressionStream браузера и оценит Brotli-размер. Никакие данные не отправляются на сервер.
3 Скачайте файл и настройте сервер: скачайте минифицированный CSS-файл и скопируйте готовый фрагмент конфигурации nginx или Apache, чтобы включить GZIP- и Brotli-сжатие для ваших CSS-файлов.

Что оптимизирует компрессор CSS-бандлов

Удаление комментариев: все комментарии CSS удаляются — в сборках для разработки они обычно занимают 5–15 % размера CSS-бандла.
Сжатие пробелов: все пробелы, переводы строк и отступы удаляются — они обычно занимают 20–40 % размера отформатированного CSS-бандла.
Сокращённые записи: шестнадцатеричные цвета нормализуются и сокращаются (#aabbcc → #abc), нулевые значения сокращаются (0px → 0), а font-weight сокращается (bold → 700, normal → 400).
Завершающие точки с запятой: последняя точка с запятой перед закрывающей скобкой удаляется — это допустимо по спецификации CSS и экономит один байт на правило.

Минификация и транспортное сжатие

Минификация уменьшает размер файла, хранящегося на диске и отдаваемого браузеру. Транспортное сжатие (GZIP/Brotli) сокращает число байтов, передаваемых по сети, — браузер распаковывает файл автоматически. Их следует применять вместе: сначала минифицируйте, затем включите GZIP или Brotli на сервере. Компрессор CSS-бандлов показывает все три размера, чтобы вы видели суммарный эффект. Типичный CSS-бандл проходит путь 100 КБ (исходный) → 70 КБ (минифицированный) → 15 КБ (GZIP) — общее сокращение на 85 %.

Часто задаваемые вопросы

Компрессор CSS-бандлов уменьшает размер файла таблицы стилей CSS с помощью минификации и показывает получившиеся GZIP- и Brotli-размеры для настройки сервера. Наш бесплатный компрессор CSS-бандлов работает полностью в вашем браузере.

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

Безусловно. Компрессор CSS-бандлов обрабатывает всё локально в вашем браузере. Ваш CSS-бандл никогда не загружается на сервер и не покидает устройство.

Да — 100 % бесплатно, навсегда. Без регистрации, без аккаунта, без платных тарифов, без ограничений размера и без рекламы.

GZIP-размеры точны — они вычисляются с помощью нативного API CompressionStream браузера. Brotli-размеры оцениваются примерно на 18 % меньше GZIP на основе типичных коэффициентов сжатия CSS.

В nginx добавьте «gzip on; gzip_types text/css;» в блок server. В Apache включите mod_deflate. Компрессор CSS-бандлов даёт готовые фрагменты конфигурации для обоих серверов.

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

CSS с множеством комментариев, лишних пробелов и повторяющихся шаблонов сжимается наиболее агрессивно. Бандлы фреймворков обычно дают снижение GZIP на 70–85 %.

Brotli даёт лучшее сжатие (обычно на 15–25 % меньше GZIP), но требует больше ресурсов CPU. GZIP — безопасный вариант по умолчанию. Brotli стоит включать, если ваш CDN его поддерживает.