Critical CSS — это выделенный кусок стилей, который отвечает только за то, что пользователь видит без прокрутки, и подгружается вместе с HTML, а не отдельным файлом. Что это значит на практике: браузер получает всё нужное для первой отрисовки сразу, без ожидания загрузки внешнего styles.css.
Остальные стили при таком подходе грузятся асинхронно и не блокируют рендеринг. Критические стили встраивают прямо в <head> тегом <style>, а полный файл подключают через rel=preload с переключением на rel=stylesheet. Основной эффект замеряется через LCP в PageSpeed Insights: порог зоны Хорошо — LCP ≤ 2.5 с.
§ 01Зачем нужен
Внешний файл стилей блокирует отрисовку: браузер не покажет ни строки, пока не скачает и не разберёт весь CSS. Инлайн-стили для первого экрана убирают этот барьер — разметка первого экрана появляется до загрузки основного файла. Для чего нужно: сократить время до первой отрисовки контента и разгрузить критическую цепочку рендеринга. Эффект виден на метрике LCP, которая входит в Core Web Vitals и учитывает самый крупный видимый элемент первого экрана.
§ 02Как настраивается
Набор стилей первого экрана формируют автоматически: инструменты вроде Critical, Penthouse или critical-CSS-модуля в сборщике анализируют viewport и вырезают правила для видимой части. Порядок шагов: сгенерировать критические правила, вставить их в <head> тегом <style>, отложить полный файл через <link rel=preload as=style onload='this.rel=stylesheet'>. Ширину viewport задают отдельно для мобайла и десктопа, иначе above-the-fold CSS соберётся под неверный экран.
LCP 4.1 → 2.0 c — Интернет-магазин косметики на Shopify вынес критические стили первого экрана inline через Critical и отложил остальной CSS. LCP упал с 4.1 до 2.0 с за 5 недель. Замер через PSI и CrUX-75th, отказы снизились на 11%.
LCP 3.6 → 1.9 c — Новостной портал на WordPress сгенерировал Critical CSS для шаблонов статей плагином Penthouse и убрал render-blocking запросы. LCP улучшился с 3.6 до 1.9 с за 4 недели. Динамика по GA4 и Search Console, глубина просмотра выросла на 8%.
§ 03Где смотреть результат
PageSpeed Insights показывает, устранена ли блокировка рендеринга: пункт про render-blocking resources исчезает из списка проблем, если критические стили встроены верно. Реальные данные пользователей собирает CrUX и раздел Core Web Vitals в Search Console — там виден LCP по 75-му перцентилю. Лабораторный замер даёт вкладка Performance в DevTools: по флейм-графику видно, ждёт ли первая отрисовка внешний CSS.
§ 04Подводные камни
Раздутый inline CSS вредит: если в <head> попадают стили не первого экрана, HTML тяжелеет и теряется смысл оптимизации. Держи объём встроенных правил в пределах нескольких килобайт. Второй риск — рассинхрон: критические стили генерируются один раз, а вёрстка меняется, и первый экран ломается. Чем это отличается от обычного подключения CSS: инлайн-набор нужно перегенерировать при каждом изменении шаблона, иначе он устаревает и отдаёт неверную отрисовку.