intermediate

Critical CSS

Приоритизируйте стили above-the-fold, избегайте избыточного blocking CSS и аккуратно разделяйте некритичные стили.

Critical CSS — минимум стилей для быстрого first meaningful paint above-the-fold. Полные stylesheet блокируют рендер: браузер может отложить paint, пока CSS не скачан и разобран.

Стратегии: inline только критичных правил в HTML, асинхронная загрузка остального, split CSS по маршрутам, удаление неиспользуемых селекторов на сборке. Баланс с раздуванием HTML, фрагментацией cache и поддержкой при смене компонентов.

					<head>
  <style>/* небольшие above-the-fold правила */</style>
  <link rel="preload" href="/app.css" as="style" onload="this.rel='stylesheet'">
</head>

Связывайте решения с LCP и CLS — типографика hero и стабильность layout важнее декора далеко ниже fold.

На интервью: компромиссы inline, code splitting, unused CSS и измерение реального render blocking.

Типовые ошибки: inline целых фреймворков; агрессивный split с FOUC; оптимизация CSS до доказательства блокировки paint.

Чеклист:

Render blocking в DevTools и Web Vitals.
Inline только маленьких стабильных critical rules.
Кеш общего CSS между маршрутами.
Аудит неиспользуемых стилей в production.