Flash of Unstyled Content (FOUC) — это кратковременное отображение содержимого веб-страницы в браузере до того, как к нему применятся стили CSS. Это происходит из-за последовательной загрузки и обработки ресурсов. Браузер сначала парсит HTML и начинает отображать его, а затем загружает и применяет стили из внешних CSS файлов или тега <style>. В этот промежуток пользователь видит "голый" HTML без форматирования.

Причины FOUC:

Низкая скорость сети: Медленное соединение увеличивает время загрузки CSS.
Большой объем CSS: Чем больше размер стилей, тем дольше они загружаются и парсятся.
Блокирующие стили: Если стили подключены после HTML, браузер может начать рендеринг до их полной загрузки.
JavaScript, модифицирующий CSS: Скрипты, которые динамически добавляют или изменяют стили, могут вызвать FOUC.

Типичные сценарии FOUC:

Текст отображается стандартным шрифтом браузера, а затем резко меняется на заданный в CSS.
Элементы сбрасывают свое позиционирование или видимость.
Сетка макета "рассыпается", а потом выстраивается.

Способы предотвращения FOUC:

Подключение CSS в <head>: Это самый эффективный способ. Браузеры приостанавливают рендеринг до загрузки всех стилей, определенных в <head>, если они помечены как блокирующие (по умолчанию для <link rel="stylesheet">).

<!-- Правильно: CSS в head -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>My Page</title>
</head>
<body>
    <!-- Content -->
</body>

<!-- Неправильно: CSS в body (может вызвать FOUC) -->
<head>
    <title>My Page</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Content -->
</body>

Инлайн критические стили: Вставка основных стилей непосредственно в тег <style> в <head> позволяет быстро применить базовое оформление до загрузки внешних таблиц стилей.
```
<head>
    <style>
        body { font-family: sans-serif; }
        /* Критические стили */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>My Page</title>
</head>
<body>
    
</body>
```
Использование font-display: swap: Для шрифтов, чтобы избежать flash of unstyled text (FOUT), пока не загрузится кастомный шрифт, показывается системный.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Прятать контент до загрузки стилей: Можно использовать JavaScript, чтобы скрыть основное содержимое до тех пор, пока не загрузятся все стили (менее предпочтительный метод из-за зависимости от JS и возможного замедления).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Content -->
  <script>
    // Пример: показать body после загрузки стилей
    // В реальных условиях нужно сложнее отслеживать загрузку CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC негативно сказывается на пользовательском опыте и восприятии сайта как "сломанного" или медленного, поэтому его минимизация является важной частью фронтенд-оптимизации.

Что такое Flash of Unstyled Content (FOUC)?