Какво е Flash of Unstyled Content (FOUC)?

Мигване на неформатирано съдържание (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>Моята страница</title>
</head>
<body>
    <!-- Съдържание -->
</body>

<!-- Грешно: CSS в body (може да предизвика FOUC) -->
<head>
    <title>Моята страница</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Съдържание -->
</body>

Инлайн критични стилове: Вмъкването на основните стилове директно в <style> в <head> позволява бързо прилагане на базовото оформление преди зареждането на външните таблици със стилове.
```
<head>
    <style>
        body { font-family: sans-serif; }
        /* Критични стилове */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Моята страница</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">
  <!-- Съдържание -->
  <script>
    // Пример: показване на body след зареждане на стиловете
    // В реални условия трябва по-сложно проследяване на зареждането на CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC негативно влияе върху потребителския опит и възприятието на сайта като "счупен" или бавен, затова неговата минимизация е важна част от фронтенд оптимизацията.