Critical CSS

Critical CSS — минимальный набор стилей, нужный для отрисовки контента в первом видимом экране (above the fold). Вставляется прямо в шапку HTML как <style>, чтобы браузер не ждал загрузки внешнего CSS-файла перед первой отрисовкой.

Остальной CSS загружается асинхронно через rel="preload" с onload. Так выигрываем 200–500 мс к LCP и FCP на типичных страницах. Размер инлайн-блока — обычно 4–14 КБ (один TCP-сегмент).

<!-- Inline критический CSS для первого экрана -->
<style>
  body { font-family: system-ui; margin: 0; }
  .hero { padding: 48px 24px; background: #faf9f5; }
  .hero h1 { font-size: 48px; line-height: 1.1; }
</style>

<!-- Остальной CSS — async -->
<link rel="stylesheet" href="/main.css" media="print" onload="this.media='all'">

Главная ловушка инлайна — поддержка. Critical CSS привязан к конкретной вёрстке первого экрана, и стоит сменить шаблон шапки или баннер, как встроенный блок устаревает: на странице появляется FOUC (мелькание нестилизованного контента) или, наоборот, видимый сдвиг при подгрузке основного файла, что бьёт уже по CLS. Поэтому критический CSS не пишут руками раз и навсегда, а пересобирают на каждом деплое инструментами вроде Critical, Penthouse или критикал-плагинов сборщика, прогоняя их на нужных вьюпортах.

Второй подвох — асинхронная загрузка остального CSS. Трюк с preload + onload (переключение rel на stylesheet после загрузки) требует noscript-фолбэка, иначе при выключенном JS страница останется без полных стилей. И инлайн нельзя кэшировать отдельно: эти 4–14 КБ браузер тянет с каждым HTML-документом заново, так что раздувать блок выше одного TCP-сегмента (~14 КБ) контрпродуктивно — выигрыш в первой отрисовке съедается лишним весом ответа и ростом TTFB на медленном сервере.