Critical CSS
Минимальный набор CSS, необходимый для отрисовки видимой части страницы (above‑the‑fold). Встраивается inline в <head>, ускоряя First Contentful Paint (FCP).
Кратко
Critical CSS — это техника выделения и встраивания стилей, которые влияют на первый экран, чтобы браузер мог мгновенно отрисовать контент, не дожидаясь загрузки полной таблицы стилей. Остальной CSS загружается асинхронно.
Что такое Critical CSS
Минимальный набор CSS для первого экрана (above-the-fold). Встраивается inline в <head> для ускорения FCP.
Зачем нужен
- Обычный CSS блокирует рендеринг (render-blocking)
- Браузер ждёт загрузки всего CSS перед отрисовкой
- Critical CSS inline = мгновенная отрисовка первого экрана
Реализация
HTML
<head>
<!-- Critical CSS inline -->
<style>
body { margin: 0; font-family: sans-serif; }
.hero { height: 100vh; background: #000; }
</style>
<!-- Остальной CSS асинхронно -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>Инструменты генерации
- Critical — npm-пакет от Addy Osmani
- Penthouse — генератор critical CSS
- Critters — webpack-плагин
- Next.js — встроенная оптимизация CSS
Важные правила
- Critical CSS должен быть < 14 KB (помещается в первый TCP-пакет)
- Включайте только стили для первого экрана
- Остальной CSS загружайте асинхронно
Генерацию critical CSS имеет смысл автоматизировать в сборке (webpack/gulp) или использовать серверные рендеринг-фреймворки с встроенной поддержкой (Next.js, Nuxt). Для простых сайтов можно сделать это вручную один раз.
FAQ
Частые вопросы
Инструменты типа Critical или Penthouse рендерят страницу в headless браузере и извлекают все CSS‑правила, которые применяются к элементам в области viewport. Можно также вручную проанализировать структуру страницы и выделить основные блоки.
Может не уместиться в первый TCP‑пакет, что снизит выгоду от техники. В таком случае попробуйте сократить критический CSS: удалите правила для неосновных элементов viewport (например, футер, боковые колонки, которые видны только после скролла).
Да. Но вам нужно либо генерировать critical CSS отдельно для мобильных и десктопных разрешений, либо включить стили для наиболее важных брейкпоинтов. Некоторые инструменты могут генерировать универсальный набор.
Косвенно — да. Поскольку страница отрисовывается быстрее, изображения и контейнеры с заданными размерами не сдвигаются после загрузки полного CSS. Но для CLS важнее прописать width/height и избегать динамических вставок.
Не обязательно, но это один из эффективных способов улучшить LCP и FCP, особенно на сайтах с тяжёлыми CSS-фреймворками (Bootstrap, Tailwind).
Прямые контакты
Обсудим ваш проект?
Расскажите о целях и сайте — предложу формат работы и следующий шаг.