İster bir kullanıcı arayüzü kitaplığı kullanın ister stillerinizi el işi yapın, tarayıcının sayfayı gösterebilmesi için CSS dosyalarını indirip ayrıştırması gerektiğinden CSS oluşturma işleminde önemli miktarda gecikme yaşanabilir.
Bu duyarlı dondurma galerisi Bootstrap ile oluşturulmuştur. Bootstrap gibi kullanıcı arayüzü kitaplıkları geliştirme sürecini hızlandırır. Ancak bu durum, genellikle yüklü ve gereksiz CSS'lerden kaynaklanarak yükleme sürelerinizi yavaşlatabilir. Önyükleme 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 boyutundadır. Küçültülmüş ve gzip işlemi uygulanmış olsa bile Bootstrap yaklaşık 20 KB ağırlığıyla ilk döngü için 14 KB eşiğinin çok üzerindedir.
Kritik, ekranın üst kısmındaki CSS'yi ayıklayan, küçülten ve satır içine alan bir araçtır. Böylece, sayfanın diğer bölümlerinin CSS'si henüz yüklenmemiş olsa bile, ekranın üst kısmındaki içeriğin mümkün olan en kısa sürede oluşturulmasını sağlayabilirsiniz. Bu codelab'de, Critical'ın npm modülünü kullanmayı öğreneceksiniz.
Ölçüm
- Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a
basın.
Bu sitede Lighthouse denetimi çalıştırmak için:
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Mobil'i tıklayın.
- Performans onay kutusunu seçin.
- Denetimler bölümündeki geri kalan onay kutularını temizleyin.
- Simulated Fast 3G, 4x CPU Slowdown'u (Hızlı 3G, 4x CPU Yavaşlaması) tıklayın.
- Depolama Alanını Temizle onay kutusunu seçin. Bu seçenek belirlendiğinde Lighthouse, kaynakları önbellekten yüklemez. Böylece, ilk kez gelen ziyaretçilerin sayfada nasıl bir deneyim yaşayacağı simüle edilir.
- Denetimleri Çalıştır'ı tıklayın.
Makinenizde bir denetim çalıştırdığınızda kesin sonuçlar değişiklik gösterebilir ancak film şeridi görünümünde, uygulamanın içeriği oluşturmadan önce epey boş bir ekranda durduğunu fark edeceksiniz. İlk Zengin İçerikli Boyama (FCP) yüksek ve genel performans puanı bu nedenle iyi değildir.
Lighthouse, performans sorunlarını çözmenize yardımcı olur. Bu nedenle, çözümleri Fırsatlar bölümünde bulabilirsiniz. Fırsat olarak Oluşturmayı engelleyen kaynakları ortadan kaldırın ve Kritik özelliği tam da bu noktada ortaya çıkar.
Optimize etme
- Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
İşleri hızlandırmak için, Critical özelliği zaten yüklü ve codelab'e boş bir yapılandırma dosyası eklenmiş.
critical.js yapılandırma dosyasına, Kritik değerine bir 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 işlemenin kullanılması zorunlu değildir, ancak konsolda işlemin başarısını ölçmenin kolay bir yoludur.
Kritik Olanı Yapılandır
Aşağıdaki tabloda bazı kullanışlı Kritik seçenekler verilmiştir. GitHub'daki mevcut seçeneklerin tümüne göz atabilirsiniz.
| Option | Tür | Açıklama |
|---|---|---|
base |
dize | Dosyalarınız için temel dizin. |
src |
dize | HTML kaynak dosyası. |
dest |
dize | Çıkış dosyası için hedef. CSS satır içi ise çıkış dosyası HTML olur. Aksi takdirde, çıkış bir CSS dosyasıdır. |
width, height |
numaralar | Görüntü alanının piksel cinsinden genişliği ve yüksekliği. |
dimensions |
dizi | Genişlik ve yükseklik özelliklerine sahip nesneleri içerir. Bu nesneler, ekranın üst kısmı CSS ile hedeflemek istediğiniz görüntü alanlarını temsil eder. CSS'nizde medya sorguları varsa bu, birden çok görüntü alanı boyutunu kapsayan kritik CSS'ler oluşturmanıza olanak tanır. |
inline |
boolean | Doğru değerine ayarlanırsa oluşturulan kritik CSS, HTML kaynak dosyasının satır içine alınır. |
minify |
boolean | True (doğru) değerine ayarlandığında Kritik değeri, oluşturulan kritik CSS'yi küçültür. Kritik CSS değeri, birden fazla kural dahil edilmesini önlemek için değeri otomatik olarak küçülttüğünden, birden fazla çözünürlük için kritik CSS ayıklanırken atlanabilir. |
Aşağıda, birden çok çözünürlük için kritik CSS'nin çıkarılmasına yönelik bir yapılandırma örneği verilmiştir. critical.js hesabına ekleyin veya değişiklikler yapıp seçeneklerde ince ayar 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 doğru olarak ayarlandığından index.html hem kaynak dosya hem de hedef dosyadır. Kritik değeri, öncelikle HTML kaynak dosyasını okur, kritik CSS'yi ayıklar ve ardından <head> içinde satır içi önemli CSS ile index.html değerinin üzerine yazar.
dimensions dizisi, belirtilen iki görüntü alanı boyutuna sahip: 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 değeri, çıkarılan CSS'yi otomatik olarak küçülttüğünden minify seçeneği atlandı.
Kritik Çalıştır
package.json komut dosyalarınıza "Kritik" ekleyin:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- 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
Şimdi, index.html öğesinin <head> etiketinde, oluşturulan kritik CSS, <style> etiketlerinin arasına yerleştirilmiştir ve CSS'nin geri kalanını eşzamansız olarak yükleyen bir komut dosyası izler.
Tekrar ölçün
Lighthouse performans denetimini tekrar çalıştırmak için codelab'in başlangıcından itibaren adımları uygulayın. Alacağınız sonuçlar şuna benzer olacaktır:
