Kritik ile kritik CSS'leri ayıklama ve satır içine alma

Milica Mihajlija
Milica Mihajlija

Kullandığınız kullanıcı arayüzü kitaplığı veya stillerinizi manuel olarak oluşturmanız fark etmeksizin, tarayıcının sayfayı gösterebilmesi için CSS dosyalarını indirip ayrıştırması gerektiğinden, önemli miktarda CSS göndermek oluşturmayı geciktirir.

Bu duyarlı dondurma galerisi Bootstrap ile oluşturulmuştur. Bootstrap gibi kullanıcı arayüzü kitaplıkları, geliştirme hızını artırır ancak bu genellikle gereksiz CSS'nin kullanılmasına neden olur ve yüklenme sürelerinizi uzatabilir. Bootstrap 4 187 KB'tır. Başka bir kullanıcı arayüzü kitaplığı olan Semantic UI ise sıkıştırılmamış halde 730 KB'tır. Bootstrap, sıkıştırılmış ve gzip'lenmiş olsa bile yaklaşık 20 KB'lık bir boyuta sahiptir. Bu boyut, ilk gidiş dönüş için 14 KB eşiğinin çok üzerindedir.

Critical, ekranın üst kısmındaki CSS'yi ayıklayan, küçülten ve satır içine yerleştiren bir araçtır. Bu sayede, sayfanın diğer bölümlerine ait CSS henüz yüklenmemiş olsa bile sayfanın üst kısmındaki içerik en kısa sürede oluşturulabilir. Bu codelab'de, Critical'in npm modülünü kullanmayı öğreneceksiniz.

Ölçüm

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran tam ekran.

Bu sitede Lighthouse denetimi çalıştırmak için:

  1. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  2. Lighthouse sekmesini tıklayın.
  3. Mobil'i tıklayın.
  4. Performans onay kutusunu işaretleyin.
  5. Denetim bölümündeki diğer onay kutularının işaretini kaldırın.
  6. Simüle Edilen Hızlı 3G, 4x CPU Yavaşlatma'yı tıklayın.
  7. Depolama alanını temizle onay kutusunu işaretleyin. Bu seçenek belirlendiğinde Lighthouse, kaynakları önbellekten yüklemez. Bu sayede, ilk kez ziyaret eden kullanıcıların sayfayı nasıl deneyimleyeceğini simüle eder.
  8. Denetimleri Çalıştır'ı tıklayın.

Lighthouse tarafından desteklenen Chrome Geliştirici Araçları'nın Denetimler paneli

Cihazınızda denetim yaptığınızda tam sonuçlar değişiklik gösterebilir ancak film şeridi görünümünde, uygulamanın içeriği oluşturmadan önce oldukça uzun bir süre boyunca boş ekran gösterdiğini fark edersiniz. First Contentful Paint (FCP) değerinin yüksek olmasının ve genel performans puanının iyi olmamasının nedeni budur.

84 saniyelik FCP performansı ve 3 saniyelik FCP performans puanının yanı sıra uygulamanın yüklendiğini gösteren film şeridi görünümünü gösteren Lighthouse denetimi

Lighthouse, performans sorunlarını çözmenize yardımcı olur. Bu nedenle, çözümleri Fırsatlar bölümünde bulabilirsiniz. Oluşturmayı engelleyen kaynakları ortadan kaldırın fırsat olarak listelenir ve bu noktada Kritik'in önemi ortaya çıkar.

Lighthouse denetimi "Fırsatlar" "Oluşturmayı engelleyen kaynakları ortadan kaldırın" başlıklı bölüm listesi

Optimize etme

  • Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.

İşleri hızlandırmak için Kritik dosya zaten yüklenmiştir ve codelab'e boş bir yapılandırma dosyası dahil edilmiştir.

critical.js yapılandırma dosyasına Critical referansı ekleyin ve ardından critical.generate() işlevini çağırın. Bu işlev, yapılandırmayı içeren bir nesneyi kabul eder.

const critical = require('critical');

