Быстро стилизуйте первый экран
Критический CSS — это набор правил, необходимых для стилизации начальной области просмотра конкретной страницы. Если отдать эти правила заранее, первый экран сможет отрисоваться, пока догружается остальная таблица стилей.
Встраивание имеет цену: правила добавляют вес HTML и могут дублировать отдельно загружаемую таблицу стилей. Оно оправдано, когда убирает реальную задержку отрисовки, а не просто переносит в документ все правила подряд.
Найдите правила, которые нужны области просмотра
Проверьте первый экран при типичных десктопной и мобильной ширине. Определите его шапку, навигацию, главный заголовок, изображение и элементы управления, затем выясните, какие правила верстки, типографики и компонентов им нужны.
Карточке товара и листингу категории могут требоваться разные правила. Скрытые меню, брейкпоинты адаптивности и резервные шрифты создают зависимости, которые пропускает скриншот десктопа.
Проверьте вынесенные стили
Оставьте полную таблицу стилей доступной для остальной страницы. В тестовом браузере намеренно задержите её загрузку и проверьте первый экран: нет ли элементов без стилей, пропущенных правил верстки или нечитаемых элементов управления. Проверьте запасной вариант, если какой-либо механизм загрузки на JavaScript даёт сбой.
Сравните холодный и повторный визиты. Улучшение при первом визите может быть съедено дублированным CSS или потерей выгоды от кеширования. По каскаду запросов (request waterfall) и трассировке рендеринга проверьте, устраняет ли изменение исходную задержку.
Синхронизируйте с дизайном
Перепроверяйте выделение критических стилей после изменения шрифта, компонента или брейкпоинта. Устаревший критический CSS может вызвать мелькание неверных стилей или сдвиг, когда придёт полная таблица стилей.
Универсального бюджета в байтах, при котором выделение будет верным, нет. Полезный результат — быстро отрисованный и стабильный первый экран, при котором остальные стили надёжно загружаются.