Sorun nedir?
CSS dosyaları render engelleyicidir: Tarayıcı, stil dosyası yüklenene kadar sayfayı çizmez. Büyük bir CSS dosyası, kullanıcının boş ekrana bakmasına neden olur.
Çözüm mantığı
İlk ekranda görünen kısım için gereken stiller, tüm CSS'in genellikle küçük bir bölümüdür. Bu bölümü ayırıp doğrudan HTML içine gömmek, sayfanın anında çizilmeye başlamasını sağlar.
<head>
<style>
/* Yalnızca ilk ekran için gereken stiller */
</style>
<!-- Geri kalan CSS engellemeden yüklenir -->
<link rel="preload" href="stil.css" as="style"
onload="this.rel='stylesheet'">
</head>Kazanım
- LCP belirgin şekilde iyileşir
- Kullanıcı içeriği daha erken görür
- Algılanan hız artar
- Yavaş bağlantılarda etkisi çok daha büyüktür
Zorlukları
- Hangi stillerin kritik olduğunu belirlemek — sayfa türüne göre değişir
- Bakım yükü: Tasarım değiştikçe kritik CSS güncellenmelidir
- Şablon çeşitliliği: Ana sayfa, ürün, blog için farklı kritik CSS gerekebilir
- Yanlış uygulama: Eksik stil, sayfanın bozuk görünmesine yol açar
Otomatikleştirme
Elle yönetmek sürdürülebilir değildir. Derleme sürecine entegre edilmiş otomatik araçlar veya bunu yerleşik olarak sunan altyapılar tercih edilmelidir.
Kime uygun?
| Değerli | Gereksiz olabilir |
|---|---|
| Büyük CSS dosyası olan siteler | Zaten hafif ve hızlı siteler |
| Mobil trafiği yüksek siteler | Küçük tanıtım siteleri |
| LCP sorunu olan sayfalar | Teknik kaynağı olmayan projeler |
| E-ticaret ürün ve kategori sayfaları |
Öncelik notu
Bu ileri düzey bir tekniktir. Görsel optimizasyonu, önbellekleme ve gereksiz betik temizliği yapılmadan buraya geçmek verimli değildir.
Ne anlama gelir?
Kritik CSS (critical CSS), bir sayfanın ilk görünen kısmını (ekranın üstünü) doğru göstermek için gereken minimum CSS'tir. Bu kritik CSS, sayfanın içine doğrudan gömülerek hemen uygulanır; geri kalan CSS ise ertelenir. Böylece sayfa, tüm stil dosyasının yüklenmesini beklemeden ilk görünümünü hızlıca çizebilir.
Neden gerekli?
Normalde tarayıcı, sayfayı çizmeden önce tüm CSS dosyasını indirip işlemek zorundadır; büyük bir CSS dosyası bu yüzden "render engelleyen" bir kaynak olur ve kullanıcı boş ekrana bakar. Kritik CSS yaklaşımı, yalnızca ilk görünüm için gerekli stili öne alıp gerisini ertelediği için, sayfanın algılanan yükleme hızını (özellikle LCP'yi) belirgin biçimde iyileştirir.
Nasıl uygulanır?
- İlk görünüm için gereken CSS belirlenir
- Bu kritik CSS sayfaya satır içi (inline) gömülür
- Geri kalan CSS asenkron olarak, engellemeden yüklenir
Gerçek örnek
Bir sitenin tek bir büyük CSS dosyası, sayfanın çizilmesini geciktiriyor ve kullanıcı kısa süre boş ekran görüyordu. İlk görünüm için gereken kritik CSS gömülüp gerisi ertelendiğinde, sayfa çok daha hızlı görünür hale geldi ve LCP iyileşti.
Özet
Kritik CSS, sayfanın ilk görünen kısmı için gereken minimum CSS'tir; sayfaya gömülüp gerisi ertelenir. Render engelleyen büyük CSS sorununu çözerek algılanan yükleme hızını ve LCP'yi iyileştirir.