Как удалить лишние CSS стили на сайте

Как удалить лишние CSS стили на сайте

Расскажем о сайте, который достался нам на техническую поддержку. На момент написания статьи сайт уже пережил 3-4 итерации редизайна и содержал в своем коде тучу неиспользуемых CSS стилей. Объем CSS файлов был более 2 Мб и даже в сжатом виде они составляли более 400 Кб, что довольно много. Особенно для мобильных устройств. К тому же, это очень сильно влияло на показатели в Google Pagespeed Insight.

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

Решение нашлось в заграничном сегменте и мы спешим с вами им поделиться.

Хоть разработчики FireFox и убрали возможность поиска лишних CSS стилей в браузере для пользователей, но они оставили ее в версии для разработчиков. Для работы нам понадобится скачать и установить именно ее.

https://www.mozilla.org/en-US/firefox/organizations/all/

Перед работой по очистке стилей настоятельно рекомендую сделать бекап хотя бы для шаблона сайта, т.к. баги могут выплыть лишь спустя какое-то время. Мы для этой операции делали вообще отдельный шаблон сайта, так удобнее потом сравнивать 2 шаблона: очищенный и исходный.

Алгоритм работы следующий:

1.       Если работаете с сайтом на Битрикс, отключаем в админке сайта сжатие и объединение CSS стилей в настройках главного модуля.

2.       Открываем FireFox ESR и нажимаем Shift + F2

3.       В открывшейся панели пишем csscoverage start

4.       Обходим все разделы сайта со всеми возможными шаблонами. Тут смысл в том, чтобы открыть все отличающиеся страницы. Не обязательно открывать 200 карточек товаров, т.к. стили в них скорее всего идентичные.

5.       После обхода страниц пишем csscoverage stop

6.       Получаем список файлов стилей.  Зачеркнутыми будут отмечены стили, которые не используются в работе. Работать с файлом можно прямо в окне браузера, скачать уже очищенный файл нельзя. Впрочем, это и не надо, объясню почему.

Ограничения метода

Данный инструмент не понимает, используется псевдокласс или нет (:before, :after и т.д.). И тут вам нужно смотреть глазами: если стили для класса используются, то и для псевдокласса скорее всего тоже. И наоборот.

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

Удаление лишних стилей с сайта

Все! Сохраняем очищенные файлы стилей. Визуально проходим по шаблону и сравниваем его с исходным. Прогоняем страничку через Google Pagespeed Insight и радуемся полученным результатам!

А если возникли вопросы или что-то пошло не так (Боже упаси!), то мы на связи 24/7 и всегда готовы помочь Вам решить любую проблему!

  • 19.04.2019
Возврат к списку