Τι είναι το Flash of Unstyled Content (FOUC)…

Το Flash of Unstyled Content (FOUC) είναι η προσωρινή εμφάνιση του περιεχομένου μιας ιστοσελίδας στον browser πριν εφαρμοστούν τα στυλ CSS. Αυτό συμβαίνει λόγω της διαδοχικής φόρτωσης και επεξεργασίας των πόρων. Ο browser πρώτα αναλύει το HTML και αρχίζει να το εμφανίζει, και στη συνέχεια φορτώνει και εφαρμόζει τα στυλ από εξωτερικά αρχεία CSS ή το <style> tag. Κατά τη διάρκεια αυτής της περιόδου, ο χρήστης βλέπει το "γυμνό" HTML χωρίς μορφοποίηση.

Αιτίες FOUC:

Χαμηλή ταχύτητα δικτύου: Η αργή σύνδεση αυξάνει το χρόνο φόρτωσης του CSS.
Μεγάλο μέγεθος CSS: Όσο μεγαλύτερο το μέγεθος των στυλ, τόσο περισσότερο χρόνο παίρνει η φόρτωση και η ανάλυσή τους.
Αποκλειστικά στυλ: Αν τα στυλ συνδέονται μετά το HTML, ο browser μπορεί να αρχίσει την απόδοση πριν από την πλήρη φόρτωση τους.
JavaScript που τροποποιεί το CSS: Scripts που προσθέτουν ή αλλάζουν δυναμικά στυλ μπορεί να προκαλέσουν FOUC.

Τυπικά σενάρια FOUC:

Το κείμενο εμφανίζεται με τη προεπιλεγμένη γραμματοσειρά του browser και στη συνέχεια αλλάζει απότομα στη ρυθμισμένη στη CSS.
Τα στοιχεία επαναφέρουν τη θέση ή την ορατότητά τους.
Το πλέγμα διατάξεων "σπάει" και στη συνέχεια επανασυντίθεται.

Τρόποι αποτροπής FOUC:

Σύνδεση CSS στο <head>: Αυτή είναι η πιο αποτελεσματική μέθοδος. Οι browsers σταματούν την απόδοση μέχρι να φορτωθούν όλα τα στυλ που ορίζονται στο <head>, ειδικά αν είναι μπλοκαριστικά (προεπιλογή για <link rel="stylesheet">).

<!-- Σωστό: CSS στο head -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>My Page</title>
</head>
<body>
    <!-- Περιεχόμενο -->
</body>

<!-- Λάθος: CSS στο body (μπορεί να προκαλέσει FOUC) -->
<head>
    <title>My Page</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Περιεχόμενο -->
</body>

Ενσωματωμένα κρίσιμα στυλ: Η άμεση εισαγωγή βασικών στυλ μέσα στο <style> στο <head> επιτρέπει την γρήγορη εφαρμογή βασικής μορφοποίησης πριν από τη φόρτωση των εξωτερικών φύλλων στυλ.
```
<head>
    <style>
        body { font-family: sans-serif; }
        /* Κρίσιμα στυλ */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>My Page</title>
</head>
<body>
    
</body>
```
Χρήση font-display: swap: Για γραμματοσειρές, ώστε να αποφευχθεί το flash of unstyled text (FOUT), εμφανίζεται η συστημική γραμματοσειρά μέχρι να φορτωθεί η προσαρμοσμένη.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Κρύψιμο περιεχομένου μέχρι να φορτωθούν τα στυλ: Μπορεί να χρησιμοποιηθεί JavaScript για να κρύψει το κύριο περιεχόμενο μέχρι να φορτωθούν όλα τα στυλ (λιγότερο προτιμητέα μέθοδος λόγω εξάρτησης από JS και πιθανής επιβράδυνσης).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Περιεχόμενο -->
  <script>
    // Παράδειγμα: εμφάνιση του body μετά τη φόρτωση των στυλ
    // Στην πραγματικότητα, χρειάζεται πιο πολύπλοκη παρακολούθηση φόρτωσης CSS
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

Το FOUC επηρεάζει αρνητικά την εμπειρία χρήστη και την αντίληψη του ιστότοπου ως "σπασμένου" ή αργού, επομένως η ελαχιστοποίησή του αποτελεί σημαντικό μέρος της front-end βελτιστοποίησης.

Τι είναι το Flash of Unstyled Content (FOUC);