Что такое критический CSS
Браузер не начинает показывать страницу, пока не получит и не разберёт подключённые стили: файл стилей считается блокирующим ресурсом. Если общий файл весит сотни килобайт, посетитель какое-то время видит пустой экран, хотя HTML уже пришёл.
Критический CSS — это небольшой набор правил, которого достаточно для оформления первого экрана: шапки, заголовка и главного блока. Его вставляют прямо в HTML страницы, а остальные стили подгружают без блокировки отрисовки.
Как это выглядит в коде
Схема простая: правила первого экрана лежат в блоке style, а основной файл подключается так, чтобы не задерживать отображение.
<head>
<style>
/* правила первого экрана */
.header { display: flex; height: 64px; }
.hero { min-height: 320px; }
</style>
<link rel='preload' href='/css/main.css' as='style'
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel='stylesheet' href='/css/main.css'></noscript>
</head>Блок noscript нужен, чтобы страница осталась оформленной у тех, у кого скрипты отключены, и чтобы робот увидел итоговое оформление.
Что считать критическим
- Стили шапки и навигации, видимой без прокрутки.
- Оформление главного заголовка и первого смыслового блока.
- Размеры главного изображения, чтобы не было смещений макета.
- Запасной шрифт для заголовка, пока загружается основной.
Всё остальное — подвал, всплывающие окна, вкладки, отзывы, слайдеры ниже первого экрана — в критический набор не входит.
Способы получить критический набор
| Способ | Плюсы | Минусы |
|---|---|---|
| Вручную для каждого шаблона | Точный результат, ничего лишнего | Трудоёмко и быстро устаревает |
| Автоматическая выборка при сборке | Не нужно вести набор правил вручную | Результат нужно проверять глазами |
| Один небольшой общий файл | Простота, нет дублирования | Не даёт максимального выигрыша |
Риски и ограничения
Отдельный набор для каждого шаблона. Первый экран главной, категории и карточки товара выглядит по-разному, поэтому один набор правил подходит не всем.
- Мигание оформления. Если в критический набор попало не всё нужное, страница сначала показывается «голой», а затем перестраивается.
- Дублирование правил. Часть стилей окажется и во встроенном блоке, и в основном файле: это увеличивает вес HTML.
- Устаревание. После смены дизайна набор нужно пересобирать.
Если общий файл стилей небольшой (десятки килобайт), сначала стоит минифицировать его и убрать неиспользуемые правила: часто этого хватает. Про то, что чаще всего замедляет первый экран, — в статье про LCP.
Частые вопросы
Что такое критический CSS?
Небольшой набор правил, достаточный для оформления первого экрана; его вставляют в HTML, а остальные стили загружают без блокировки отрисовки.
Нужен ли критический CSS каждому сайту?
Нет: если общий файл стилей небольшой и хорошо сжат, выигрыш может быть незаметным, а сложность возрастёт.
Как проверить, что первый экран отображается правильно?
Открыть страницу на медленном соединении без кеша и убедиться, что оформление не «мигает» при догрузке основного файла стилей.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.