Šta je Flash of Unstyled Content (FOUC)?

Bljesak neformatiranog sadržaja (FOUC) je kratkotrajno prikazivanje sadržaja veb stranice u pretraživaču pre nego što se primene CSS stilovi. To se dešava zbog sekvencijalnog učitavanja i obrade resursa. Pretraživač prvo parsira HTML i počinje da ga prikazuje, a zatim učitava i primenjuje stilove iz spoljašnjih CSS fajlova ili <style> taga. Tokom ovog perioda, korisnik vidi "goji" HTML bez formatiranja.

Razlozi FOUC:

Niska brzina mreže: Sporo povezivanje produžava vreme učitavanja CSS.
Velika veličina CSS: Što je veća veličina stilova, to duže traje njihovo učitavanje i parsiranje.
Blokirajući stilovi: Ako su stilovi povezani nakon HTML-a, pretraživač može početi renderovanje pre njihovog potpunog učitavanja.
JavaScript koji modifikuje CSS: Skripte koje dinamički dodaju ili menjaju stilove mogu izazvati FOUC.

Tipični scenariji FOUC:

Tekst se prikazuje standardnim fontom pretraživača, a zatim naglo menja na zadati u CSS-u.
Elementi gube svoje pozicioniranje ili vidljivost.
Mreža rasporeda "puca" i zatim se ponovo sastavlja.

Načini za sprečavanje FOUC:

Povezivanje CSS u <head>: Ovo je najučinkovitiji način. Pretraživači zaustavljaju renderovanje dok se svi stilovi ne učitaju u <head>, posebno ako su blokirajući (podrazumevano za <link rel="stylesheet">).

<!-- Ispravno: CSS u head-u -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Moj Sajt</title>
</head>
<body>
    <!-- Sadržaj -->
</body>

<!-- Pogrešno: CSS u body-ju (može izazvati FOUC) -->
<head>
    <title>Moj Sajt</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Sadržaj -->
</body>

Inline kritični stilovi: Direktno umetanje osnovnih stilova u <style> u <head> omogućava brzo primenjivanje osnovnog izgleda pre učitavanja eksternih stilskih listova.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Kritični stilovi */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Moj Sajt</title>
</head>
<body>
    <!-- Sadržaj -->
</body>

Korišćenje font-display: swap: Za fontove, kako bi se izbegao flash of unstyled text (FOUT), prikazuje se sistemski font dok se ne učita prilagođeni.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Skrivanje sadržaja do učitavanja stilova: Može se koristiti JavaScript za skrivanje glavnog sadržaja dok se svi stilovi ne učitaju (manje poželjna metoda zbog zavisnosti od JS i mogućeg usporavanja).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Sadržaj -->
  <script>
    // Primer: prikaz body nakon učitavanja stilova
    // U stvarnim uslovima potrebno je složenije praćenje učitavanja CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC negativno utiče na korisničko iskustvo i percepciju sajta kao "slomljenog" ili sporog, stoga je njegovo smanjenje važno za frontend optimizaciju.