Mi az a Flash of Unstyled Content (FOUC)?

A Stílus nélküli tartalom villanása (FOUC) rövid ideig tartó megjelenítése a weboldal tartalmának a böngészőben, mielőtt a CSS stílusokat alkalmaznák. Ez az erőforrások egymás utáni betöltése és feldolgozása miatt történik. A böngésző először elemzi a HTML-t és elkezdi megjeleníteni, majd betölti és alkalmazza a stílusokat külső CSS fájlokból vagy <style> tagből. Ez alatt az idő alatt a felhasználó a "nyers" HTML-t látja formázás nélkül.

FOUC okai:

Alacsony hálózati sebesség: A lassú kapcsolat növeli a CSS betöltési idejét.
Nagy CSS méret: Minél nagyobb a stílusok mérete, annál hosszabb a betöltési és elemzési idő.
Blokkoló stílusok: Ha a stílusokat HTML után csatlakoztatják, a böngésző a teljes betöltésük előtt kezdhet renderelni.
JavaScript, amely módosítja a CSS-t: Olyan szkriptek, amelyek dinamikusan adnak hozzá vagy módosítanak stílusokat, FOUC-t okozhatnak.

Tipikus FOUC forgatókönyvek:

A szöveg az alapértelmezett böngésző betűtípussal jelenik meg, majd hirtelen a CSS-ben megadott betűtípusra vált.
Az elemek pozíciója vagy láthatósága resetelésre kerül.
A rács "szétesik" és utána újra összeáll.

FOUC megelőzési módszerek:

CSS csatolása a <head>-hez: Ez a leghatékonyabb módszer. A böngészők megállítják a renderelést, amíg az összes stílus betöltődik a <head>-ben, különösen, ha blokkolóak (alapértelmezett a <link rel="stylesheet"> esetén).

<!-- Helyes: CSS a head-ben -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Oldalam</title>
</head>
<body>
    <!-- Tartalom -->
</body>

<!-- Helytelen: CSS a body-ben (FOUC-t okozhat) -->
<head>
    <title>Oldalam</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Tartalom -->
</body>

Kritikus stílusok inline beillesztése: A fő stílusokat közvetlenül a <style> tagbe helyezve a <head>-ben gyorsan alkalmazható az alapvető formázás a külső stíluslapok betöltése előtt.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Kritikus stílusok */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Oldalam</title>
</head>
<body>
    <!-- Tartalom -->
</body>

font-display: swap használata: A betűtípusok esetében, hogy elkerüljük az unstyled text villanását (FOUT), a rendszer betűtípusa jelenik meg, amíg a testreszabott betűtípus betöltődik.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Tartalom elrejtése a stílusok betöltéséig: JavaScript segítségével elrejthetjük a fő tartalmat, amíg minden stílus betöltődik (kevésbé preferált módszer, mivel JS-re és esetleges késleltetésre támaszkodik).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Tartalom -->
  <script>
    // Példa: a body megjelenítése a stílusok betöltése után
    // Valós környezetben bonyolultabb a CSS betöltésének nyomon követése
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

A FOUC negatívan befolyásolja a felhasználói élményt és a webhely "meghibásodott" vagy lassú benyomását kelti, ezért a minimalizálása fontos része a frontend optimalizációnak.