Critical CSS

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

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

<!-- Inline критический CSS для первого экрана -->
<style>
  body { font-family: system-ui; margin: 0; }
  .hero { padding: 48px 24px; background: #faf9f5; }
  .hero h1 { font-size: 48px; line-height: 1.1; }
</style>

<!-- Остальной CSS — async -->
<link rel="stylesheet" href="/main.css" media="print" onload="this.media='all'">