Ускоряем свой CSS

Вы когда-нибудь думали о размере файлов CSS-стилей на своем сайте? Ведь если эти файлы имеют большой вес, это негативно скажется на загрузке (отрисовке) страницы.

Хотя CSS-файлы сайта в основном весят не много, они очень важны в момент загрузки сайта в браузере. Поскольку браузер блокирует отображение страницы до полной загрузки CSS, эти файлы должны быть максимально легкими.

В сегодняшней статье мы рассмотрим несколько советов, которые помогут вам уменьшить размер CSS-файлов, а также ускорить рендеринг страниц сайта.

Используйте инструменты для очистки CSS

В одной из предыдущих статей мы рассматривали инструменты, которые помогают оптимизировать CSS-стили. Используйте подобные инструменты, чтобы пройти валидацию кода, найти ошибки в коде, удалить дубликаты набора правил и удалить неиспользуемые CSS-стили.

Используйте урезанные селекторы

Когда дело доходит до CSS, срабатывает правило «чем меньше, тем лучше» (Краткость – сестра таланта). Использование кратких селекторов поможет уменьшить десятки килобайты при достаточно больших файлах стилей. Возьмем, например, такой селектор:

aside ul li.item-list

Его можно использовать в более урезанном виде:

.item-list

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

В идеале селектор должен быть как можно более кратким, но это не значит, что вы должны полностью обрезать все селекторы. Иногда приходится использовать более углубленный селектор, особенно для страницы со сложным DOM. Поэтому, используйте здравый подход и находите правильный баланс.

Используйте сокращенные свойства

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

font-size: 25px;
line-height: 1.5;
font-family: "Roboto",arial,sans-serif;

Здесь используется довольно много CSS-стилей! Давайте уменьшим это:

font: 25px/1.5 "Roboto",arial,sans-serif;

Сокращенное свойство font содержит несколько деклараций в удобном однострочном виде, который занимает гораздо меньше места.

В примере, показанном выше, краткая запись меньше примерно на 40% за расширенную запись. Это может показаться нечитабельным, но когда подобный синтаксис войдет в вашу практику, он станет для вас намного практичнее.

Свойство font – это не единственная сокращенная версия, которую можно использовать подобным способом. Например, отступы (padding и margin) можно использоваться вместо более длинных записей свойств, например margin-bottom, padding-right и т.д.

А что делать, если вам позднее нужно будет переопределить одно из свойств? Например, предположим, что у вас есть элемент списка (li), размер шрифта которого должен увеличиться на больших экранах. В этом случае вам нужно только использовать расширенную запись свойства размера шрифта:

.item-list {
  font: 25px/1.5 "Roboto",arial,sans-serif;
}
@media (min-width: 1920px){
 .item-list {
  font-size: 35px;
 }
}

Этот поход очень удобный и гибкий. Вам не нужно переписывать все правило, если вам нужно изменить какую-либо часть свойства основного шрифта.

Используйте подсказку ресурса предварительной загрузки (preload)

Значение preload атрибута rel элемента <link> позволяет делать декларативные запросы на ресурсы, которые могут понадобиться сразу после загрузки страницы. Предварительная загрузка гарантирует, что ресурсы будут доступны заранее, и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведет к повышению отрисовки.

Например, для предварительной загрузки файла CSS стилей, вы можете указать его в теге <link>:

<link rel="preload" href="/css/styles.css" as="style">

Или как HTTP-заголовок:

Link: </css/styles.css>; rel=preload; as=style

Использование предварительной загрузки в HTTP-заголовке предпочтительнее, так как в этом случае браузер обнаружит подсказку ранее в заголовках ответов, а не позже в теле ответа.