14 ноября 2008 г. CSS GZip Оптимизация Сервисы

Сжимаем и минимизируем CSS при помощи Code Beautifier


И снова обратимся к webo.in для оптимизации блога, теперь он предлагает:

CSS-файлы можно уменьшить в размере.
Рекомендуется воспользоваться инструментом для сжатия CSS-файлов (основанном на проекте CSS Tidy). После этого можно отдавать CSS-файлы в виде архивов с сервера (общий выигрыш до 85%).

Сжатие мы настроили, пришло время минимизировать CSS и рассказать про инструмент для минимизации CSS-файлов (основанном на проекте CSS Tidy) - Code Beautifier.

Что делает данный инструмент?

Он заменяет определённые части кода на более короткие записи, например:

0px == 0
#ff0000 == #f00

а также уменьшает количество отступов, переводов строк, объединяет блоки и удаляет комментарии. Короче, CSS превращаеться в кашу... и тем самым минимизирует размер файла.

Но, вы скажете: "а как же редактировать эту кашу"? Ответ прост, вам надо хранить резервную и читабельную версию файла, а в продакшн запускать минимизированную!

Input: 23.069KB, Output:12.217KB, Compression Ratio: 47%(-10852 Bytes)

После минимизации, мой основной CSS файл стал в два раза меньше размером. Но, на этом не остановимся и включим сжатие CSS файлов, это ещё больше повысит скорость вашего сайта на данном этапе!

AddOutputFilterByType DEFLATE text/css
CSS-файлы слишком велики.
Может быть, есть возможность их уменьшить, например, включив только те стили, которые действительно требуются, сократив пути к фоновым изображения, сгруппировав селекторы и пересмотрев логику наименования классов стилей.

Есть и подобные инструментарии, но с ними больше возни... Так как вам придётся также переименовывать все классы и прочие структуры в (x)HTML файлах.

А также изменять пути хранения подключаемых файлов. Хотя можно настроить mod_rewrite конечно для этого дела, но это уже извращение на мой взгляд. Лучше тогда уж повесить все картинки на другой сервер, например с nginx на борту.

Более подробнее о сжатии CSS с результатами тестирования CSS: все о сжатии

P.S. Правда у меня была проблема с CSS, поплыл <blockquote> на страничках, проблема была в том что для тега blockquote{} стили в нормальном CSS были позже вызваны чем body *{} и все было в порядке. Но минимизатор решил объединить одинаковые по содержимому стили и получилось что body *{} вызываеться после вызова blockquote{}, тем самым перекрывая его часть стилей. Я просто передвинул блок с body *{} выше blockquote{} и все заработало нормально :)

Комментарии

Кул, пригодитсо!

Очень полезно :)

Ценные рекомендации, беру на заметку

Оставьте свой комментарий

Markdown