Critical CSS — минимальный набор правил для первого экрана; его часто инлайнят в <head>, а полный stylesheet грузят асинхронно.
Инструменты (critters, penthouse) автоматизируют извлечение, но требуют проверки на всех шаблонах.
- [Extract critical CSS — web.dev](https://web.dev/articles/extract-critical-css) — Подход и инструменты.
- [Defer non-critical CSS — web.dev](https://web.dev/articles/defer-non-critical-css) — Асинхронная загрузка остального CSS.
---
## Подводные камни
Инлайн CSS не кэшируется отдельно — держите объём critical в разумных пределах (обычно несколько KB).
При SPA с client-side routing critical per-route сложнее — приоритет на landing и checkout.