Kritik CSS (Critical CSS) Nedir?
Kısa tanım
Kritik CSS, sayfanın ilk ekranda görünen bölümünü çizmek için gereken stil kurallarının ayıklanıp HTML içine satır içi yazılması, geri kalan stillerin ise render'ı engellemeyecek biçimde sonradan yüklenmesi tekniğidir. Amaç, tarayıcının harici CSS dosyasını beklemeden ilk içeriği çizebilmesidir. Satır içi stilin önbelleğe alınamaması ve bakım yükü bu tekniğin başlıca ödünleridir.
Diğer adları: Critical CSS, kritik stil, inline critical CSS, satır içi kritik CSS
CSS neden ilk çizimi bekletir?
Tarayıcı, <head> içindeki stil dosyalarının tamamını indirip işleyene kadar sayfayı çizmez. Bu bilinçli bir tercihtir: aksi hâlde kullanıcı önce stilsiz bir sayfa görür, ardından her şey yerine oturur. Bedeli ise şudur: 150 KB'lık tek bir site geneli CSS dosyası, ilk ekranda kullanılan kurallar bunun küçük bir bölümü olsa bile, ilk çizimi dosyanın son baytına kadar bekletir. Bu durum kritik render yolu üzerindeki en yaygın darboğazlardan biridir.
Kritik CSS yaklaşımı bu dosyayı ikiye ayırır: ilk görünüm için gereken küçük bir parça HTML'le birlikte hemen gelir, büyük kalan kısım ise render'ı durdurmadan arkadan yüklenir.
Uygulamada nasıl görünür?
<head>
<style>
/* Yalnızca ilk ekran: üst menü, hero, temel tipografi */
body{margin:0;font-family:system-ui,sans-serif}
.ust-menu{display:flex;align-items:center;height:64px}
.hero{min-height:60vh}
</style>
<link rel="preload" href="/css/site.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/site.css"></noscript>
</head>Satır içi <style> bloğu ilk çizimi mümkün kılar. Tam stil dosyası preload ile engellemeden indirilir, yüklendiğinde rel değeri stylesheet olarak değiştirilir; noscript ise JavaScript çalışmayan ortamlar için yedektir. Bu kalıp satır içi bir olay işleyicisi kullandığından, satır içi script'lere izin vermeyen katı bir içerik güvenlik politikası altında çalışmaz; o durumda aynı iş harici bir script ile yapılmalıdır.
Hangi kuralların kritik olduğunu elle seçmek zahmetlidir. web.dev, sayfayı farklı ekran boyutlarında render edip görünür alana düşen kuralları çıkaran Critical, CriticalCSS ve Penthouse gibi araçları örnek gösterir. Mobil ve masaüstü ilk görünümleri farklı olduğundan çıkarımın birden fazla çözünürlükte yapılması gerekir.
14 KB kuralı
web.dev'in önerisi, ilk ekran içeriğini sıkıştırılmış hâlde 14 KB'ın altında tutmaktır. Gerekçe TCP'nin yavaş başlangıç (slow start) davranışıdır: sunucu yeni bir bağlantıda ilk gidiş-dönüşte yaklaşık bu kadar veri gönderebilir. HTML ve kritik CSS bu sınıra sığarsa tarayıcı ilk çizim için ikinci bir gidiş-dönüşü beklemez. Bu katı bir kural değil, kritik parçanın gerçekten küçük tutulması gerektiğini hatırlatan pratik bir ölçüttür.
Ödünler ve gereksiz kaldığı durumlar
- Önbellek kaybı: HTML'e gömülen stil, harici dosya gibi tarayıcı önbelleğinde tutulamaz ve her sayfa isteğinde yeniden gelir.
- Şişen HTML: Kritik parça büyüdükçe belgenin geri kalanının iletimi gecikir; "her şey kritikse hiçbir şey kritik değildir".
- Bakım ve kayma riski: Tasarım değiştiğinde güncellenmeyen kritik CSS, tam stil dosyası geldiğinde öğelerin yer değiştirmesine yol açar. Bu da CLS değerini bozar ve otomatik bir derleme adımını neredeyse zorunlu kılar.
- Zaten küçük CSS: Toplam stil dosyası birkaç kilobaytsa ve iyi önbelleğe alınıyorsa, ayrıştırma çabası ölçülebilir bir kazanç getirmeyebilir.
Karar vermeden önce sorunun gerçekten CSS olduğundan emin olun: FCP yavaşsa ve Lighthouse stil dosyasını render engelleyen kaynaklar arasında gösteriyorsa kritik CSS doğru araçtır. Yavaşlığın kaynağı sunucu yanıtıysa, stil düzenlemesi tek başına sonucu değiştirmez.