Mis on Flash of Unstyled Content (FOUC)?

Stilsitu ilma nähtavuse hetk (FOUC) on ajutine veebilehe sisu kuvamine brauseris enne, kui sellele rakendatakse CSS- stiile. See toimub ressursside järjepideva laadimise ja töötlemise tõttu. Brauser esmalt parsib HTML-i ja hakkab seda kuvama ning seejärel laadib ja rakendab stiile välisest CSS-failist või <style>-elemendist. Selle aja jooksul näeb kasutaja "puhta" HTML-i ilma vorminduseta.

FOUC-i põhjused:

Võrgu kiiruse puudulikkus: aeglane ühendus suurendab CSS-i laadimisaega.
Suur CSS-i maht: mida suurem on stiilide suurus, seda kauem need laaditakse ja parsitakse.
Blokeerivad stiilid: kui stiilid on ühendatud pärast HTML-i, võib brauser alustada renderdamist enne nende täielikku laadimist.
JavaScript, mis muudab CSS-i: skriptid, mis dünaamiliselt lisavad või muudavad stiile, võivad põhjustada FOUC.

Tüüpilised FOUC stsenaariumid:

Tekst kuvatakse brauseri vaikimisi fondiga ning seejärel järsult muudetakse CSS-i määratud fondiks.
Elemendid kaotavad oma positsioneerimise või nähtavuse.
Paigutusvõrk "puruneb" ning seejärel korrastatakse.

FOUC-i ennetamise viisid:

CSS ühendamine <head>-sse: see on kõige tõhusam viis. Brauserid peatavad renderdamise enne kõigi stiilide laadimist, mis on märgitud <head>-s (vaikimisi <link rel="stylesheet">).

<!-- Õige: CSS `<head>`-s -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Minu leht</title>
</head>
<body>
    <!-- Sisu -->
</body>

<!-- Vale: CSS `<body>`-s (võib põhjustada FOUC) -->
<head>
    <title>Minu leht</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Sisu -->
</body>

Kriitiliste stiilide sisestamine: põhiliste stiilide otse <style>-s <head>-s võimaldab kiiresti rakendada põhivormindust enne väliste stiilide laadimist.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Kriitilised stiilid */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Minu leht</title>
</head>

`font-display: swap`` kasutamine: fondidele, et vältida ilma stiilita teksti (FOUT) nähtavust, kuni kohandatud font laaditakse, kuvatakse süsteemifont.
```
@font-face {
  font-family: 'MinuKohandatudFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Sisu varjamine enne stiilide laadimist: saab kasutada JavaScripti, et varjata põhisisu enne kõigi stiilide laadimist (vähem soovitatav meetod JS-ile sõltuvuse ja võimalikku aeglustumise tõttu).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Sisu -->
  <script>
    // Näide: näidata body pärast stiilide laadimist
    // Reaalses olukorras on vaja keerukamat CSS-i laadimise jälgimist
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC mõjutab negatiivselt kasutajakogemust ning tajumist kui "katkist" või aeglast veebilehte, seetõttu on selle minimeerimine oluline front-end optimeerimise osa.