critical.generate({
    // configuration
},(err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

Hata giderme zorunlu değildir ancak konsolda işlemin başarısını ölçmenin kolay bir yoludur.

Kritik Olanı Yapılandırma

Aşağıdaki tabloda bazı yararlı Kritik seçenekler bulunmaktadır. GitHub'daki tüm seçeneklere göz atabilirsiniz.

Option Tür Açıklama
base dize Dosyalarınızın ana dizini.
src dize HTML kaynak dosyası.
dest dize Çıkış dosyasının hedefi. CSS satır içiyse çıkış dosyası HTML'dir. Aksi takdirde çıkış bir CSS dosyasıdır.
width, height numaralar Görüntü alanı genişliği ve yüksekliği (piksel cinsinden).
dimensions dizi Genişlik ve yükseklik özelliklerine sahip nesneler içerir. Bu nesneler, sayfanın üst kısmındaki CSS ile hedeflemek istediğiniz ekran görünümlerini temsil eder. CSS'nizde medya sorguları varsa birden fazla görüntü alanı boyutunu kapsayan kritik CSS oluşturabilirsiniz.
inline boolean Doğru değerine ayarlandığında, oluşturulan kritik CSS, HTML kaynak dosyasının içinde satır içine alınır.
minify boolean Kritik, doğru olarak ayarlandığında oluşturulan kritik CSS'yi küçültür. Kritik, yinelenen kural eklemeyi önlemek için otomatik olarak küçülttüğü için birden fazla çözünürlük için kritik CSS ayıklanırken atlanabilir.

Aşağıda, birden fazla çözünürlük için kritik CSS'yi ayıklamaya yönelik bir yapılandırma örneği verilmiştir. critical.js adlı cihaza ekleyin veya seçeneklerde değişiklikler yapın.

critical.generate({
  base: 'public/',
  src: './index.html',
  dest: './index.html',
  inline: true,
  dimensions: [
    {
      height: 500,
      width: 300,
    },
    {
      height: 720,
      width: 1280,
    },
  ]
}, (err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

Bu örnekte, inline seçeneği true olarak ayarlandığından index.html hem kaynak dosya hem de hedef dosyadır. Kritik ilk olarak HTML kaynak dosyasını okur, kritik CSS'yi ayıklar ve ardından <head> içindeki önemli CSS ile index.html öğesinin üzerine yazar.

dimensions dizisinde iki görüntü alanı boyutu belirtilmiştir: ekstra küçük ekranlar için 300 x 500 ve standart dizüstü bilgisayar ekranları için 1280 x 720.

Birden fazla görüntü alanı boyutu belirtildiğinde Kritik, çıkarılan CSS'yi otomatik olarak küçülttüğü için minify seçeneği atlandı.

Kritik Çalıştırma

package.json'teki komut dosyalarınıza Kritik değerini ekleyin:

scripts: {
  "start": "node server.js",
  "critical": "node critical.js"
}
  1. Terminal'i tıklayın (not: Terminal düğmesi görünmüyorsa Tam Ekran seçeneğini kullanmanız gerekebilir).

Kritik CSS oluşturmak için konsolda şu komutu çalıştırın:

npm run critical
refresh
Konsolda &quot;Kritik CSS oluşturuldu&quot; yazan başarı mesajı
Konsolda başarı mesajı

Artık index.html etiketindeki <head> etiketinde, oluşturulan kritik CSS <style> etiketleri arasına satır içi olarak yerleştirilir ve ardından CSS'nin geri kalanını eşzamansız olarak yükleyen bir komut dosyası gelir.

Kritik CSS&#39;nin satır içine alındığı index.html
Satır içine alınmış kritik CSS

Tekrar ölçün

Lighthouse performans denetimini tekrar çalıştırmak için codelab'in başından itibaren verilen adımları uygulayın. Elde ettiğiniz sonuçlar şuna benzer:

100 performans puanı, 0,9 saniye FCP ve uygulamanın yüklenmesinin geliştirilmiş film şeridi görünümünü gösteren Lighthouse denetimi