Критический CSS: выделение и встройка в документ

Прямой ответ

Критический CSS — стили, необходимые для отрисовки первого экрана. Они встраиваются в документ, поэтому отрисовка не ждёт загрузки внешнего файла со всеми стилями.

<head>
  <style>
    /* Критический CSS: только первый экран */
    .header, .hero, .nav { /* ... */ }
  </style>
  <link rel="stylesheet" href="/styles/full.css" media="print"
        onload="this.media='all'">
</head>

Внешний файл подключается с атрибутом media="print", поэтому он не блокирует отрисовку, а после загрузки переключается на все медиа. О блокирующих ресурсах — в статье про render-blocking ресурсы.

Выделение критического CSS выполняется по фактической разметке первого экрана, а не по предположению о составе стилей.

Определение первого экрана и отложенная загрузка

Два вопроса определяют состав критического CSS и способ загрузки остального.

Что входит в первый экран. Определяется по разметке, видимой без прокрутки при целевом размере окна. Стили элементов ниже первого экрана не относятся к критическим.

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

Практическое следствие: состав критического CSS зависит от размера окна, поэтому выделение выполняется для целевых размеров, а не для одного варианта.

Отдельный аспект — поддержка асинхронной загрузки. Переключение атрибута медиа выполняется обработчиком события загрузки, поэтому при отключённом скрипте стили не применяются. Резервный способ подключения обеспечивает применение стилей без скрипта.

Три признака избыточного критического CSS.

Стили всех компонентов страницы. Объём встроенного CSS растёт, поэтому документ увеличивается, а выигрыш в скорости отрисовки теряется.

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

Дублирование стилей. Один и тот же набор правил встроен в несколько страниц, поэтому объём передачи растёт без выигрыша.

О влиянии скорости отрисовки на метрики — в статье про FCP и LCP; о совокупности метрик скорости — в статье про Core Web Vitals.

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

Сопровождение критического CSS при изменении разметки

Критический CSS — производная структура, поэтому изменение разметки первого экрана требует пересмотра встроенного набора правил.

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

Контроль объёма. Объём встроенного CSS растёт при добавлении элементов в первый экран, поэтому документ увеличивается. Предел объёма проверяется при сборке.

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

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

Практика: выделение и встройка критического CSS

1. Определите целевые размеры окна. Состав первого экрана зависит от размера, поэтому выделение выполняется для используемых вариантов.

2. Выделите стили видимой области. Правила для элементов ниже первого экрана не относятся к критическим.

3. Встройте критический CSS в документ. Стили первого экрана доступны сразу, поэтому отрисовка не ждёт внешнего файла.

4. Загрузите остальные стили асинхронно. Внешний файл не блокирует отрисовку, а применяется после загрузки.

5. Обеспечьте резервное применение стилей. При отключённом скрипте стили должны применяться, поэтому используется резервный способ подключения.

6. Не включайте стили всех компонентов. Объём встроенного CSS растёт, поэтому документ увеличивается без выигрыша в скорости.

7. Проверяйте результат на реальных страницах. Состав первого экрана определяется разметкой, а не предположением.

Рекомендации:

1. Различайте критический и полный CSS. Критический покрывает первый экран, полный — все состояния и размеры.
2. Учитывайте объём встроенного CSS. Документ передаётся при каждом запросе, поэтому избыточный объём увеличивает время передачи.
3. Выделяйте стили для каждого шаблона. Состав первого экрана различается, поэтому общий набор правил включает лишнее.
4. Проверяйте отрисовку без кэша. Кэшированный внешний файл маскирует проблему блокирующей загрузки.
5. Пересматривайте состав при изменении разметки. Изменение первого экрана делает прежний набор критических стилей неполным.

Практический сценарий: страница отрисовывалась без стилей

Контекст: после включения асинхронной загрузки стилей страница кратковременно отображалась без оформления.

1. Диагностика. Критический CSS не покрывал элементы первого экрана, поэтому до загрузки внешнего файла страница отображалась без стилей. Обработчик переключения медиа выполнялся после загрузки, поэтому промежуточное состояние было заметным.
2. Причина. Состав критического CSS определён по предположению, а не по фактической разметке видимой области. Часть стилей первого экрана отсутствовала во встроенном наборе.
3. Действия. (а) Определили состав первого экрана по разметке для целевых размеров окна; (б) дополнили встроенный CSS недостающими правилами; (в) проверили отрисовку с отключённым кэшем и убедились в отсутствии неоформленного состояния; (г) сократили объём встроенного CSS, исключив правила для элементов ниже первого экрана; (д) добавили резервное применение стилей без скрипта.
4. Результат. Страница отрисовывается оформленной сразу, а остальные стили применяются после загрузки.

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

FAQ

Что входит в критический CSS? Стили элементов, видимых без прокрутки при целевом размере окна. Правила для элементов ниже первого экрана не относятся к критическим.

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

Нужен ли резервный способ применения стилей? Да, поскольку переключение медиа выполняется скриптом. При отключённом скрипте стили должны применяться резервным способом.

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

Источники: MDN CSS, Vite guide, MDN link element — ссылки в шапке.