Kas yra Flash of Unstyled Content (FOUC)?

Nepakloto neapipavidalinio turinio (FOUC) — tai laikinas interneto puslapio turinio rodymas naršyklėje iki tol, kol jis bus pritaikytas CSS stiliais. Tai įvyksta dėl išteklių nuoseklaus įkėlimo ir apdorojimo. Naršyklė pirmiausia analizuoja HTML ir pradeda jį rodyti, o tada įkelia ir taiko stilius iš išorinių CSS failų arba <style> žymės. Šiuo laikotarpiu vartotojas mato "švarų" HTML be formatavimo.

FOUC priežastys:

Mažas tinklo greitis: lėtas ryšys padidina CSS įkėlimo laiką.
Didelis CSS kiekis: kuo didesnis stilių dydis, tuo ilgiau jie įkeliami ir analizuojami.
Blokuojantys stiliai: jei stiliai yra prijungti po HTML, naršyklė gali pradėti atvaizdą prieš juos pilnai įkeliant.
JavaScript, modifikuojantis CSS: scenarijai, kurie dinamiškai prideda arba keičia stilius, gali sukelti FOUC.

Tipiniai FOUC scenarijai:

Tekstas rodomas naršyklės numatytu šriftu, o tada staiga pakeičiamas CSS nustatytu.
Elementai atstatomi savo pozicionavimą arba matomumą.
Maketo tinklelis "sprogsta", o tada susidėlioja.

FOUC prevencijos būdai:

CSS prijungimas <head>: tai efektyviausias būdas. Naršyklės sustabdo atvaizdą iki visų stilių įkėlimo, jei jie pažymėti kaip blokuojantys (numatyta <link rel="stylesheet">).

<!-- Teisingai: CSS `<head>` -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Mano Puslapis</title>
</head>
<body>
    <!-- Turinys -->
</body>

<!-- Neteisingai: CSS `<body>` (gali sukelti FOUC) -->
<head>
    <title>Mano Puslapis</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Turinys -->
</body>

Kritinių stilių įterpimas: pagrindinių stilių įterpimas tiesiogiai į <style> žymę <head> leidžia greitai taikyti bazinį formatavimą iki išorinių stilių įkėlimo.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Kritiniai stiliai */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Mano Puslapis</title>
</head>

Naudojant font-display: swap: šriftams, siekiant išvengti neapipavidalinto teksto (FOUT), kol neįkeltas individualus šriftas, rodomas sisteminis.
```
@font-face {
  font-family: 'ManoKreiptasŠriftas';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Paslėpti turinį iki stilių įkėlimo: galima naudoti JavaScript, kad paslėpti pagrindinį turinį iki visų stilių įkėlimo (mažiau pageidautinas metodas dėl priklausomybės nuo JS ir galimo sulėtėjimo).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Turinys -->
  <script>
    // Pavyzdys: parodyti body po stilių įkėlimo
    // Realiomis sąlygomis reikia sudėtingesnio CSS įkėlimo stebėjimo
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC neigiamai veikia vartotojo patirtį ir suvokimą kaip "sulūžusio" ar lėto tinklalapio, todėl jo minimizavimas yra svarbi frontend optimizacijos dalis.