Как оптимизировать сайт с помощью сокращения стилей CSS

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

Перед тем, как оптимизировать сайт с помощью сокращения CSS, вам следует понимать, что хоть стили и будут ужиматься, на внешнем виде сайта это абсолютно никак не скажется, так что этот метод можно использовать без какого-либо ущерба.

Как оптимизировать CSS

Итак, перед тем, как оптимизировать сайт с помощью сжатия стилей CSS, перейдите в файл шаблона style.css. Вы можете получить к нему доступ из консоли или по FTP. Обязательно сделайте копию этого файла на случай, если что-то пойдёт не так. Кроме того, если вы не понимаете о чём речь, вам следует узнать об основах CSS.

Цвета

Часто в шаблонах WordPress цвет отмечают шестизначным значением, например color:#000000. Чтобы сократить это выражение, можно уменьшить значение до трёх символов – color:#000. Так можно поступить с любым цветом и оттенком. Так как в CSS цвета используются много раз, таким образом можно получить значительное сокращение объёма файла.

0 не измеряется

Иногда верстальщики указывают единицу измерения около значения 0, например margin: 5px 0px. Однако, как у 0 может быть единица измерения? Это не является ошибкой, но ошибкой не является и отсутствие единицы измерения, поэтому, чтобы сократить такие выражения, можно написать так: margin: 5px 0.

Сокращение строк

Описание класса, которое состоит только из одного свойства, лучше записать в одну строку. Например, не оптимизированное выражение:

.text {

padding: 5px

}

Оптимизированное оно будет выглядеть так:

.text {padding: 5px}

Группировка стилей

Если вы не знаете, как оптимизировать сайт в части CSS, то обратите внимание на одинаковые свойства у разные стилей. Например, такое выражение:

.text {padding: 5px}

.font {padding: 5px}

Может быть сокращенно до такого:

.text, .font {padding: 5px}

В результате получаетс значительную экономию.

У CSS есть и другие способы оптимизации. Описанные являются самыми основными и эффективными.

Если вы думаете о том, как оптимизировать сайт, то вам также будет полезна эта статья.