расставляй правильно приоритеты и не отвлекайся на мелочи

Оптимизация и сжатие CSS

Поговорим сегодня об оптимизаторах и компрессорах, но не тех, что гудят в холодильниках и других местах, а тех, которые используются в компьютерной сфере для сжатия данных. Так как в последнее время я довольно далеко отошел от темы «настящего программирования» и занимаюсь, по большей степени, только веб разработками, то и данные мы будем сжимать те, которые используются в веб приложениях и в первой статье ими будут каскадные таблицы стилей — CSS.

Думаю особо не нужно объяснять востребованность того, для чего в век ограниченных возможностей пропускной способности каналов Интернет, людского терпения и их же кошельков, это необходимо делать.

Мало того, как показывает практика, этим Вы не только заранее позаботитесь о своих посетителях, но и сможете диагностировать возможные ошибки и устранить их, т.к. некоторые инструменты оптимизации позволяют их выявлять.

Вот и я позаботился о Вас и сжал стилевую секцию этого блога, теперь Вам будет передаваться на 2316 байт меньше, что в итоге дало общее уменьшение размеров страницы на 7,55% и соответственно ускорение загрузки страниц блога. По ходу дела обнаружил 2 ошибки и 19 предупреждений, все исправил, CSS код остался вполне читаемым, его даже можно привести обратно в читаемый вид с помощью сервиса описанного в следующем абзаце.

Начнем, все-таки, я думаю с того, что как не доверяй оптимизаторам, а перед оптимизацией проверять исходный код надо — однозначно, и однозначно в правильном месте: W3C CSS Validator

Чем же сжать и оптимизировать CSS, как не замечательными бесплатными утилитками:

1. CSSTidy
Автор: Florian Schmitz
Последняя версия: 19 июля 2007, CSSTidy 1.3
Замечательная программка, — берите и пользуйтесь, есть все, и исходный код на PHP и .exe файл для командного режима и онлайн версия со всеми возможными опциями.

Кто в теме, говорят (и об этом есть упоминания в комментариях к PHP классу), что в исходном коде утилиты не используются регулярные выражения. Действительно, я таковых не нашел, кроме одной строчки с preg_match, что-ж аплодисменты Флориану, — чувак, — ты реальный «маньяк» :)

На поприще успеха этой утилиты ее используют на полную катушку различные онлайн сервисы, последний из которых, к тому-же, неслабо раскручен (PR6):
http://floele.flyspray.org/csstidy/css_optimiser.php
http://www.csstidy.com/
http://www.cleancss.com/

Я пользуюсь .exe версией CSSTidy. Как пример для этого блога, вот так:

csstidy.exe style.src.css —template=high style.css

Еще братья близнецы:
2. Icey CSS Compressor
Только онлайн версия.
3. CSS Tweak
Есть widget для Маков.
4. CSS Optimizer
Только онлайн версия.

Что-ж, на этом тема не заканчивается, дальше — больше …

6 комментариев на статью:
  1. Скачать фильм Аватар:

    Спасибо. Как раз были проблемы с оптимизацией CSS

  2. bringme:

    CSSTidy действительно облегчил жизнь.

  3. Dmitry:

    Это валидно?

  4. andr:

    сейчас попробуем сжать ксс)))

Ответить
Обязательные поля помечены *