Ce este Flash of Unstyled Content (FOUC)?

Strălucirea conținutului fără stil (FOUC) este afișarea temporară a conținutului unei pagini web în browser înainte ca stilurile CSS să fie aplicate. Acest lucru se întâmplă din cauza încărcării și procesării secvențiale a resurselor. Browserul analizează mai întâi HTML-ul și începe să îl afișeze, apoi încarcă și aplică stilurile din fișiere CSS externe sau din eticheta <style>. În această perioadă, utilizatorul vede HTML "gol".

Cauzele FOUC:

Viteză scăzută a rețelei: O conexiune lentă crește timpul de încărcare al CSS-ului.
Volum mare de CSS: Cu cât dimensiunea stilurilor este mai mare, cu atât mai mult durează încărcarea și analizarea.
Stiluri blocante: Dacă stilurile sunt conectate după HTML, browserul poate începe randarea înainte ca acestea să fie complet încărcate.
JavaScript care modifică CSS: Scripturile care adaugă sau schimbă stilurile dinamic pot cauza FOUC.

Scenarii tipice FOUC:

Textul este afișat cu fontul implicit al browserului și apoi se schimbă brusc la cel definit în CSS.
Elementele își resetează poziționarea sau vizibilitatea.
Grila de aspect "se destramă" și apoi se reconstruiește.

Modalități de prevenire a FOUC:

Conectarea CSS în <head>: Este cea mai eficientă metodă. Browserele opresc randarea până când toate stilurile definite în <head> sunt încărcate, dacă sunt marcate ca blocante (implicit pentru <link rel="stylesheet">).

<!-- Corect: CSS în head -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Pagina Mea</title>
</head>
<body>
    <!-- Conținut -->
</body>

<!-- Greșit: CSS în body (poate cauza FOUC) -->
<head>
    <title>Pagina Mea</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Conținut -->
</body>

Stiluri critice inline: Inserarea stilurilor principale direct în eticheta <style> din <head> permite aplicarea rapidă a aspectului de bază înainte de încărcarea foilor de stil externe.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Stiluri critice */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Pagina Mea</title>
</head>
<body>
    <!-- Conținut -->
</body>

Utilizarea font-display: swap: Pentru fonturi, pentru a evita flicker-ul textului fără stil (FOUT), se afișează fontul sistemului până când se încarcă fontul personalizat.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Ascunderea conținutului până la încărcarea stilurilor: Se poate folosi JavaScript pentru a ascunde conținutul principal până când toate stilurile sunt încărcate (mai puțin recomandat din cauza dependenței de JS și a posibilei încetiniri).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Conținut -->
  <script>
    // Exemplu: afișează body după încărcarea stilurilor
    // În condiții reale, trebuie monitorizat mai atent încărcarea CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC afectează negativ experiența utilizatorului și percepția site-ului ca fiind "stricat" sau lent, așa că minimizarea sa este o parte importantă a optimizării frontend.