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ı indirip ayrıştırması gerekir. Bu da CSS'yi oluşturma işlemini 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şturulma süresini önemli ölçüde artırabilir.
Çıkarılan stilleri HTML dokümanının <head> öğesinde satır içine almak, bu stillerin getirilmesi 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 fark yaratabilir. Mobil ağlarda, bant genişliğinden bağımsız olarak yüksek gecikme süresi söz konusudur.
İlk Zengin İçerikli Boyama (FCP) kaliteniz kötüyse ve Lighthouse denetimlerinde "Oluşturmayı engelleyen kaynağı ortadan kaldırın" fırsatını görüyorsanız kritik CSS'yi denemek iyi bir fikirdir.
İlk oluşturulan döngünü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 olarak, bir sitede ne kadar çok CSS varsa satır içi CSS'nin olası etkisi de o kadar büyük olur.
Araçlara genel bakış
Bir sayfanın kritik CSS'sini otomatik olarak belirleyebilen birçok harika araç vardır. Bu iyi bir haberdir çünkü bu işlemi manuel olarak yapmak yorucu bir işlem olacaktır. Görüntü alanındaki her bir öğeye uygulanan stillerin belirlenmesi için DOM'un tamamının analiz edilmesi gerekir.
Kritik
Kritik boyutu, ekranın üst kısmındaki CSS'yi çıkarır, küçültür ve satır içine alır. npm modülü olarak kullanılabilir. Gulp ile (doğrudan) veya Grunt ile (bir plugin olarak) kullanılabilir, bir web paketi eklentisi de vardır.
Süreçten bolca düşünmeyi gerektiren basit bir araç. Stil sayfalarını belirtmenize bile gerek yoktur. Kritik özelliği, bunları otomatik olarak algılar. Ayrıca birden fazla ekran çözünürlüğü için kritik CSS'nin çıkarılmasını da destekler.
criticalCSS
CriticalCSS, ekranın üst kısmındaki CSS'yi çıkaran başka bir npm modülüdür. CLI olarak da mevcuttur.
Kritik CSS'yi satır içine alma ve küçültme seçenekleri yoktur. Ancak kritik CSS'ye ait olmayan kuralları zorunlu olarak dahil etmenize olanak tanır ve @font-face bildirimlerinin eklenmesi konusunda size daha ayrıntılı kontrol sunar.
Çatı katı
Sitenizde veya uygulamanızda DOM'ye dinamik olarak eklenen çok sayıda stil veya stil varsa (Angular uygulamalarında yaygın olarak kullanılır) Penthouse iyi bir seçimdir. Gelişmiş olarak Puppeteer'ı kullanır, hatta online 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. Bu yöntemin olumlu tarafı, pek çok işi aynı anda yürütebilmektir.