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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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