Table of Contents
Что такое CSS
Язык стилевой разметки CSS или «Cascading Style Sheets» переводится как «каскадные таблицы стилей». Подключив его к какой-либо странице, появится возможность визуализировать элементы, которые создаются Html-тегами. CSS является преемником HTML и считается более сложным языком, нежели предшественник. Его в отличие от HTML недостаточно просто знать. Кроме основной теории в нем существует множество особенностей, узнать которые можно только с опытом.
Это сравнимо с автомобилем: вы можете выучить правила, но хорошо ориентироваться в дорожной обстановке водитель учится только на практике.
Про историю создания CSS следует знать лишь то, что раньше разметка на сайте производилась при помощи тегов HTML, но с появлением дополнительных атрибутов оформления исходный когда все больше и больше нагружался. Так и появилась идея создания нового языка. При всех его плюсах пользователи, которые активно занимаются продвижением своего сайта интересуются, как выполняется оптимизация CSS WordPress.
В чем суть оптимизации
Оптимизация CSS WordPress представляет из себя избавление на сайте от лишних пробелов, комментариев и отступов. Речь идет именно о тех данных, которые не оказывают никакого влияния на функционал сайта, но занимают собой пространство, что негативно сказывается на скорости загрузок.
Мы провели собственный эксперимент “до” и “после” оптимизации и делимся результатами. На сайте, где не проводилась оптимизация CSS WordPress мы нашли три CSS файла (генерируются конкретной темой, от нее зависит их количество) общим весом 517 Кб. После оптимизации основные три CSS файла отключились, взамен появилась активная копия в виде одного CSS файла размером 412 Кб. Исчезли лишние пробелы и отступы. Такое “снижение” вы вряд ли почувствуете если речь идет о размере обычного файла на жестком диске компьютера. Но если учесть объем данных, получаемый с сервера от запроса одного пользователя, то это хороший результат, который мы достигли благодаря плагину Clearfy. Далее подробнее.
Оптимизация CSS WordPress с помощью плагина
Плагин оптимизации Clearfy можно скачать с сайта ru.clearfy.pro или из репозитория WordPress. После активации вам нужно будет попасть в настройки приложения.
Сделать это можно так:
«Настройки» => «Clearfy меню» => «Производительность» => «Minify (HTML/JS/CSS)»
Найдите строку с функцией «Оптимизировать CSS код» и нажмите кнопку ВКЛ. Автоматически вам откроются для выбора отдельные способы оптимизации кода. Вы можете их увидеть на изображении ниже.
Вы можете выбрать одну из предложенных функций, например «Объединять CSS файлы» (рекомендуется в первую очередь) или все сразу. Для удобства каждую функцию сопровождают подсказки в сером значке со знаком вопроса. После активации, нажатием ВКЛ и кнопки «Сохранить настройки» будет завершена оптимизация CSS WordPress.
Заключение
Перед тем как приступать к оптимизации CSS прогоните свой сайт через сервис PageSpeed Insights. И сразу после. После чего сравните показатели, чтобы закрепить успех или выявить малоэффективность способа. Пробуйте и делайте свои собственные выводы.