Ответ
FOUC возникает из-за порядка загрузки и обработки ресурсов. Даже если стили в одном файле, браузер может начать рендерить DOM до полной загрузки CSS. Это особенно заметно при:
- Большом CSS-файле с медленной загрузкой
- Использовании
@importвнутри CSS - Отсутствии предзагрузки (
<link rel="preload">)
Пример плохого подхода:
<head>
<!-- Стиль загружается долго -->
<link href="big-styles.css" rel="stylesheet">
</head>Решение - предзагрузка и правильное размещение:
<head>
<link rel="preload" href="styles.css" as="style">
<link href="styles.css" rel="stylesheet">
<!-- Или инлайновые критические стили -->
<style>/* critical CSS */</style>
</head>Также помогает минификация CSS и HTTP/2 для быстрой доставки.