Kritik CSS'leri ayıklama

Kritik CSS tekniğiyle oluşturma sürelerini nasıl iyileştireceğinizi öğrenin.

Milica Mihajlija
Milica Mihajlija

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.

Ekranların kenarlarından taşan web sayfalarının yer aldığı bir dizüstü bilgisayar ve mobil cihaz resmi

Çı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.

Kritik CSS&#39;nin başlıkta satır içi olduğu HTML dosyası
Satır içi kritik CSS

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.

Oluşturmayı engelleyen CSS&#39;ye (üst) sahip bir sayfa ile satır içi kritik CSS&#39;ye (altta) sahip bir sayfanın 3G bağlantısında yüklenmesinin film şeridi görünümü karşılaştırması. Üst film şeridi, içerik görüntülenmeden önce altı boş kare gösteriyor. Alt film şeridi, ilk karede anlamlı içerik gösterir.
3G bağlantısında, oluşturma engelleyici CSS'ye sahip bir sayfa (üst) ile aynı sayfanın satır içi kritik CSS'ye (altta) sahip olmasının karşılaştırması

İ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.

&quot;Oluşturmayı engelleyen kaynağı ortadan kaldırın&quot; ile Lighthouse denetimi veya &quot;Kullanılmayan CSS&#39;yi ertele&quot; fırsatlar

İ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.