О Вебе | ex. Frontender’s notes

IT и технологии · 19 июня 2026 г.

CSS без Flash of Unstyled Content: как балансировать критический CSS и отложенные стили... — 19 июня 2026 г. в 17:07:06

CSS без Flash of Unstyled Content: как балансировать критический CSS и отложенные стили в рантайме Критический CSS инлайн — First Paint за 200 мс, но тяжелый компонент с динамическим import('Modal.css') ломает картину. Пользователь видит сырой HTML на долю секунды. FOUC возвращается, если не управлять загрузкой в runtime. Runtime-подход через import() Динамический import() на уровне компонента ждет загрузку CSS перед монтированием. Без костылей с media="print" или preload, где поведение не всегда очевидно. const Modal = () => { const [cssLoaded, setCssLoaded] = useState(false); useEffect(() => { import('./Modal.css').then(() => setCssLoaded(true)); }, []); if (!cssLoaded) return null; return <div>...</div>; }; Компонент не рендерится, пока CSS не загружен. Критический CSS уже инлайн — First Paint мгновенный. Остальные стили подгружаются асинхронно, не блокируя поток. Почему import() эффективнее link с media import() работает через бандлер. Tree-shaking для CSS нативен — никаких костылей с переключением media после загрузки. Импорт резолвится как обычный модуль. Предсказуемо и чисто. Типичная ошибка и trade-offs Для SSR обязательно синхронизировать рендеринг с критическим CSS. Иначе гидратация дернется — FOUC вернется при клиентском монтировании. Если асинхронных CSS много, начнется network contention. Решение — расставить приоритеты через preload для самых критичных отложенных компонентов, чтобы не портить LCP. Вывод: Асинхронный import() CSS в паре с инлайн-критическим — рабочий способ избежать FOUC без блокировки рендеринга, но требует управления приоритетами загрузки для production-надежности.