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

Зачем нужно удалять неиспользуемый CSS?

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

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

Насколько эффективно удаление неиспользуемого CSS?

Чем старше сайт, тем больше мусора в нём.

В среднем ускорение составляет 0.1-0.2 секунды. Учитывая, что страница должна загружаться быстрее 2 секунд, то это 5-10% прироста скорости.

Как инструмент понимает, какие стили надо оставить?

Мы открываем страницу в реальном браузере. Таким образом, JavaScript код полностью исполняется, и динамические элементы создаются. Мы анализируем HTML, сгенерирован браузером после окончательной загрузки страницы. Также наш инструмент работает с сайтами, использующими такие JavaScript фреймворки, как AngularJS, React, Vue.js и т. д.

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

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

• Сканирование страниц сайта. Занимает около 15 минут. Не забудьте отключить функцию группировки файлов, если таковая имеется.
• Загрузка отчищенных файлов на тестовую площадку для разработки. Просто скопируйте файлы в корневую папку вашего сайта с заменой текущих файлов. Это займёт 5 минут. Если у вас своя система управления CSS файлами или вы используйте нетиповое решение, то файлы придётся заменять вручную.
• Тестирование и правка. Самый простой, но объёмный этап. Вам надо будет открывать страницы и проверять не удалились ли нужные стили. Время выполнения 1-2 часа на типовую страницу. Например, если у вас интернет магазин, то достаточно протестировать одну карточку товара, чтобы изменения применились сразу на всех остальных.
• По окончании тестирования просто удалите оставшиеся закомментированные участки. Занимает 20-30 минут на файл. В итоге несколько дней работы ускорят ваш сайт на десятки процентов.

Советы:

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

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

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

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

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

Purgecss — представляет собой простой анализатор кода. Он не открывает страницу в браузере и не исследует динамически сгенерированную страницу. Вместо комментирования неиспользуемого кода, он удаляет его. По факту инструмент непригоден к использованию, так как не анализирует реально сгенерированную страницу и безвозвратно удаляет куски кода.

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

Как ещё можно использовать инструмент?

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

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

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

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