Kritik CSS tekniğiyle oluşturma sürelerini nasıl iyileştireceğinizi öğrenin.
Tarayıcının sayfayı gösterebilmesi için CSS dosyalarını indirmesi ve ayrıştırması gerekir. Bu da CSS'yi oluşturmayı engelleyen bir kaynak haline getirir. CSS dosyaları büyükse veya ağ koşulları kötüyse CSS dosyası istekleri, web sayfasının oluşturulması için gereken süreyi önemli ölçüde artırabilir.
Çıkarılan stilleri, HTML dokümanının <head> öğesinde satır içine almak, bu stilleri getirmek için ek istekte bulunma ihtiyacını ortadan kaldırır. CSS'nin geri kalanı eşzamansız olarak yüklenebilir.
Oluşturma sürelerinin iyileştirilmesi, özellikle kötü ağ koşullarında algılanan performansta büyük bir fark yaratabilir. Mobil ağlarda yüksek gecikme, bant genişliğinden bağımsız olarak sorun teşkil eder.
İlk Zengin İçerikli Boyama (FCP) metriğiniz zayıfsa ve "Oluşturmayı engelleyen kaynağı ortadan kaldır" seçeneğini inceleyin. fırsatlardan yararlanmak için kritik öneme sahip CSS'yi denemek iyi bir fikirdir.
İlk oluşturma için gidiş dönüş sayısını en aza indirmek için ekranın üst kısmındaki içeriği 14 KB'ın (sıkıştırılmış) altında tutmaya çalışın.
Bu teknikle elde edebileceğiniz performans etkisi, web sitenizin türüne bağlıdır. Genel anlamda, bir sitenin ne kadar CSS'si varsa satır içi CSS'nin olası etkisi o kadar büyük olur.
Araçlara genel bakış
Bir sayfa için kritik CSS'yi otomatik olarak belirleyebilen bir dizi faydalı araç vardır. Manuel olarak yapmak yorucu olacağı için bu iyi bir haberdir. Görüntü alanındaki her bir öğeye uygulanan stillerin belirlenmesi için DOM'nin tamamının analiz edilmesi gerekir.
Kritik
Kritik seçeneği, CSS'leri ayıklar, küçültür ve ekranın üst kısmındaki CSS'leri satır içine alır. npm modülü olarak kullanılabilir. Gulp ile (doğrudan) veya Grunt ile (eklenti olarak) kullanılabilir. Ayrıca, bir webpack eklentisi de vardır.
Bu, sürecin çok fazla düşünmesini gerektiren basit bir araçtır. Stil sayfalarını belirtmeniz bile gerekmez. Kritik Olan bu sayfaları otomatik olarak algılar. Ayrıca birden fazla ekran çözünürlüğü için kritik CSS'lerin ayıklanmasını destekler.
criticalCSS
CriticalCSS, ekranın üst kısmındaki CSS'yi ayıklayan başka bir npm modülüdür. KSA olarak da kullanılabilir.
Kritik CSS'yi satır içine alma ve küçültme seçenekleri yoktur ancak aslında kritik CSS'ye ait olmayan kuralları zorunlu olarak dahil etmenize olanak tanır ve @font-face bildirimleri ekleme konusunda size daha ayrıntılı kontrol sunar.
Çatı katı
Sitenizde veya uygulamanızda DOM'ye dinamik olarak yerleştirilen çok sayıda stil veya stil varsa Penthouse iyi bir seçenektir (Angular uygulamalarında yaygın olarak görülür). Ek olarak Puppeteer'ı kullanır, hatta online olarak barındırılan bir sürümü de içerir.
Penthouse, stil sayfalarını otomatik olarak algılamaz. Kritik CSS oluşturmak istediğiniz HTML ve CSS dosyalarını belirtmeniz gerekir. Avantajı, birçok işi paralel olarak yürütmede başarılı olmasıdır.