4 сервиса для сжатия CSS

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

Эксперимент проводился с двумя таблицами стилей: CSS‑файлом, написанным для новой версии проекта ПитерКульт (далее – первый файл) и с файлом стилей он‑лайн магазина OZON (второй). Нужно отметить, что первый файл представлен именно в том виде, в котором был написан – без всяких прикрас и подготовки к эксперименту.

Все упомянутые сервисы имеют англоязычный интерфейс.

Размеры исходных файлов:

• первый – 7 372 байт
• второй – 62 609 байт

Первый файл изначально писался «коротко» – при этом сохраняется читаемость (по крайней мере, для автора) и уменьшается размер, именно из‑за короткого стиля написания, первый файл сжимается хуже.

CleanCSS – мой выбор

www.cleancss.com

Сервис компрессии и форматирования CSS. Настройки обработки таблиц стилей у этого сервиса достойны похвалы.

CSS можно добавить, введя адрес файла в интернете, или скопировав‑вставив его содержимое.

Если совсем не менять настройки, на выходе получается красивый сжатый CSS с сохранением читаемости. Среди настроек есть опция сохранения комментариев в CSS‑коде. По окончании обработки, выдается лог основных изменений, внесенный в код и уровень сжатия.

Результаты работы с настройками по умолчанию:

• первый – сжат до 7 075 байт (96 %)
• второй – сжат до 52 797 байт (84,3 %)

Очень хорошие результаты сжатия при красивом форматировании кода. При максимальном сжатии, второй файл уменьшился на 20,4 % – лучший результат!

Вывод: лучший сервис для форматирования и сжатия CSS.

FormatCSS

www.lonniebest.com/FormatCSS

Сервис предназначен для форматирования CSS, а не для сжатия. Можно красиво выровнять правила, отсортировать их по алфавиту. При некоторых настройках, сервис можно использовать и для сжатия.

Ввести CSS можно только скопировав‑вставив.

Результаты работы с настройками по умолчанию:

• первый – сжат до 8 105 байт (109,9 %)
• второй – сжат до 61 715 байт (98,5 %)

В первом файле, написанном «коротко» вручную, добавление красивого выравнивания, естественно, вызвало увеличение размера (причем, немалое увеличение – почти на 10 %). Второй файл получил небольшое сжатие.

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

Robson CSS Compressor

iceyboard.no-ip.org/projects/css_compressor

Файл таблицы стилей можно взять с локального компьютера, из интернета, или скопировать‑вставить код в соответствующее поле.

Настройки сжатия касаются конвертирования цветов (RGB в hex, имена цветов в hex и т. п.), группировки правил, удаления ненужных значений.

Результаты работы с настройками по умолчанию:

• первый – сжат до 6 326 байт (86,3 %)
• второй – сжат до 48 985 байт (78,2 %)

CSS полностью теряет читаемость, уровень сжатия очень хороший. Настройки сервиса не предусматривают возможности сохранения читаемости сжатого CSS.

При расчете результатов сжатия для второго файла сервис ошибся – выдал финальный размер файла 430 байт.

Вывод: сервис пригоден для автоматического сжатия CSS в том случае, если нет необходимости вносить быстрые изменения.

Tabifier

tools.arantius.com/tabifier

Сервис сжимает не только CSS, но и HTML. Настроек нет.

Ввести код можно только скопировав‑вставив его в текстовое поле.

Результаты работы:

• первый – сжат до 7 876 байт (106,8 %)
• второй – сжат до 60 706 байт (96,9 %)

Первый файл не только не сжат, но его размер даже увеличен почти на 7 %. Второй файл сжат незначительно (уменьшился почти на 4 %).

Вывод: использовать этот сервис можно тоько для форматирования. Причем, HTML.

16 мая 2008
Категория: Web–разработка
Метки: CSS, оптимизация, сжатие
Комментировать ↓