Unstyled Content (FOUC) Nədir?

Unstyled Content Flash (FOUC) — bu brauzerdə veb səhifənin tərkibinin CSS üslubları tətbiq olunmadan əvvəl qısa müddətli göstərilməsidir. Bu, resursların ardıcıl yüklənməsi və işlənməsi səbəbindən baş verir. Brauzer əvvəlcə HTML-ni parçalayıb göstərməyə başlayır, sonra isə xarici CSS fayllarından və ya <style> teqindən üslubları yükləyir və tətbiq edir. Bu zaman istifadəçi "saf" HTML-ni, formatlaşdırma olmadan görür.

FOUC-nin səbəbləri:

Aşağı şəbəkə sürəti: Yavaş əlaqə CSS-in yüklənmə vaxtını artırır.
Böyük CSS həcmi: Üslubların ölçüsü nə qədər çox olarsa, yüklənmə və parçalayıcı vaxtı bir o qədər çox olur.
Bloklayan üslublar: Əgər üslublar HTML-dən sonra qoşulursa, brauzer onların tam yüklənməsindən əvvəl render etməyə başlaya bilər.
JavaScript, CSS-i dəyişdirən skriptlər: Dinamik olaraq üslubları əlavə edən və ya dəyişdirən skriptlər FOUC-yə səbəb ola bilər.

FOUC-nin tipik ssenariləri:

Mətn brauzerin standart şriftində göstərilir və sonra CSS-də təyin olunan şriftə kəskin dəyişir.
Elementlərin mövqeyi və ya görünüşü sıfırlanır.
Layout şəbəkəsi "dağılır" və sonra yenidən qurulur.

FOUC-ni qarşısını alma üsulları:

CSS-i <head>-də qoşmaq: Bu ən effektiv yoldur. Brauzerlər <head>-də blok edən (varsayılan olaraq <link rel="stylesheet"> üçün) bütün üslublar yüklənənə qədər render etməyi dayandırır.

<!-- Düzgün: CSS head-də -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Səhifəm</title>
</head>
<body>
    <!-- Məzmun -->
</body>

<!-- Yanlış: CSS body-də (FOUC-yə səbəb ola bilər) -->
<head>
    <title>Səhifəm</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- Məzmun -->
</body>

Kritik üslubların inline daxil edilməsi: Əsas üslubları <style> teqində <head>-ə daxil etmək, xarici üslublar yüklənənə qədər əsas dizaynı sürətlə tətbiq etməyə imkan verir.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Kritik üslublar */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Səhifəm</title>
</head>
<body>
    <!-- Məzmun -->
</body>

font-display: swap istifadə etmək: Xüsusilə xüsusi şrift yüklənməyincə, sistem şriftini göstərmək üçün istifadə olunur ki, unstyled mətnin flash-ı (FOUT) qarşısını alsın.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Məzmunu üslublar yüklənənə qədər gizlətmək: JavaScript istifadə edərək, bütün üslublar yüklənənə qədər əsas məzmunu gizlətmək mümkündür (bu, JS-ə bağlılıq və yavaşlamalar səbəbindən daha az üstünlük verilən üsuldur).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- Məzmun -->
  <script>
    // Nümunə: üslublar yükləndikdən sonra body-ni göstərmək
    // Əslində CSS yüklənməsini daha mürəkkəb izləmək lazımdır
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC istifadəçi təcrübəsinə və saytın "qırıq" və ya yavaş görünməsinə mənfi təsir göstərir, ona görə də onun minimallaşdırılması önəmli frontend optimizasiyasının bir hissəsidir.