Kas ir Flash of Unstyled Content (FOUC)?

Nepārtraukts neapstrādāta satura mirklis (FOUC) — tas ir īslaicīgs tīmekļa lapas satura parādīšanās pārlūkprogrammā pirms tam, kamēr tas tiek piemērots ar CSS stiliem. Tas notiek, sakaru resursiem secīgi ielādējoties un apstrādājoties. Pārlūkprogramma vispirms parsē HTML un sāk to attēlot, pēc tam ielādē un piemēro stilus no ārējiem CSS failiem vai <style> elementa. Šajā laikā lietotājs redz "tīru" HTML bez formatējuma.

FOUC iemesli:

Zema tīkla ātruma: lēns savienojums palielina CSS ielādes laiku.
Liels CSS apjoms: jo lielāks stilu izmērs, jo ilgāks to ielādes un parsēšanas laiks.
Bloķējoši stili: ja stili ir pievienoti pēc HTML, pārlūkprogramma var sākt attēlot pirms to pilnas ielādes.
JavaScript, kas modificē CSS: skripti, kas dinamiski pievieno vai maina stilus, var izraisīt FOUC.

Tipiski FOUC scenāriji:

Teksts tiek parādīts ar pārlūkprogrammas noklusējuma fontu, pēc tam strauji mainās uz CSS noteikto.
Elementi zaudē savu pozicionēšanu vai redzamību.
Izkārtojuma režģis "sabrūk" un pēc tam atjaunojas.

FOUC novēršanas veidi:

CSS pievienošana <head>: tas ir visefektīvākais veids. Pārlūkprogrammas pārtrauc attēlošanu līdz visi stili ir ielādēti, ja tie ir bloķējoši (pēc noklusējuma <link rel="stylesheet">).

<!-- Pareizi: CSS `<head>` -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Mana lapa</title>
</head>
<body>
    <!-- Saturs -->
</body>

<!-- Nepareizi: CSS `<body>` (var izraisīt FOUC) -->
<head>
    <title>Mana lapa</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Saturs -->
</body>

Kritisko stilu iekļaušana: galveno stilu tieša ievietošana <style> elementā <head> ļauj ātri piemērot pamatkārtojumu pirms ārējo stilu ielādes.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Kritiskie stili */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Mana lapa</title>
</head>

`font-display: swap`` izmantošana: fontiem, lai izvairītos no neapstrādāta teksta mirkļa (FOUT), kamēr neielādēts pielāgotais fonts, tiek rādīts sistēmas fonts.
```
@font-face {
  font-family: 'ManaPielāgotāFonts';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Satura slēpšana pirms stilu ielādes: var izmantot JavaScript, lai paslēptu galveno saturu līdz visi stili ir ielādēti (mazāk vēlams, jo tas ir atkarīgs no JS un var palēnināt).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Saturs -->
  <script>
    // Piemērs: parādīt body pēc stilu ielādes
    // Reālās situācijās nepieciešams sarežģītāks CSS ielādes uzraudzība
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC negatīvi ietekmē lietotāja pieredzi un uztveri kā "salūzušu" vai lēnu vietni, tāpēc tās mazināšana ir svarīga front-end optimizācijas sastāvdaļa.