Kritik CSS, bir sayfanın ilk ekranda görünen bölümünü çizmek için gereken en küçük stil kümesinin HTML içine gömülmesi, geri kalan stillerin ise sonradan yüklenmesi tekniğidir; tarayıcının ilk görüntüyü beklemeden çizmesini sağlar.
Tarayıcı bir sayfayı çizmeden önce bağlı tüm CSS dosyalarının inmesini bekler; bu dosyalar çizimi engelleyen kaynaklardır. Sitenin tamamı için yazılmış yüzlerce kilobaytlık bir stil dosyası, yalnızca ilk ekranı göstermek için bile baştan sona indirilmek zorundadır. Kritik CSS yaklaşımı bu bağımlılığı kırar: ilk ekran için gereken az sayıda kural doğrudan HTML'in içine yazılır, geri kalan stil dosyası çizimi engellemeyecek biçimde arkadan yüklenir. Böylece kullanıcı, tam stil dosyası gelmeden anlamlı bir görüntü görür. Kritik kümenin çıkarılması genellikle derleme aşamasında otomatik araçlarla yapılır.
İşletme sahibi için neden önemli
Sayfanın beyaz ekrandan içerikli ekrana geçiş süresi, kullanıcının hız algısını belirler. Kritik CSS, sunucu ya da görsel değişikliği gerektirmeden bu süreyi kısaltan bir ön yüz disiplinidir ve LCP üzerinde doğrudan etkilidir. Ancak bu teknik hazır temalarla ve kontrolsüz eklenti yığınlarıyla zor uygulanır; çünkü hangi stilin nerede kullanıldığı bilinmez. Kendi kod tabanıyla yazılan projelerde ise derleme sürecinin doğal bir parçası haline getirilebilir.
Örnek
Bir hukuk bürosunun sitesi, tek bir 380 kilobaytlık CSS dosyası kullanıyor; mobilde ilk içerik görünene kadar uzun bir beyaz ekran yaşanıyor. Derleme sürecine kritik CSS adımı ekleniyor: ana sayfa, hizmet ve makale şablonları için ilk ekran stilleri ayrı ayrı çıkarılıp HTML'e gömülüyor, ana dosya ertelenerek yükleniyor. Beyaz ekran süresi belirgin biçimde kısalıyor ve LCP iyileşiyor.
Sık yapılan hata
Tek bir kritik kümeyi tüm sayfa tiplerine uygulamaktır; ürün sayfasının ilk ekranı ile blog yazısının ilk ekranı farklı stiller ister. İkinci hata, kritik bloğu elle çıkarıp sonra unutmaktır; tasarım değiştikçe gömülü stiller eskir ve ilk ekran bozuk görünür. Üçüncüsü, kritik CSS'i çok geniş tutmaktır; HTML şişer ve avantaj kaybolur. Erteleme sırasında geçici stil kaymaları yaşanmaması için ana dosyanın yüklenme biçimi dikkatle kurgulanmalıdır.
Teklif alırken sorulacak soru
Çizimi engelleyen CSS ve JavaScript nasıl yönetilecek; kritik CSS derleme sürecinin otomatik bir parçası olacak mı? Tasarım güncellendiğinde bu yapı kendiliğinden yenilenecek mi?
Sık sorulanlar
Kritik CSS her sitede gerekli mi?
Küçük ve hafif stil dosyası olan bir sitede kazanım sınırlıdır. Büyük stil dosyaları ya da yavaş bağlantılı kullanıcı kitlesi olan sitelerde fark hissedilir.
Hazır temalarda kritik CSS uygulanabilir mi?
Eklentilerle denenir; ancak temanın hangi stili nerede kullandığı bilinmediği için sonuç çoğu zaman kırılgandır ve tema güncellemeleriyle bozulabilir.
