Qu'est-ce que le Flash of Unstyled Content (FOUC)…

Le Flash de Contenu Non Stylé (FOUC) est l’affichage temporaire du contenu d’une page web dans le navigateur avant l’application des styles CSS. Cela se produit en raison du chargement et du traitement séquentiel des ressources. Le navigateur analyse d’abord le HTML et commence à l’afficher, puis charge et applique les styles des fichiers CSS externes ou de la balise <style>. Pendant cet intervalle, l’utilisateur voit du HTML "nu".

Causes du FOUC :

Vitesse de réseau faible : Une connexion lente augmente le temps de chargement du CSS.
Grande taille du CSS : Plus la taille des styles est grande, plus leur chargement et leur analyse prennent de temps.
Styles bloquants : Si les styles sont connectés après le HTML, le navigateur peut commencer à rendre avant leur chargement complet.
JavaScript modifiant le CSS : Les scripts qui ajoutent ou modifient dynamiquement les styles peuvent causer le FOUC.

Scénarios typiques de FOUC :

Le texte s’affiche avec la police par défaut du navigateur, puis change brusquement pour celle définie dans le CSS.
Les éléments réinitialisent leur positionnement ou leur visibilité.
La grille de mise en page "se désagrège" puis se reconstruit.

Méthodes pour prévenir le FOUC :

Inclure le CSS dans <head> : C’est la méthode la plus efficace. Les navigateurs suspendent le rendu jusqu’à ce que tous les styles définis dans <head> soient chargés, s’ils sont marqués comme bloquants (par défaut pour <link rel="stylesheet">).

<!-- Correct : CSS dans head -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Ma Page</title>
</head>
<body>
    <!-- Contenu -->
</body>

<!-- Incorrect : CSS dans body (peut causer FOUC) -->
<head>
    <title>Ma Page</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Contenu -->
</body>

Styles critiques en ligne : Insérer les styles principaux directement dans la balise <style> dans <head> permet d’appliquer rapidement la mise en page de base avant le chargement des feuilles de style externes.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Styles critiques */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Ma Page</title>
</head>
<body>
    <!-- Contenu -->
</body>

Utiliser font-display: swap : Pour les polices, afin d’éviter le flash de texte non stylé (FOUT), la police système est affichée jusqu’à ce que la police personnalisée soit chargée.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Cacher le contenu jusqu’au chargement des styles : Il est possible d’utiliser JavaScript pour masquer le contenu principal jusqu’à ce que tous les styles soient chargés (moins recommandé en raison de la dépendance à JS et du ralentissement potentiel).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Contenu -->
  <script>
    // Exemple : afficher le body après le chargement des styles
    // En conditions réelles, il faut suivre plus précisément le chargement du CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

Le FOUC nuit à l’expérience utilisateur et à la perception du site comme étant "cassé" ou lent, donc sa minimisation est une partie importante de l’optimisation frontend.

Qu'est-ce que le Flash of Unstyled Content (FOUC) ?