Удаление неиспользуемого CSS

Как пользоваться?

Видеоинструкция: ВК видео, Youtube, Дзен, Rutube.

Всю работу разделяем на 4 простых этапа:

• Сканирование страниц сайта. Отключите функцию группировки файлов, если таковая имеется, и запустите сканирование страниц разных типов: категорию товаров, карточка товара, информационная страница, главная. Добавлять 2 разных карточки товара или 2 разных страницы категории товара — бессмысленно, так как используемые стили у них будут одинаковые.
• Загрузка отчищенных файлов на тестовую площадку для разработки. Скопируйте файлы в корневую папку вашего сайта с заменой текущих файлов. Если у вас своя система управления CSS файлами или вы используйте нетиповое решение, то файлы нужно заменять вручную.
• Тестирование и правка. Открывайте страницы, тестируйте их и проверяйте не удалились ли нужные стили. Займёт до 15 минут на типовую страницу.
• Отчистка файлов. После тестирования удалите оставшиеся закомментированные участки кода. Они и есть неиспользуемые стили.

Советы:

• Начинайте с основных файлов вашего шаблона, а потом переходите к плагинам и системным файлам.
• Все манипуляции проводите на тестовой копии сайта.
• Используйте систему контроля версий вроде git или SVN. Так, вы проконтролируйте изменение каждой строчки, и в случае чего сможете вернуть всё назад.

Как правильно работать с инструментом и не удалить ничего лишнего?

Некоторые актуальные стили могут быть удалены в 2 случаях:

• Эти стили применяются к элементам на страницах, которые не сканируются.
• Элементы, которые появляются при действиях пользователя — например, после клика, отправки формы или прокрутки. Сканер не знает об их существовании, так как не совершает активных действий на странице, поэтому считает их неиспользуемыми.   Чтобы зря удалённые стили было просто вернуть, сканер не удаляет код, а комментирует его, чтобы во время тестирования можно было вернуть используемые стили простым раскоментированием кода.

Существуют ли аналоги нашего инструмента?

Purgecss — представляет собой простой анализатор кода. Он не открывает страницу в браузере и исследует статически загружаемый HTML код, без исполнения JavaScript. Также вместо комментирования неиспользуемого кода, он удаляет его. Инструмент малопригоден, так как не анализирует только загружаемый HTML и безвозвратно удаляет куски кода.

Purifycss — умеет сканировать HTML страницу, но анализирует исходный код, отдаваемый сервером, а не сгенерированную в браузере страницу. Также просто удаляет неиспользуемый участок кода вместо комментирования. Из-за этого, чтобы восстановить ложно удалённый код, нужно в 20—50 раз больше времени, чем на простое раскомментирование как у нас.

Выделение сквозных стилей

Сквозные стили предназначены для часто используемых элементов, таких как: шапка, меню, подвал, элементы форм, h1-h6 заголовки и т. д. Рекомендуется выделить их в отдельный файл и использовать на каждой странице. Благодаря кешированию, они загрузятся только один раз и будут использоваться при посещении второй и последующих страниц сайта. Это ускорит загрузку страниц. Также это упорядочивает код, что упрощает его поддержку.

Чтобы выделить сквозные стили, надо:

• Создать отдельную страницу со всеми сквозными элементами.
• Использовать чистильщик CSS кода.
• Скопировать весь полученный код в один файл. Обычно он называется common.css.
• Готово. Файл common.css содержит все сквозные стили.