В этой статье вы узнаете, как оптимизировать сайт с помощью сокращения стилей 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 есть и другие способы оптимизации. Описанные являются самыми основными и эффективными.
Если вы думаете о том, как оптимизировать сайт, то вам также будет полезна эта статья.