Critical CSS Nedir?

Sayılarla ne demek?

Tarayıcı, bir sayfayı ekrana çizmeden önce CSS dosyalarını indirip işlemek zorundadır; çünkü stiller bilinmeden içeriğin nasıl görüneceği hesaplanamaz. Bu yüzden head bölümündeki CSS dosyaları oluşturmayı engeller. Dosya büyükse ya da yavaş geliyorsa, kullanıcı içerik hazır olduğu halde beyaz bir ekran görür.

Kritik CSS bu bekleyişi kısaltır. İlk ekrandaki başlık, menü, ana görsel alanı ve ilk metin bloğu için gereken kurallar ayrıştırılır ve HTML'nin içine gömülür. Örneğin 160 KB'lık bir tema CSS'inin ilk ekran için gereken kısmı 10–12 KB olabilir. Tarayıcı bu küçük bölümü HTML ile birlikte aldığı için sayfayı hemen çizer, geri kalan CSS ise arka planda yüklenir.

Yöntem her site için gerekli değildir. CSS zaten küçükse, önbellekten geliyorsa ya da HTTP/2 ile hızlı yükleniyorsa kazanç sınırlıdır. Ayrıca kritik CSS her şablon için ayrı çıkarılmalı ve tasarım değiştikçe güncellenmelidir; aksi halde ilk ekran bir an stilsiz görünür ve düzen kayar.

Kritik CSS ne zaman değer?

Karar, laboratuvar ölçümüyle verilir: kritik CSS sonrası FCP ve LCP belirgin biçimde düşmüyorsa ek karmaşıklığa değmez.

Kritik CSS uygularken

1. Şablonları belirle. Ana sayfa, kategori, ürün, blog.
2. İlk ekran kurallarını otomatik çıkar. Derleme aracıyla.
3. Satır içi CSS'i küçük tut. Yalnızca gerçekten ilk ekranda olanlar.
4. Tam CSS'i engellemeden yükle. Ön yükleme ve ertelenmiş stil.
5. Mobil ve masaüstünü ayrı test et. İlk ekran farklıdır.

Uygulamada ne oluyor?

En sık durum, bütün CSS'in satır içine gömülmesi. Kritik CSS adıyla 150 KB'lık stil HTML'ye ekleniyor; HTML büyüyor ve dosya artık önbellekten yararlanamıyor.

İkinci gözlem, kritik CSS'in bir kez çıkarılıp unutulması. Tasarım değişiyor ama satır içi kurallar eski; ilk ekran bir an eski görünümle açılıp değişiyor.

Üçüncüsü, tek bir kritik CSS'in bütün şablonlara uygulanması. Ana sayfa için çıkarılan kurallar ürün sayfasında eksik kalıyor; ürün sayfası stilsiz açılıyor.

Dördüncüsü, stilsiz içerik anlık görünümü. Tam CSS geç geldiğinde düğmeler ve menüler bir an ham HTML olarak görünüyor; kullanıcı bozuk bir site sanıyor.

Beşincisi, düzen kayması. Kritik CSS'te boyutlar eksik; tam CSS gelince bloklar yer değiştiriyor ve CLS artıyor.

Altıncısı, web fontlarının hesaba katılmaması. İlk ekran stilleri hazır ama font geç geliyor; başlıklar yeniden kırılıyor ve metin zıplıyor.

Yedincisi, içerik güvenlik politikasının satır içi stilleri engellemesi. CSP kuralları inline stile izin vermiyor; kritik CSS hiç uygulanmıyor.

Sekizincisi, eklentiyle otomatik kritik CSS üretiminin kontrol edilmemesi. Araç her şablon için doğru kuralları çıkarıyor sanılıyor; bazı sayfalarda ilk ekran eksik kalıyor.

Dokuzuncusu, kazancın asıl sorunu gizlemesi. Kritik CSS ile FCP düşüyor ama LCP görseli hala geç geliyor; ana gecikme başka yerde ve çözülmüyor.

Onuncusu, CSS dosyasının küçültülmeden kullanılması. Kritik CSS yapılmış ama kod küçültme atlanmış; geri kalan dosya hala yorum ve kullanılmayan kurallarla dolu; toplam yük değişmiyor.

On birincisi, mobil ilk ekranın masaüstüne göre çıkarılması. Kurallar geniş ekran için hesaplanıyor; mobilde ilk görünen bileşenlerin stili eksik.

On ikincisi, ölçüm yapılmadan uygulanması. Karmaşık bir üretim süreci kuruluyor ama öncesi ve sonrası karşılaştırılmıyor; değişikliğin değeri kanıtlanamıyor.

Neyi çözmez?

Kritik CSS, yavaş sunucu yanıtını ya da geç keşfedilen LCP görselini düzeltmez. İlk ekranı hızlandırmak için TTFB ve görsel önceliği de ele alınmalıdır.

Sıkça sorulan sorular

Kritik CSS ne kadar büyük olmalı?

Mümkün olduğunca küçük; yalnızca ilk ekranda görünen öğelerin kuralları.

Her site kritik CSS kullanmalı mı?

Hayır; büyük CSS dosyaları ve yavaş ağlarda değerlidir, küçük sitelerde kazancı sınırlı olabilir.

Kritik CSS SEO'yu etkiler mi?

Doğrudan değil; FCP ve LCP'yi iyileştirerek sayfa deneyimine katkı sağlar.

Bu kavramın bütün resim içindeki yerini SEO Danışmanlığı Rehberi içinde ayrıntılı anlattım.