Cos'è il Flash of Unstyled Content (FOUC)?

Il Flash di Contenuto Non Stilizzato (FOUC) è la visualizzazione temporanea del contenuto di una pagina web nel browser prima che vengano applicati gli stili CSS. Ciò avviene a causa del caricamento e dell'elaborazione sequenziale delle risorse. Il browser analizza prima l'HTML e inizia a visualizzarlo, quindi carica e applica gli stili dai file CSS esterni o dal tag <style>. In questo intervallo, l'utente vede HTML "nudo".

Cause del FOUC:

Bassa velocità di rete: Una connessione lenta aumenta il tempo di caricamento del CSS.
Grande volume di CSS: Più grande è la dimensione degli stili, più a lungo impiegano a caricarsi e analizzarsi.
Stili bloccanti: Se gli stili sono collegati dopo l'HTML, il browser può iniziare il rendering prima del loro caricamento completo.
JavaScript che modifica il CSS: Script che aggiungono o modificano dinamicamente gli stili possono causare FOUC.

Scenari tipici di FOUC:

Il testo viene visualizzato con il font predefinito del browser e poi cambia bruscamente a quello definito nel CSS.
Gli elementi reimpostano il loro posizionamento o visibilità.
La griglia di layout si "disfa" e poi si ricostruisce.

Modi per prevenire il FOUC:

Collegare il CSS nel <head>: È il metodo più efficace. I browser sospendono il rendering fino a quando tutti gli stili definiti in <head> sono caricati, se sono contrassegnati come bloccanti (di default per <link rel="stylesheet">).

<!-- Corretto: CSS in head -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>La mia pagina</title>
</head>
<body>
    <!-- Contenuto -->
</body>

<!-- Sbagliato: CSS in body (può causare FOUC) -->
<head>
    <title>La mia pagina</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Contenuto -->
</body>

Stili critici inline: Inserire gli stili principali direttamente nel tag <style> in <head> consente di applicare rapidamente il layout di base prima del caricamento dei fogli di stile esterni.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Stili critici */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>La mia pagina</title>
</head>
<body>
    <!-- Contenuto -->
</body>

Utilizzo di font-display: swap: Per i font, per evitare il flash di testo non stilizzato (FOUT), viene mostrato il font di sistema fino a quando non viene caricato quello personalizzato.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Nascondere i contenuti fino al caricamento degli stili: È possibile usare JavaScript per nascondere il contenuto principale fino a quando tutti gli stili non sono caricati (meno raccomandato a causa della dipendenza da JS e del possibile rallentamento).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Contenuto -->
  <script>
    // Esempio: mostrare il body dopo il caricamento degli stili
    // In condizioni reali, è necessario monitorare più attentamente il caricamento del CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

Il FOUC influisce negativamente sull’esperienza utente e sulla percezione del sito come "rotto" o lento, quindi la sua minimizzazione è una parte importante dell’ottimizzazione frontend.