Практическое руководство по critical CSS и его встраиванию

Подготовь практическое руководство по оптимизации сайта через извлечение и встраивание critical CSS. Текст должен быть компактным, но достаточно подробным для немедленного применения в типовых сценариях: статический сайт, SSR и SPA.

Обязательные разделы:
1. Что такое critical CSS и как он влияет на LCP, FCP и пользовательский опыт: 2-3 предложения.
2. Пошаговый workflow извлечения critical CSS:
- 3-4 популярных инструмента, например Penthouse, critical, Puppeteer, critters;
- точные npm или CLI-команды;
- ручной подход: как определить нужные селекторы и проверить результат;
- работа с несколькими viewport и приоритизация стилей.
3. Примеры кода:
- Node.js-скрипт или команды для Penthouse и или critical;
- пример вставки critical CSS в head, включая безопасный noscript fallback;
- шаблон отложенной загрузки остального CSS через preload, onload, stylesheet и при необходимости loadCSS.
4. Интеграция в сборку:
- короткий пример для Webpack;
- пример для Gulp, Grunt или CI-скрипта;
- краткая заметка по Next.js, Gatsby или React SPA.
5. Проверка и метрики:
- какие метрики смотреть: LCP, FCP, CLS и связанные показатели;
- чем измерять: Lighthouse, WebPageTest, npx lighthouse;
- как интерпретировать улучшения.
6. Пограничные случаи и предостережения:
- динамический контент;
- шрифты;
- FOUC;
- CSP;
- кеширование;
- размер inline CSS;
- множественные маршруты и страницы.
7. Короткий чек-лист действий из 5-8 пунктов и практические ориентиры, например допустимый размер встроенного CSS или частота регенерации.
8. Полезные ресурсы и инструменты: 3-6 ссылок с кратким описанием.

Требования:
- Объем: 500-900 слов.
- Разделы должны иметь короткие заголовки.
- Код и команды сделай готовыми к копированию.
- Тон: деловой и практический, без лишней теории и без встречных вопросов.