Что такое критический CSS

Ответ

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

Пример:

<head>
  <style>
    .header { color: #333; }
    .hero { background: #f5f5f5; }
  </style>
</head>

Зачем?
Уменьшает время до первого отображения контента (FCP), особенно на медленных соединениях. Остальные стили загружаются асинхронно.

Как получить:
Используют инструменты типа Critical, Penthouse или webpack-плагины для автоматического извлечения.