Unstyled Content (FOUC) Hızlı Görünümü Nedir…

Stilsiz İçeriğin Anlık Parlaması (FOUC), CSS stilleri uygulanmadan önce tarayıcıda web sayfasının içeriğinin geçici görüntüsüdür. Bu, kaynakların ardışık yüklenmesi ve işlenmesi nedeniyle olur. Tarayıcı önce HTML'yi analiz eder ve görüntülemeye başlar, ardından harici CSS dosyalarından veya <style> etiketi içinden stilleri yükler ve uygular. Bu aralıkta kullanıcı "çıplak" HTML görür.

FOUC nedenleri:

Düşük ağ hızı: Yavaş bağlantı, CSS'nin yüklenme süresini artırır.
Büyük CSS hacmi: Stil boyutu ne kadar büyükse, yükleme ve analiz süresi o kadar uzun olur.
Engelleyici stiller: Stiller HTML'den sonra bağlanırsa, tarayıcı tamamen yüklenmeden render etmeye başlayabilir.
CSS'yi değiştiren JavaScript: Dinamik olarak stil ekleyen veya değiştiren betikler FOUC'ye neden olabilir.

Tipik FOUC senaryoları:

Metin, tarayıcının varsayılan fontuyla gösterilir ve sonra CSS'de belirlenen fonta ani şekilde değişir.
Öğeler konumlandırma veya görünürlüğü sıfırlar.
Düzen "dağılır" ve sonra yeniden yapılandırılır.

FOUC'yi önlemenin yolları:

CSS'yi <head> içinde bağlama: Bu en etkili yoldur. Tarayıcılar, <head> içindeki tüm stiller yüklenene kadar render'ı durdurur (varsayılan olarak <link rel="stylesheet"> için).

<!-- Doğru: CSS head'te -->
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Sayfam</title>
</head>
<body>
    <!-- İçerik -->
</body>

<!-- Yanlış: CSS body'de (FOUC'ye neden olabilir) -->
<head>
    <title>Sayfam</title>
</head>
<body>
    <link rel="stylesheet" href="styles.css">
    <!-- İçerik -->
</body>

Kritik inline stiller: Temel stilleri doğrudan <style> etiketi içine yerleştirmek, temel düzeni hızlıca uygulamaya olanak tanır.

<head>
    <style>
        body { font-family: sans-serif; }
        /* Kritik stiller */
    </style>
    <link rel="stylesheet" href="styles.css">
    <title>Sayfam</title>
</head>
<body>
    <!-- İçerik -->
</body>

font-display: swap kullanımı: Yazı tipleri için, stilize edilmemiş metinlerin flaşını (FOUT) önlemek amacıyla, özel font yüklenene kadar sistem fontu gösterilir.
```
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2');
  font-display: swap;
}
```

Stil yüklenene kadar içeriği gizleme: JavaScript kullanılarak, tüm stiller yüklenene kadar ana içerik gizlenebilir (JS bağımlılığı ve olası yavaşlama nedeniyle daha az önerilir).

<style>
  .hidden { display: none; }
</style>
<body class="hidden">
  <!-- İçerik -->
  <script>
    // Örnek: stiller yüklendikten sonra body gösterilir
    // Gerçek koşullarda, CSS yüklemesini daha yakından izlemek gerekir
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.remove('hidden');
    });
  </script>
</body>

FOUC, kullanıcı deneyimini olumsuz etkiler ve siteyi "kırık" veya yavaş olarak algılamasına neden olur, bu nedenle minimize edilmesi frontend optimizasyonunun önemli bir parçasıdır.

Unstyled Content (FOUC) Hızlı Görünümü Nedir?