5 советов для супер быстрого CSS

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

• 3 лучших инструментов для тестирования веб-производительности

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

Вот пять советов, которые помогут вам добиться этого.

1. Используйте селекторы с небольшим уровнем вложенности

nav ul li.nav-item

Это можно записать более кратко:

.nav-item

Помимо того, что ваш CSS будет небольшим, браузер также будет быстрее отображать элементы, нацеленные на конкретные селекторы. Браузеры читают селектор справа налево. Чем больше уровень вложенности селекторов, тем больше времени  требуется браузеру что бы обработать и отобразить элементы, к которым применяются эти селекторы. Для более сложных DOM, которые часто перезаписываются, короткие селектора также могут сократить время.

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

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

Использование сокращенного CSS ускорит ваш сайт

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

font-size: 1.5rem;
line-height: 1.618;
font-family: "Arial", "Helvetica", sans-serif;

Здесь очень много CSS! Давайте приведем это в порядок:

font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;

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

В примере, показанном выше, краткая запись использует примерно на 40 процентов меньше места, чем его эквивалент записанный в три строчки. С первого взгляда эту запись трудно понять, но когда вы потратите некоторое время на его использование, синтаксис становиться понятным.

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

Свойство padding работает так же. Для получения дополнительных возможностей для уменьшения вашего CSS, Mozilla Developer Network предлагает полезный список сокращенных свойств.

Что делать, если вам нужно переопределить значение ниже в каскаде? Например, предположим, что у вас есть элемент заголовка, который должен изменить размер шрифта для больших дисплеев. В этом случае, вы должны использовать конкретное свойство font-size:

h1 {
  font: 1.5rem/1.618 "Arial", "Helvetica", sans-serif;
}

@media (min-width: 60rem) {
  h1 {
    font-size: 2rem;
  }
}

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

3. Используйте предварительную загрузки ресурсов

Указание ресурса для предварительной загрузки может дать браузеру фору на загрузку CSS вашего сайта. Вы можете установить его как тег <link> в HTML:

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

Или как HTTP-заголовок в конфигурации вашего сервера:

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

В обоих этих сценариях preload дает браузеру фору на погрузку /css/styles.css. Использование предварительной загрузки в HTTP-заголовке предпочтительнее, так как это означает, что браузер обнаружит подсказку ранее в заголовках ответов, а не позже в теле ответа.

Еще одна причина для использования предварительной загрузки в HTTP-заголовке заключается в том, что он инициирует событие push-сервера на большинстве реализаций HTTP/2. Server push — это механизм, посредством которого активы предварительно выталкиваются клиенту при создании запросов на контент, и он предлагает преимущества производительности, аналогичные вложению CSS. Server push не доступен по протоколу HTTP/1. Однако использование предварительной загрузки в среде HTTP/1 может повысить производительность.

4. Сбор излишних стилей с помощью csscss

csscss будет анализировать любые файлы CSS, которые вы ему даете, и даст знать, какие наборы правил дублировали декларации

Может проверить ваш CSS для дублирования правил с помощью проверки избыточности. Например, возьмите инструмент csscss на основе Ruby.

Пользователи Ruby могут установить его с помощью:

gem install csscss

После установки вы можете проверить свой CSS для избыточность следующим образом:

csscss -v styles.css

Эта команда показывает, какие селектора используют общие правила, которые вы можете удалить, чтобы сэкономить место:

{h1} AND {p} share 3 declarations 
  - color: #000
  - line-height: 1.618
  - margin: 0 0 1.5rem

Вы можете перемещать повторяющиеся правила под один селектором:

h1, p {
  color: #000;
  line-height: 1.618;
  margin: 0 0 1.5rem;
}

Вы будете удивлены тем, сколько свободного пространства может сэкономить этот процесс в крупных проектах.

Используйте параметр —help, чтобы увидеть больше команд, которые вы можете использовать, чтобы изменить настройки.

5. Уменьшение размера с помощью cssnano

cssnano принимает ваш отформатированной CSS и запускает его через множество целенаправленных оптимизаций

Вы можете использовать cssnano — node и инструмент PostCSS. cssnano не только минимизирует CSS, но и делает много целенаправленных оптимизаций, которые могут еще больше уменьшить размер CSS.

Установите его в своей системе с помощью npm:

npm i -g cssnano-cli

Затем используйте его для оптимизации CSS:

cssnano styles.css optimized-styles.css

Если вы не любитель работы с командной строкой, можете автоматизировать cssnano с системой сборки. Вот как использовать cssnano в gulpfile:

const gulp = require("gulp");
const postcss = require("gulp-postcss");
const cssnano = require("cssnano");

const buildCSS = () => {
  return gulp.src("css/styles.css")
    .pipe(postcss([cssnano()])
    .pipe(gulp.dest("css/optimized"));
};
const watch = () => {
  gulp.watch("css/styles.css", buildCSS);
};
exports.buildCSS = buildCSS;
exports.watch = watch;

Задача buildCSS считывает CSS, который вы пишете в css/styles.css, затем передает оптимизированный вывод в каталог css/optimized. Задача watch запускает buildCSS всякий раз, когда происходят изменения в css/styles.css.

Задачу watch можно вызвать в терминале следующим образом:

gulp watch

С некоторой настройкой, вы сможете создать рабочий процесс, который выполняет эту конкретную оптимизацию в дополнение к другим связанным с CSS задачам, таким как сбор Sass/Lessфайлов, автопрефикс и многое другое.