ГлавнаяГлоссарийCritical CSS

Critical CSS

Критический CSS

CSS-стили только для первого экрана, вставленные инлайн.

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

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

Пример из практики

Главная страница pawetta.com: ~4 КБ критичного CSS встроены инлайн, остальные 108 КБ pages.css грузятся через preload — LCP стал 1,4 с вместо 2,1 с.