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

Опубликовано: 5 Октябрь 2010Автор ratemir

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

Ваш шаблон WordPress содержит файл стилей style.css, в котором объединены основные стили Вашего сайта. Однако, расширяя возможности блога с помощью плагинов, некоторые из них делают запросы на свои собственные внутренние CSS стили. Эти файлы .CSS, вставляются как правило, в <head></head>.

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

Для оптимизации и сжатия таблиц стилей CSS можно воспользоваться онлайн сервисами. Если не хотите всё делать вручную, используйте плагин wp-minify. Он объединяет и сжимает файлы .CSS и .JS, более того он может работать одновременно с популярным плагином кеширования wp-super-cash. Устанавливается он как обычно. Скачиваете плагин, разархивируете его в папку /wp-content/plugins/ и активируете из админ панели.

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

Не оптимизировано и не сжато

Как видите, после активации результаты на лицо. Размеры файлов и скорость загрузки уменьшились.

Оптимизировано и сжато

На самом деле данный плагин сохраняет сжатые и оптимизированные файлы в папке /wp-content/plugins/wp-minify/cache/, а потом берет их оттуда когда надо. Поэтому, например, можно скачать файл со стилями, дать ему имя style.css и положить в папку шаблона Вашего блога, вместо одноименного файла. Всё, плагин нам больше не нужен. Но как было указано в начале статьи, установленные Вами плагины иногда используют собственные стили. Получается, что после отключения wp-minify, будут выводиться таблицы с одинаковыми стилями.

Чтобы исправить сложившуюся ситуацию, откройте главный файл плагина, использующего собственные стили. Обычно, его название совпадает с названием плагина(например, wp-pagenavi.php). Затем, откройте файл в любом текстовом редакторе и закомментируйте  строки, отвечающие за вывод стилей CSS. Как правило, они располагаются в самом начале и имеют примерно такой вид:

### Function: Enqueue PageNavi Stylesheets
add_action('wp_print_styles', 'pagenavi_stylesheets');
 function pagenavi_stylesheets() {
   if(@file_exists(TEMPLATEPATH.'/pagenavi-css.css')) {
    wp_enqueue_style('wp-pagenavi', get_stylesheet_directory_uri().'/pagenavi-css.css', false, '2.50', 'all');
    } else {
    wp_enqueue_style('wp-pagenavi', plugins_url('wp-pagenavi/pagenavi-css.css'), false, '2.50', 'all');
  }
}

Хочу заметить, если Вы решили обойтись без такого инструмента оптимизации как wp-minify, то нужно понимать, что каждый раз обновляя плагины, Вам придется вносить изменения в код.



Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

2 комментариев к “Оптимизация и сжатие CSS”

  • freepsy
    22 Ноябрь, 2010, 2:45

    Дико интересный пост. Больше таких делайте!

  • Art
    28 Апрель, 2011, 15:08

    Где эти результаты смотреть?

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

Наверх