Зачем это необходимо? –Ну хотя бы для более удобной работы пользователя. - позволяет корректно сжимать CSS.
Для теста я взял CSS-код одного из шаблонов WordPress'a. Размер файла с неоптимизированным CSS составлял 14.207KB, после сжатия, 11.916KB. Благодаря сжатию, размер CSS уменьшился на 16.1%, а это равняется 2291 байтам.
Далее из того же шаблона я взял еще один файл с CSS кодом, размер файла 0.863KB, после оптимизации CSS, размер файла составил 0.734KB, а это на 129байт меньше, если брать в процентах, то это 14.9%.
После всех этих экспериментов, я решил оптимизировать CSS-код проекта, над которым сейчас работаю, размер CSS кода был равен 2.523KB. Сжатие превзошло мои ожидания, процент сжатия был равен 28.5%, т.е. код стал весить 1.803KB.
Хочу заметить, что % сжатия зависит от размера файла и сложности кода.
Что же делает Codebeautifier, чтобы так хорошо сжать CSS?
1)Убирает все лишние пробелы
2)Преобразует все цвета в 16-ричные коды, т.е. white после преобразования превратится в #fff, кроме того, шестнадцатеричные коды цветов сокращаются, к примеру #00cc00 будет преобразовано в #0c0.
3)Уменьшает количество CSS-свойств и аргументов этих свойств. К примеру,
padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:40px;
Будет преобразовано в:
padding:10px 20px 30px 40px;
А, padding:5px 10px 10px 10px; будет преобразовано в:
padding:5px 10px 10px;
Codebeautifier выводит лог-данные о проведенной работе по оптимизации CSS, ктоме того предоставляет данные, касательно входного и исходящего размера кода, процента сжатия и т.д. Все это делает Codebeauifier очень удобным!
Внимание: при выставлении настроек максимальной степени оптимизации, код становится плохочитаемым, поэтому не удаляйте неоптимизированный код, вам в любой момент может понадобится внести правки в CSS.
Интересное в блогах:
Начинающий СЕОшник подробно рассказывает о том, что такое Внутренняя перелинковка страниц сайта и как ее правильно производить.
Ян рассказывает, Как повысить конверсию трафика и начать зарабатывать на рекламе больше.
Для теста я взял CSS-код одного из шаблонов WordPress'a. Размер файла с неоптимизированным CSS составлял 14.207KB, после сжатия, 11.916KB. Благодаря сжатию, размер CSS уменьшился на 16.1%, а это равняется 2291 байтам.
Далее из того же шаблона я взял еще один файл с CSS кодом, размер файла 0.863KB, после оптимизации CSS, размер файла составил 0.734KB, а это на 129байт меньше, если брать в процентах, то это 14.9%.
После всех этих экспериментов, я решил оптимизировать CSS-код проекта, над которым сейчас работаю, размер CSS кода был равен 2.523KB. Сжатие превзошло мои ожидания, процент сжатия был равен 28.5%, т.е. код стал весить 1.803KB.
Хочу заметить, что % сжатия зависит от размера файла и сложности кода.
Что же делает Codebeautifier, чтобы так хорошо сжать CSS?
1)Убирает все лишние пробелы
2)Преобразует все цвета в 16-ричные коды, т.е. white после преобразования превратится в #fff, кроме того, шестнадцатеричные коды цветов сокращаются, к примеру #00cc00 будет преобразовано в #0c0.
3)Уменьшает количество CSS-свойств и аргументов этих свойств. К примеру,
padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:40px;
Будет преобразовано в:
padding:10px 20px 30px 40px;
А, padding:5px 10px 10px 10px; будет преобразовано в:
padding:5px 10px 10px;
Codebeautifier выводит лог-данные о проведенной работе по оптимизации CSS, ктоме того предоставляет данные, касательно входного и исходящего размера кода, процента сжатия и т.д. Все это делает Codebeauifier очень удобным!
Внимание: при выставлении настроек максимальной степени оптимизации, код становится плохочитаемым, поэтому не удаляйте неоптимизированный код, вам в любой момент может понадобится внести правки в CSS.
Интересное в блогах:
Начинающий СЕОшник подробно рассказывает о том, что такое Внутренняя перелинковка страниц сайта и как ее правильно производить.
Ян рассказывает, Как повысить конверсию трафика и начать зарабатывать на рекламе больше.
Все эти оптимизаторы круты до момента постижения собственного CSS-дао :) Последний проект показывает, что самая оптимизация -- не в сокращении свойств конкретных селекторов, а в группировке общих свойств. До собственного css-фреймворка я дорасту вряд ли, но определенные правила уже осознал :) Как-нибудь сформулирую..
ОтветитьУдалитьБуду ждать твоей формулировки...
ОтветитьУдалитьИногда сжатый CSS не проходит валидацию, такие же ситуации случаются и с xHTML, поэтому проводите проверку на валидность не только после написания кода, но и после его оптимизации.