Мінімізувати CSS _

Як працює мінімізація CSS

Мінімізатор обходить вашу таблицю стилів за допомогою токенайзера з відстеженням стану, який розрізняє захищені регіони (рядкові літерали та значення url()) від редагованих пробілів, де скорочення та видалення є безпечними.

1. Захист рядків та URL. Перед будь-яким перетворенням токенайзер визначає кожен рядок у лапках («…» або '…') та кожен аргумент url(…) і зберігає їх дослівно. Подальші проходи ніколи не зачіпають ці байти, тому URL фонового зображення з пробілами або властивість content з пунктуацією зберігається точно.
2. Видалення коментарів. Блоки /* … */ видаляються, коли перемикач увімкнено. Якщо також увімкнено перемикач коментарів ліцензій, блоки /*! … */ зберігаються, щоб заголовки ліцензій MIT, Apache та BSD залишалися у виведенні відповідно до цих ліцензій.
3. Скорочення пробілів. Кожна послідовність пробілів, табуляцій та переносів рядків скорочується до одного пробілу, потім пробіли навколо структурних символів CSS {, }, ;, : та , видаляються повністю. Списки селекторів та значень переформатовуються так само, як їх читає парсер браузера.
4. Оптимізація значень. Додаткові проходи переводять hex-коди кольорів у нижній регістр, скорочують парні 6-цифрові hex-канали до 3-цифрового скорочення (#aabbcc → #abc) та видаляють одиниці розмірності від нульових значень (0px → 0). Прохід нульових одиниць пропускає значення всередині викликів transform(), де одиниці є значущими.
5. Звіт про економію байтів. Як оригінальний, так і мінімізований текст вимірюються за допомогою new TextEncoder().encode(…).byteLength — той самий підрахунок байтів UTF-8, який CDN або HTTP-сервер бачить по мережі. Панель метрик показує оригінальний розмір, мінімізований розмір, заощаджені байти та відсоток заощаджень.

Навіщо мінімізувати CSS

• Швидше блокуюче завантаження рендерингу. Браузери не намалюють жодного пікселя, поки не завершать синтаксичний аналіз CSS. Скорочення таблиці стилів на 30% скорочує цей блок, покращує First Contentful Paint та безпосередньо впливає на показник продуктивності Lighthouse.
• Менші рахунки за вивід CDN. CloudFront, Cloudflare та Fastly стягують плату за гігабайт виводу. Скорочення таблиці стилів на 20%, що завантажується з кожним переглядом сторінки, стає реальним рядком у рахунку, коли місячний трафік перевищує кілька мільйонів переглядів.
• Менші вставки та CSS для email. Шаблони транзакційних листів вбудовують CSS, щоб уникнути проблем рендерингу в Outlook та Gmail, і кожен зайвий байт наближає вас до порогу обрізання Gmail у 102 КБ. Мінімізація перед вбудовуванням тримає повідомлення нижче ліміту.
• Без залежностей від інструментів збірки. Одноразові завдання, застарілі репозиторії без конвеєра збірки та ізольовані середовища не завжди мають можливість використовувати Node-ланцюжок інструментів. Ви можете виконати цей крок тут без встановлення PostCSS, cssnano або будь-чого іншого.

Поширені застосування

Мінімізація CSS з'являється в кінці майже кожного конвеєра збірки фронтенду та в кількох контекстах виконання, де важлива кількість байтів.

• Виробничі конвеєри збірки: Webpack, Vite, Rollup та Parcel усі постачаються з кроком мінімізації CSS у стандартних налаштуваннях продакшн-режиму. Виконання цього кроку тут перед комітом дозволяє перевірити результат без запуску повної збірки.
• Вбудовування CSS у теги <style>: серверно рендерені фреймворки, що вбудовують критичний CSS у HTML-документ, отримують таку ж економію байтів, як і окремі таблиці стилів, а менший вбудований CSS скорочує Time to First Byte.
• Транзакційна та маркетингова пошта: HTML для email вбудовує весь CSS, тому кожен кілобайт у таблиці стилів додається до загального розміру повідомлення. Мінімізація перед вбудовуванням тримає повідомлення значно нижче обмежень ESP за розміром.

Практичний приклад

Вставте набір правил розміром 1 КБ з двопробільним відступом, порожніми рядками між селекторами, блоком коментарів ліцензій угорі та розгорнутими hex-кольорами, як-от #FFFFFF, і відступами з нулями, як-от margin: 0px. З усіма увімкненими параметрами результат скорочується приблизно до 600 байтів — економія 40% — тоді як рендерована сторінка виглядає ідентично до джерела.

Чи змінює мінімізація поведінку мого CSS?

Ні, при стандартних налаштуваннях. Мінімізатор видаляє лише ті байти, які CSS-парсер і так відкидає — пробіли, коментарі, необов'язкову кінцеву крапку з комою — та пропускає вміст transform(), де одиниці є значущими. Кожен селектор, властивість та значення зберігаються.

Чи працює він з SCSS або LESS?

Тільки після компіляції у звичайний CSS. Синтаксис SCSS та LESS (змінні, вкладення, міксини, батьківські селектори &) не є дійсним CSS, і мінімізатор його спотворить. Спочатку скомпілюйте джерело препроцесора, потім вставте скомпільований результат сюди.

Чому мої коментарі ліцензій видаляються?

«Видаляти коментарі» увімкнено за замовчуванням і очищає всі блоки /* … */. Увімкніть «Зберігати коментарі /*! license», щоб залишити блоки, що починаються з /*!. MIT, Apache та BSD вимагають, щоб заголовок авторських прав постачався разом із розповсюджуваним CSS.

Скільки можна заощадити?

Вручну написаний CSS зазвичай зменшується на 15–35%. Файли з великою кількістю коментарів або глибоким відступом із багатьма кольоровими літералами можуть досягти 40%. Скомпільований результат Sass або CSS-in-JS часто вже частково мінімізований і економить менше — зазвичай 5–15%.

Виконуйте мінімізацію CSS у вкладці браузера та уникайте Node-ланцюжку інструментів. Вставте таблицю стилів вище, налаштуйте параметри відповідно до потрібного рівня агресивності, потім скопіюйте результат або завантажте його як .min.css. Без завантажень, без облікового запису, без сторонніх бібліотек.