Kritik render yolu.
Kritik render yolu, tarayıcının bir sayfayı ekrana çizebilmek için tamamlaması gereken minimum adımlar dizisidir.
Tarayıcı bir sayfayı boyamadan önce iki ağaç kurmak zorunda: belgenin yapısı ve o yapıya uygulanacak stiller. İkisi birleştirilip düzen hesaplanıyor, sonra boyama yapılıyor. Zincirdeki her adım bir öncekini bekliyor.
Bu yüzden stil dosyaları tanım gereği render engelleyici: stil eksikse tarayıcı boyamıyor, çünkü boyadığı şey bir sonraki anda tamamen değişebilir ve kullanıcı stilsiz bir içerik parlaması görürdü.
Betikler farklı bir sebeple engelleyici: klasik bir betik etiketi belge ayrıştırmasını durduruyor çünkü betik belgeyi değiştirebilir. Ertelenmiş ve eşzamansız betikler bu durdurmayı yapmıyor.
- Belge ayrıştırma — HTML okunur, yapı kurulur.
- Stil ayrıştırma — CSS okunur, kurallar kurulur. Engelleyici.
- Düzen hesabı — her öğenin nerede duracağı hesaplanır.
- Boyama — pikseller çizilir.
- Katman birleştirme — katmanlar ekranda birleştirilir.
Yolu kısaltmak iki yolla oluyor: engelleyici kaynak sayısını azaltmak ve o kaynakların boyutunu düşürmek. Bu sitede stil tek dosyada toplandı ve gzip sonrası 12,4 kilobayta indi; betikler ertelenmiş ve harici kaynak yok.
Zincirin sonundaki iki adım — boyama ve katman birleştirme — dönüşüm ve opaklık animasyonlarının neden ucuz olduğunu açıklıyor: o iki özellik düzen hesabını hiç tetiklemiyor ve genelde ekran kartı katmanında işleniyor.
Yolu kısaltmanın pratik adımları sırayla: stil dosyası sayısını bire indirmek, dosyayı sıkıştırmak ve kullanılmayan kuralları çıkarmak, betikleri ertelenmiş ya da eşzamansız yapmak, ve harici alan adına yapılan istekleri kaldırmak. Dördü de yapılandırma düzeyinde çözülüyor ve hiçbiri kod değişikliği gerektirmiyor.
Kritik CSS tekniği bu yolun daha agresif bir kısaltması: ilk görünen alanı boyamak için gereken kurallar ayrılıp doğrudan sayfaya gömülüyor. Güçlü ama bakım maliyeti var — tasarım değiştikçe yeniden üretilmesi gerekiyor ve unutulduğunda sonuç hiç uygulanmamasından kötü oluyor.
Yolun uzunluğunu ölçmenin en pratik yolu, tarayıcı performans panelinde ilk boyama anına kadar inen kaynakları saymaktır: o listedeki her stil dosyası ve her senkron betik, yolun bir halkası ve bir bekleme noktası.
Ve bir tasarım çıkarımı: yolun uzunluğu tasarım aşamasında belirleniyor. Kaç yazı tipi ailesi kullanılacağı, hero alanında ne olacağı ve kaç harici servis çağrılacağı — üçü de zincire halka ekliyor ve sonradan kolayca çıkarılamıyor.