Здравствуйте уважаемые коллеги! Как вы уже догадались, в статье пойдет речь об оптимизации css кода файлов каскадных таблиц стилей. Это одно из мероприятий по внутренней оптимизации сайта и желательно его выполнить.

Оптимизация CSS

Не буду вдаваться в подробности, напомню лишь, что именно CSS (в расшифровке и переводе - каскадные таблицы стилей) отвечает за форматирование страниц сайта (цвета, размеры, шрифты и многое другое). Файл имеет расширение css, входит в состав как темы сайта (style.css), так и многих плагинов.

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

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

После тестирования нескольких самых популярных я остановился на snap{css} (программу можно скачать с официального сайта по адресу http://www.improvingcode.com/). Почему именно на ней и как она работает? Об этом я подробно расскажу ниже, но не будем забегать вперед, обо всем по порядку.

Итак, для начала необходимо найти эти самые файлы каскадных таблиц стилей, нуждающиеся в оптимизации. В этом, как нельзя лучше, нам поможет инструмент Google - PageSpeed Insights. Инструмент, кстати, даст еще несколько полезных советов по ускорению сайта. Обязательно их рассмотрим, но в следующих статьях.

В пункте "Сократите CSS" кликните по ссылке "Как исправить" после чего откроется список всех файлов CSS, рекомендованных к оптимизации.

PageSpeed-Insights-css

При наведении курсора мышки на любую строку из списка, откроется подсказка полного адреса искомого файла. Скачайте каждый (по ftp или через файловый менеджер в аккаунте хостинга) по очереди на жесткий диск компьютера. Обязательно сделайте их резервные копии, мало ли что.

Теперь осталось самое интересное. Кликните по файлу правой клавишей мыши, в открывшемся контекстном меню выберите "Открыть как" или "Открыть с помощью" (у кого какая операционная система) и выберите заранее установленную программу "snap{css}".

snap{css}

Одним из плюсов программы является наличие окна редактирования кода. Другим неоспоримым преимуществом следует признать корректность работы. После оптимизации в других конкурентных программах случались небольшие глюки с форматированием, такие как смещение картинок, изменение цвета и тому подобные.

Также, стоит заметить, что программа не удаляет закомментированные строки. Эту особенность нельзя однозначно отнести к плюсу или минусу. Лишние закомментированные строки придется удалять вручную, зато нужные можно оставить. Напомню, комментарии выделяются символами /* и */.

Закомментированные строки

В большинстве случаев закомментированные строки служат подсказками при редактировании кода. Их можно безбоязненно удалить без ущерба для функциональности сайта.

Приступим к самой оптимизации. В меню «Tools» выберите инструмент «Collapse Code». Все, файл таблиц стилей оптимизирован. Сохраните изменения в меню "File" и закачайте файл обратно туда, откуда взяли.

В оптимизации CSS есть и обратная сторона медали. После сжатия код CSS приобретает вид, очень неудобный для редактирования. Когда возникнет необходимость в правке кода, понять там что-либо будет трудновато.  В snap{css}, в связи с этим, есть еще одно большое преимущество. Выберите инструмент "Beautify Code" в меню "Tools" и код вернется к нормальному первоначальному виду, даже если вы его сжали не в этой программе.

После таких нехитрых манипуляций ваш сайт станет чуть быстрее, что безусловно оценят поисковики. Если есть замечания, предложения или просто захочется пообщаться, оставляйте комментарии :-).

С уважением, Роман Ваховский.

Хороший человек всегда нажмет на кнопку!
Комментарий > Благодарность > Ссылка на секретную страницу блога

8 комментариев: Оптимизация CSS кода в программе snap{css}

Страница 1 из 11
  • Kg говорит:

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

    • Роман Ваховский говорит:

      Прав конечно. Оптимизация CSS всего лишь маленькая часть из того, что можно сделать для ускорения скорости сайта.

  • Татьяна говорит:

    Рома,привет! Я понимаю,что если сделать эту оптимизацию,то после нее надо будет вносить исправления в статьи,потому что может произойти смещение строк,картинок и на сайте это будет смотреться уже не так, как располагалась статья первоначально?

    • Роман Ваховский говорит:

      Привет, Таня!
      Рад тебя снова видеть!
      Никаких исправлений вносить не придется. После оптимизации в описываемой мной программе никаких изменений на сайте кроме небольшого ускорения скорости и более благосклонного отношения поисковиков не произойдет.
      Мой блог не изменился же.
      Не бойся ничего, оптимизируй. В любом случае сможешь вернуть все обратно, если сделаешь резервные копии файлов.

  • Весельчак говорит:

    Приветствую! Недавно написал пару статей по оптимизации блога на wp. с ее помощью Вы сможете улучшить свой блог и на 50-100% повысить его посещаемость. никаких секретов. Просто качественная оптимизация блога. Почитайте)

    • Роман Ваховский говорит:

      Страницы сайта будут загружаться быстрее. А это очень даже немаловажно.

Страница 1 из 11

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Поиск по блогу

Все права защищены © 2011-2016. WordPress-book.ru

Копирование материалов разрешено только с размещением открытой обратной ссылки на источник.