Was ist Flash of Unstyled Content (FOUC)?

Flicker von ungestaltetem Inhalt (FOUC) ist die temporäre Anzeige des Inhalts einer Webseite im Browser, bevor die CSS-Stile angewendet werden. Dies geschieht aufgrund des sequenziellen Ladens und Verarbeitens von Ressourcen. Der Browser analysiert zunächst das HTML und beginnt, es anzuzeigen, und lädt dann die Stile aus externen CSS-Dateien oder dem <style>-Tag. In diesem Zeitraum sieht der Benutzer "nacktes" HTML.

Ursachen für FOUC:

Niedrige Netzgeschwindigkeit: Eine langsame Verbindung erhöht die Ladezeit des CSS.
Große CSS-Menge: Je größer die Styles, desto länger dauert das Laden und Parsen.
Blockierende Styles: Wenn Styles nach dem HTML eingebunden werden, kann der Browser mit dem Rendern beginnen, bevor sie vollständig geladen sind.
JavaScript, das CSS modifiziert: Skripte, die Styles dynamisch hinzufügen oder ändern, können FOUC verursachen.

Typische Szenarien von FOUC:

Text wird mit der Standardschrift des Browsers angezeigt und ändert sich dann abrupt auf die in CSS festgelegte.
Elemente setzen ihre Positionierung oder Sichtbarkeit zurück.
Das Layout "zerfällt" und wird dann neu aufgebaut.

Methoden zur Verhinderung von FOUC:

CSS im <head> einbinden: Dies ist die effektivste Methode. Browser pausieren das Rendern, bis alle im <head> definierten Styles geladen sind, wenn sie als blockierend markiert sind (Standard bei <link rel="stylesheet">).

<!-- Richtig: CSS im head -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Meine Seite</title>
</head>
<body>
    <!-- Inhalt -->
</body>

<!-- Falsch: CSS im body (kann FOUC verursachen) -->
<head>
    <title>Meine Seite</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Inhalt -->
</body>

Kritische Inline-Styles: Die wichtigsten Styles direkt im <style>-Tag im <head> einzufügen, ermöglicht eine schnelle Anwendung des Grundlayouts vor dem Laden externer Stylesheets.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Kritische Styles */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Meine Seite</title>
</head>
<body>
    <!-- Inhalt -->
</body>

Verwendung von font-display: swap: Für Schriftarten, um das Flackern ungestalteter Texte (FOUT) zu vermeiden, wird die Systemschrift angezeigt, bis die benutzerdefinierte Schrift geladen ist.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Inhalte verstecken, bis die Styles geladen sind: JavaScript kann verwendet werden, um den Hauptinhalt zu verbergen, bis alle Styles geladen sind (weniger empfehlenswert wegen JS-Abhängigkeit und möglicher Verzögerung).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Inhalt -->
  <script>
    // Beispiel: Body nach dem Laden der Styles anzeigen
    // In echten Bedingungen ist eine genauere Überwachung des CSS-Ladens erforderlich
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC wirkt sich negativ auf die Benutzererfahrung und die Wahrnehmung der Seite als "kaputt" oder langsam aus, daher ist seine Minimierung ein wichtiger Teil der Frontend-Optimierung.