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

Критический CSS — минимальный набор стилей, нужный для отрисовки первого экрана. Его встраивают прямо в HTML, а остальные стили загружают позже.

Зачем

CSS блокирует отрисовку: пока браузер не загрузит файл стилей, пользователь видит пустую страницу. Если стили первого экрана уже в HTML, страница рисуется сразу, без ожидания отдельного запроса.

Как подключают

<head>
  <style>
    /* стили шапки и первого экрана */
    .header { … } .hero { … }
  </style>
  <link rel="preload" href="/main.css" as="style" onload="this.rel='stylesheet'" />
  <noscript><link rel="stylesheet" href="/main.css" /></noscript>
</head>

Как получить

• инструменты вроде Critical или Critters (встроены в некоторые фреймворки) вычисляют стили первого экрана автоматически;
• Next.js, Nuxt, Astro частично делают это сами.

Нюансы

• Критический CSS должен быть маленьким (до ~14 КБ), иначе выигрыш пропадает.
• Он не кешируется отдельно и повторяется на каждой странице.

Коротко для собеседования

Критический CSS — стили первого экрана, встроенные в HTML, чтобы страница отрисовалась без ожидания файла; остальное грузится асинхронно.

Подробнее: web.dev — Extract critical CSS