Style.css – обычно один из самых главных файлов шаблона wordpress, содержащий в себе полные инструкции по стилизации элементов на сайте. Как правило, это один из самых тяжелых файлов в теме, так как на описание свойств всех элементов может понадобиться тысячи строк кода… Но если знать, как сжать css файл, то можно уменьшить его размер вдвое-втрое.
В среднем в этом файле бывает 500-5000 тысяч строк кода. Соответственно, чем больше, тем тяжелее файл и тем дольше он грузится по сети. Например, я поставил себе одну хорошую тему. Постепенно я начал добавлять в нее свои собственные стили. Так я добавлял, добавлял и однажды обнаружил, что в моем файле накопилось 4 тысячи строк кода. А вес файла составлял 80 килобайт!
Как по мне, многовато, так как это размер одного изображения. В связи с этим возникает вопрос, а как почистить, оптимизировать, сжать этот код, чтобы он занимал как можно меньше места? Предлагаю несколько решений. Сначала расскажу о том, что можно удалить без риска сломать отображение сайта.
Комментарии
Практически в каждой теме есть комментарии, которые ее разработчик проставлял для более легкого понимания кода. Эти пометки могут вам пригодиться, если вы захотите что-то изменить, но в рабочем файле на сервере они не нужны, так как только добавляют размера файлу.
Соответственно, можно удалить все комментарии. Это первое мера по очищению кода. Удалять комментарии можно совершенно спокойно, поскольку их отсутствие абсолютно никак не скажется на отображении страниц сайта. Не удаляйте только информацию о теме. Обычно это первые 10-15 строчек. Комментарии помечаются зеленым цветом (в Notepad++), поэтому вы можете убрать их даже без знания языка.
В моей теме удалось сократить код примерно на 100 строк благодаря удалению комментариев.
Пустые стили
Вы удивитесь, но во многих таблицах стилей встречаются селекторы, для которых не задано ни одно свойство. То есть просто идет название селектора, дальше идут фигурные скобки и на этом все заканчивается. Это так называемые пустые стили.
Как вы понимаете, их удаление тоже абсолютно безопасно. В моем случае это уменьшило код примерно на 400 строк!
Продвинутая чистка CSS-файла
Почему я решил сделать такой подзаголовок? Дело в том, что следующий способ позволит сократить код еще сильнее. Возможно, в 2-5 раз, но он гораздо сложнее. Чем сложнее вы ставите шаблон, тем больше в нем может быть наворотов. Например, в одной теме я видел в style.css больше 7 тысяч строк кода.
Например, в моей теме есть поддержка хлебных крошек, слайдера, дополнительного виджета, умного меню, которое трансформируется на экранах мобильных устройств. Но ничем из этого я решил не пользоваться. Соответственно, нужно удалить все папки, скрипты и стили, связанные с этими вещами.
Со стилями сложнее всего, потому что они прописаны в общей таблице. Для удаления подобных селекторов и их свойств вам понадобятся хоть какие-то знания в языке CSS, умение определять, какие стили и селекторы привязаны к разным элементам на веб-странице. Кстати, в этом может хорошо помочь отладчик.
Я сразу хочу сказать, что при такой чистке у вас едва ли получится не задеть что-то важное, в результате внешний вид сайта может измениться. Держите много копий файла стилей, чтобы на них тренироваться. Конечно, нужно время и желание. Я абсолютно уверен в том, что удалив все ненужные элементы, включая комментарии и пустые стили, можно сократить код на 40-70%!
Если после долгих мучений вы все-таки сможете серьезно уменьшить размер файла стилей и при этом не накосячить – поздравляю! У меня пока не полностью получается. Уже уменьшил код на 25%, но можно еще много чего удалить, просто нужно постепенно очищать и тестировать, не изменилось ли чего.
Дальнейшая оптимизация или как сжать css в одну строчку
На этом оптимизация и сокращение кода не завершается. Самое время загнать полученный код в один из специальных сервисов, который сожмет его в одну строку. То есть это будет одна очень длинная строка. Читабельность нулевая, но размер уже серьезно уменьшенного файла сокращается еще на 20-40%. Об этом в следующей статье.
Таким образом, можно очень сильно уменьшить размер файла, который будет использоваться на сервере. Как результат – увеличение скорости. Как вы понимаете, подобную манипуляцию можно проделать и со всеми остальными файлами на сервере. С PHP-шаблонами это будет сложнее, так как в них обычно не стоит ничего удалять – там все нужное, но ведь сжать код с помощью сервиса можно и в них.
В общем, я просто поделился своими мыслями на эту тему. Максимальная простота, скорость и оптимизация. Думаю это то, к чему стоит стремится веб-мастеру.