Co je to Flash of Unstyled Content (FOUC)?

Rozsvícení neformátovaného obsahu (FOUC) je krátkodobé zobrazení obsahu webové stránky v prohlížeči před tím, než jsou aplikovány styly CSS. K tomu dochází kvůli sekvenčnímu načítání a zpracování zdrojů. Prohlížeč nejprve analyzuje HTML a začne jej zobrazovat, poté načítá a aplikuje styly z externích CSS souborů nebo <style> tagu. Během této doby uživatel vidí "holý" HTML bez formátování.

Příčiny FOUC:

Nízká rychlost sítě: Pomalejší spojení prodlužuje dobu načítání CSS.
Velké množství CSS: Čím větší je velikost stylů, tím déle trvá jejich načtení a analýza.
Blokující styly: Pokud jsou styly připojeny po HTML, může prohlížeč začít renderovat dříve, než jsou plně načteny.
JavaScript, který modifikuje CSS: Skripty, které dynamicky přidávají nebo mění styly, mohou způsobit FOUC.

Typické scénáře FOUC:

Text se zobrazuje standardním písmem prohlížeče a poté náhle změní na nastavené v CSS.
Elementy ztrácejí své pozicování nebo viditelnost.
Mřížka rozvržení "rozpadá" a poté se znovu skládá.

Způsoby prevence FOUC:

Připojení CSS v <head>: To je nejúčinnější způsob. Prohlížeče pozastavují vykreslování, dokud se nenačtou všechna stylová pravidla v <head>, pokud jsou označena jako blokující (výchozí pro <link rel="stylesheet">).

<!-- Správně: CSS v head -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Moje stránka</title>
</head>
<body>
    <!-- Obsah -->
</body>

<!-- Nesprávně: CSS v těle (může způsobit FOUC) -->
<head>
    <title>Moje stránka</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Obsah -->
</body>

In-line kritické styly: Přímé vložení základních stylů do <style> v <head> umožňuje rychle aplikovat základní vzhled před načtením externích stylových listů.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Kritické styly */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Moje stránka</title>
</head>
<body>
    <!-- Obsah -->
</body>

Použití font-display: swap: U písem, aby se předešlo záblesku neformátovaného textu (FOUT), se zobrazí systémové písmo, dokud se nenačte vlastní.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Skrytí obsahu do načtení stylů: Může být použito JavaScriptu k skrytí hlavního obsahu do doby, než se načtou všechny styly (méně preferovaná metoda kvůli závislosti na JS a možnému zpomalení).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Obsah -->
  <script>
    // Příklad: zobrazení těla po načtení stylů
    // V reálném prostředí je třeba složitější sledovat načítání CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC negativně ovlivňuje uživatelskou zkušenost a vnímání stránky jako "rozbité" nebo pomalé, proto je jeho minimalizace důležitou součástí front-end optimalizace.