Как удалить лишние 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 и радуемся полученным результатам.

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