Czym jest Flash of Unstyled Content (FOUC)?

Fala nieuporządkowanej treści (FOUC) to tymczasowe wyświetlanie zawartości strony internetowej w przeglądarce przed zastosowaniem stylów CSS. Dzieje się tak z powodu sekwencyjnego ładowania i przetwarzania zasobów. Przeglądarka najpierw analizuje HTML i zaczyna go wyświetlać, a następnie ładuje i stosuje style z zewnętrznych plików CSS lub tagu <style>. W tym okresie użytkownik widzi "goły" HTML.

Przyczyny FOUC:

Niska prędkość sieci: Wolne połączenie zwiększa czas ładowania CSS.
Duży rozmiar CSS: Im większy rozmiar stylów, tym dłużej się ładują i analizują.
Blokujące style: Jeśli style są dołączone po HTML, przeglądarka może rozpocząć renderowanie przed ich pełnym załadowaniem.
JavaScript modyfikujący CSS: Skrypty, które dynamicznie dodają lub zmieniają style, mogą powodować FOUC.

Typowe scenariusze FOUC:

Tekst jest wyświetlany domyślną czcionką przeglądarki, a następnie nagle zmienia się na zdefiniowaną w CSS.
Elementy resetują swoje pozycjonowanie lub widoczność.
Siatka układu "rozpada się", a potem jest odbudowywana.

Sposoby zapobiegania FOUC:

Podłączenie CSS w <head>: To najskuteczniejsza metoda. Przeglądarki wstrzymują renderowanie do czasu załadowania wszystkich stylów zdefiniowanych w <head>, jeśli są oznaczone jako blokujące (domyślnie dla <link rel="stylesheet">).

<!-- Poprawnie: CSS w head -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Moja strona</title>
</head>
<body>
    <!-- Zawartość -->
</body>

<!-- Niepoprawnie: CSS w body (może wywołać FOUC) -->
<head>
    <title>Moja strona</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Zawartość -->
</body>

Krytyczne style inline: Wstawienie głównych stylów bezpośrednio w tag <style> w <head> pozwala szybko zastosować podstawowe formatowanie przed załadowaniem zewnętrznych arkuszy stylów.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Krytyczne style */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Moja strona</title>
</head>
<body>
    <!-- Zawartość -->
</body>

Użycie font-display: swap: Dla czcionek, aby uniknąć migotania tekstu bez stylu (FOUT), wyświetla się systemową czcionkę, dopóki nie załaduje się czcionka niestandardowa.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Ukrywanie treści do czasu załadowania stylów: Można użyć JavaScript, aby ukryć główną zawartość do czasu załadowania wszystkich stylów (mniej zalecane ze względu na zależność od JS i potencjalne spowolnienie).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Zawartość -->
  <script>
    // Przykład: pokazanie body po załadowaniu stylów
    // W rzeczywistych warunkach trzeba dokładniej monitorować ładowanie CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC negatywnie wpływa na doświadczenie użytkownika i postrzeganie strony jako "zepsutej" lub wolnej, dlatego jego minimalizacja jest ważną częścią optymalizacji front-end.