Wat is Flash of Unstyled Content (FOUC)?

Flash of Unstyled Content (FOUC) — dit is de korte weergave van de inhoud van een webpagina in de browser voordat de CSS-stijlen worden toegepast. Dit gebeurt door sequentieel laden en verwerken van bronnen. De browser parseert eerst de HTML en begint deze weer te geven, en laadt vervolgens de stijlen uit externe CSS-bestanden of de <style>-tag. In deze tussenperiode ziet de gebruiker HTML zonder opmaak.

Oorzaken van FOUC:

Lage netwerksnelheid: Een trage verbinding verhoogt de laadtijd van CSS.
Grote CSS-grootte: Hoe groter de stijl, hoe langer het laden en parseren.
Blokkerende stijlen: Als stijlen na HTML worden gekoppeld, kan de browser beginnen met renderen voordat ze volledig geladen zijn.
JavaScript dat CSS wijzigt: Scripts die stijlen dynamisch toevoegen of wijzigen, kunnen FOUC veroorzaken.

Typische scenario’s van FOUC:

Tekst wordt weergegeven met het standaardlettertype van de browser en verandert dan abrupt naar het in CSS gedefinieerde.
Elementen resetten hun positionering of zichtbaarheid.
Het lay-out raster "valt uit elkaar" en wordt daarna opnieuw opgebouwd.

Manieren om FOUC te voorkomen:

CSS in <head> koppelen: Dit is de meest effectieve methode. Browsers stoppen de rendering totdat alle stijlen in <head> geladen zijn, indien ze als blokkerend gemarkeerd zijn (standaard voor <link rel="stylesheet">).

<!-- Correct: CSS in head -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Mijn Pagina</title>
</head>
<body>
    <!-- Inhoud -->
</body>

<!-- Onjuist: CSS in body (kan FOUC veroorzaken) -->
<head>
    <title>Mijn Pagina</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Inhoud -->
</body>

Kritieke inline stijlen: Het direct plaatsen van de belangrijkste stijlen in de <style>-tag in <head> maakt snelle toepassing van de basislay-out mogelijk voordat externe stylesheets geladen zijn.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Kritieke stijlen */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Mijn Pagina</title>
</head>
<body>
    <!-- Inhoud -->
</body>

Gebruik van font-display: swap: Voor lettertypen, om het flikkeren van ongestileerde tekst (FOUT) te voorkomen, wordt het systeemlettertype getoond totdat het aangepaste lettertype geladen is.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Inhoud verbergen totdat stijlen geladen zijn: JavaScript kan gebruikt worden om de hoofdinhoud te verbergen totdat alle stijlen geladen zijn (minder aanbevolen vanwege afhankelijkheid van JS en mogelijke vertraging).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Inhoud -->
  <script>
    // Voorbeeld: body tonen na het laden van stijlen
    // In echte omstandigheden is het nodig om het laden van CSS nauwkeuriger te volgen
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC heeft een negatieve invloed op de gebruikerservaring en de perceptie van de site als "kapot" of traag, dus het minimaliseren ervan is een belangrijk onderdeel van frontend-optimalisatie.