Čo je to Flash of Unstyled Content (FOUC)?

Blik neformátovaného obsahu (FOUC) je krátkodobé zobrazenie obsahu webovej stránky v prehliadači predtým, ako sa aplikujú štýly CSS. To sa deje kvôli sekvenčnému načítaniu a spracovaniu zdrojov. Prehliadač najskôr analyzuje HTML a začína ho zobrazovať, potom načítava a aplikuje štýly z externých CSS súborov alebo <style> tagu. Počas tohto obdobia používateľ vidí "holý" HTML bez formátovania.

Príčiny FOUC:

Nízka rýchlosť siete: Pomalé spojenie predlžuje čas načítania CSS.
Veľký objem CSS: Čím väčšia je veľkosť štýlov, tým dlhšie trvá ich načítanie a analýza.
Blokujúce štýly: Ak sú štýly pripojené po HTML, prehliadač môže začať renderovať skôr, ako sú úplne načítané.
JavaScript, ktorý modifikuje CSS: Skripty, ktoré dynamicky pridávajú alebo menia štýly, môžu spôsobiť FOUC.

Typické scenáre FOUC:

Text sa zobrazuje štandardným písmom prehliadača a potom náhle zmení na nastavené v CSS.
Elementy strácajú svoje pozicionovanie alebo viditeľnosť.
Mriežka rozloženia "sa rozpadá" a potom sa znovu skladá.

Spôsoby prevencie FOUC:

Pripojenie CSS v <head>: Toto je najúčinnejší spôsob. Prehliadače zastavujú renderovanie, kým sa neukladajú všetky štýly definované v <head>, ak sú označené ako blokujúce (predvolené pre <link rel="stylesheet">).

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

<!-- Nesprávne: CSS v body (môže spôsobiť FOUC) -->
<head>
    <title>Moja stránka</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Obsah -->
</body>

Inline kritické štýly: Priame vloženie základných štýlov do <style> v <head> umožňuje rýchlo aplikovať základné usporiadanie pred načítaním externých štýlových listov.

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

Použitie font-display: swap: Pre písma, aby sa predišlo bliku neformátovaného textu (FOUT), sa zobrazí systémové písmo, kým sa nenačíta vlastné.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Skryť obsah do načítania štýlov: Môže sa použiť JavaScript na skrytie hlavného obsahu, kým sa nenačítajú všetky štýly (menej preferovaná metóda kvôli závislosti od JS a možnému spomaleniu).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Obsah -->
  <script>
    // Príklad: zobrazenie body po načítaní štýlov
    // V reálnych podmienkach je potrebné složitejšie sledovanie načítania CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC negatívne ovplyvňuje používateľskú skúsenosť a vnímanie stránky ako "zlomeného" alebo pomalého, preto je jeho minimalizácia dôležitou súčasťou front-end optimalizácie.