İster kullanıcı arayüzü kitaplığı kullanın ister stillerinizi manuel olarak oluşturun, tarayıcının sayfayı gösterebilmesi için CSS dosyalarını indirip ayrıştırması gerektiğinden, CSS oluşturma işleminin önemli bir kısmını geciktirir.
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ükleme sürelerinizi yavaşlatabilecek şişirilmiş ve gereksiz CSS'lere yol açar. Ö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'lık büyük bir boyuttur. Küçültülmüş ve gzip biçiminde sıkıştırılmış olsa bile, Bootstrap'in ağırlığı yaklaşık 20 KB'tır. Bu, ilk gidiş dönüş 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çi yapan bir araçtır. Bu, sayfanın diğer kısımları için CSS 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ğlar. 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
.
Bu sitede Lighthouse denetimi çalıştırmak için:
- Geliştirici Araçları'nı açmak için "Control+Üst Karakter+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 işaretleyin.
- Denetimler bölümündeki diğer onay kutularının işaretini kaldırın.
- Simulated Fast 3G, 4x CPU Yavaşlama'yı tıklayın.
- Depolama Alanını Temizle onay kutusunu işaretleyin. Bu seçenek belirlendiğinde Lighthouse, kaynakları önbellekten yüklemez. Bu önbellek, sayfayı ilk kez ziyaret eden kullanıcıların sayfada nasıl bir deneyim yaşayacağının simülasyonunu yapar.
- Denetimleri Çalıştır'ı tıklayın.
Makinenizde denetim gerçekleştirdiğinizde kesin sonuçlar farklılık gösterebilir ancak film şeridi görünümünde, uygulamanın içeriği en sonunda oluşturmaya başlamadan önce ekranın bir süre boş göründüğünü fark edeceksiniz. First Contentful Paint (FCP) değerinin yüksek olmasının ve genel performans puanının iyi olmamasının nedeni budur.
Lighthouse, performans sorunlarını gidermenize yardımcı olur. Bu nedenle, çözümleri Fırsatlar bölümünde bulabilirsiniz. Oluşturmayı engelleyen kaynakları ortadan kaldırın, bir fırsat olarak listelenir ve işte bu noktada kritik önem taşır.
Optimize etme
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i 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ında, Kritik öğesine bir başvuru 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 mevcut seçeneklerin tümüne 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ı için hedef. CSS satır içiyse çıkış dosyası HTML'dir. Aksi takdirde, çıktı olarak CSS dosyası oluşturulur. |
width, height |
numaralar | Piksel cinsinden görüntü alanı genişliği ve yüksekliği. |
dimensions |
dizi | Genişlik ve yükseklik özelliklerine sahip nesneler içerir. Bu nesneler, ekranın üst kısmındaki CSS ile hedeflemek istediğiniz görüntü alanlarını temsil eder. CSS'nizde medya sorgularınız varsa bu, birden çok görüntü alanı boyutunu kapsayan kritik CSS oluşturmanıza olanak tanır. |
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 | Doğru değerine ayarlandığında, Kritik, oluşturulan kritik CSS'yi küçültür. Kritik önem, yinelenen kuralların dahil edilmesini önlemek için CSS'yi otomatik olarak küçülttüğünden, birden fazla çözüm için kritik CSS ayıklanırken atlanabilir. |
Aşağıda, birden fazla çözüm için kritik CSS'leri 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 doğru olarak ayarlandığından index.html hem kaynak 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 belirtilen iki görüntü alanı boyutu var: 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 uygulamasındaki 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
Artık index.html öğesinin <head> etiketinde, oluşturulan kritik CSS <style> etiketleri arasında satır içine yerleştiriliyor, ardından CSS'nin geri kalanını eşzamansız olarak yükleyen bir komut dosyası takip ediliyor.
Tekrar ölçüm yapın
Lighthouse performans denetimini tekrar çalıştırmak için codelab'in başından itibaren verilen adımları uygulayın. Alacağınız sonuçlar aşağıdakine benzer olacaktır:
