Оптимизация и сжатие CSS.
В интернете есть множество статей об оптимизации WordPress, перерыв не один сайт я так и не нашел сайта где есть руководство HOW-TO по «чистой оптимизации». Как правило все рекомендации сводятся к виду:
- Установите кучу плагинов типа WP-Cache или его собратьев.
- Поставьте WP-Minify.
- Что нибудь еще…
Немного поясню что под »чистой оптимизацией» я называю методику чистки кода, приведения в порядок стилевых листов и оптимизацию Js-скриптов.
Опять же, не претендуя на гениальность и на очередное копи-пастовое руководство предлагаю обсудить мой взгляд на задачу оптимизации.
Одним из этапов оптимизации WordPress блога, а мы говорим про блоги на основе WordPress, в которых помимо файла стиля представленного в теме styles.css существует масса CSS-файлов навязываемых плагинами, является оптимизация CSS.
Оптимизация сокращает размер файла что в свою очередь ускоряет загрузку страниц.
Наводим порядок
Первое что следует выполнить – привести в порядок текст методом «сокращения CSS». Для примера возьмем простое описание margin-ов.
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
При использовании сокращений CSS запись приобретает вот такой вид. В примере отсчет начинается с верху и идет по часовой стрелке – верх, вправо, вниз, влево.
Не правда ли красиво?
Дальнейшее сокращение возможно если у вас есть одинаковые значения размеров. Браузеры интерпретируют сокращения CSS так:
При указании 4 значений
Обход выполняется – верх, вправо, вниз, влево.
При указании трех значений
Верх, низ-лево и право
При указании двух значений
Значения верх-низ равны 10px, право-лево 20 px.
При указании одного значения
Все значения равны 10px.
Значение ноль лучше не указывать. Вместо
указываем
[code lang="css"]
#id-name { margin-left: 25px }
Переходим к padding.
Тут правила сокращения несколько меняются
Сверху и снизу по 30px, слева и справа по 0.
Правила сокращения для border
border-width: 1px;
border-style: solid;
border-color: #F00
}
Можно написать:
Правила сокращений для background.
background-color: #FFF;
background-image: url(images/bg-main.png);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: top center
}
Пишем:
Сухой остаток от выше написанного – используйте сокращения т.к. это сильно сокращает объем результирующего файла.
Комбинирование правил.
Простой пример:
p { color:black; font-size:12px }
Комбинируя правила текст получает дополнительную экономию объема
p { font-size:12px }
Использовать этот метод стоит при множественном описании однотипных элементов .
Заканчивая наш небольшой экскурс в теорию CSS хочется сказать что правила сокращения и комбинирования CSS приводят к значительной экономии результирующего объема файла стилей.
Оптимизация CSS
Путей для оптимизации два:
- Путь первый – онлайн сервисы
- Путь второй – программы для оптимизации CSS
Онлайн сервисы
- Первый сервис – www.cleancss.com основан на CSStidy 1.1. Есть возможность установить нужный уровень сжатия и настройки сжатия. Есть возможность сортировки вывода, изменение уровня «компресии» и пр.
- Второй сервис – www.codebeautifier.com основан на CSStidy 1.3. Возможности те же самые но версия движка уже 1.3.
- Третий сервис - www.lonniebest.com/FormatCSS отлично форматирует CSS. С его помощью я привожу в порядок CSS-файлы, он позволет красиво отформатировать текст, отсортировать и пр.
Программы для сжатия CSS
Программ на эту тему великое множество но я хочу рассказать только об одном. Потому что, на мой взгляд он наиболее оптимален и достаточен.
CSS Tidy – csstidy.sourceforge.net
Программа по минимизации CSS файлов с открытым исходным кодом.
Используется на множестве онлайн-сервисов, например www.codebeautifier.com. Для скачивания доступны как вариант на PHP так скомпилированные исполняемые файлы для Windows и Linux.
Похожие статьи
Информация об авторе
 |
Сергей Мариничев. Вы можете присоединиться ко мне в Facebook или в Twitter. |
А также бесплатно подписаться по E-mail и получать актуальную информацию в числе первых.
Вы можете оставить комментарий.
