Ответ
Критический CSS — это минимальный набор стилей, необходимый для отображения "выше сгиба" (above the fold) контента при первой загрузке страницы. Он встраивается непосредственно в <head> HTML-документа, чтобы избежать блокировки рендеринга из-за загрузки внешних CSS-файлов.
Пример:
<head>
<style>
.header { color: #333; }
.hero { background: #f5f5f5; }
</style>
</head>Зачем?
Уменьшает время до первого отображения контента (FCP), особенно на медленных соединениях. Остальные стили загружаются асинхронно.
Как получить:
Используют инструменты типа Critical, Penthouse или webpack-плагины для автоматического извлечения.
Ответ 18+ 🔞
Да ты послушай, что эти умники опять придумали! Критический CSS, блядь. Сидит такой фронтендер, чешет репу и думает: "А как бы так сделать, чтобы страница не тупила, пока все эти мои стилевые файлы грузятся, как говно в проруби?"
И родилась идея, ёпта! Берём только самые-самые необходимые стили, которые нужны, чтобы показать пользователю то, что он сразу увидит — "выше сгиба", как они говорят. Всё это дело впихиваем прямо в <head> документа, внутрь тега <style>. Прям вот лошадиной дозой, в рот меня чих-пых!
<head>
<style>
.header { color: #333; }
.hero { background: #f5f5f5; }
</style>
</head>А зачем этот цирк, спросишь? А затем, чувак, чтобы браузер не ждал, пока с сервера приплывёт внешний CSS-файл размером с "Войну и мир". Он сразу видит эти стили в голове документа и начинает рендерить! Первая отрисовка контента (FCP, если по-ихнему) происходит быстрее, особенно если у пользователя интернет как у черепахи в анабиозе. Остальную стилевую хуйню — все эти анимации, стили для подвала и прочую ерунду — можно подгрузить потом, асинхронно, когда основное уже показали.
А как, блядь, этот "критический" набор получить? Вручную, что ли, выискивать? Да ну нахуй, кому это надо! Для этого есть целые инструменты — Critical, Penthouse или всякие webpack-плагины. Они как хитрая жопа: анализируют твою страницу, смотрят, что видно сразу, и автоматически вырезают только нужные куски CSS. Ёперный театр, а не технология!