Performans bütçesini tanımladıktan sonra sıra bunu takip etmek için derleme sürecini ayarlamaya gelir. Seçilen performans metrikleri için eşikler tanımlamanıza ve bütçeyi aşarsanız sizi uyarmanıza olanak tanıyan bir dizi araç vardır. İhtiyaçlarınıza ve mevcut ayarlarınıza en uygun seçeneği nasıl seçeceğinizi öğrenin. 🕵️ ♀️
Lighthouse performans bütçeleri
Lighthouse, siteleri performans, erişilebilirlik, en iyi uygulamalar ve sitenizin progresif web uygulaması olarak ne kadar iyi performans gösterdiği gibi birkaç önemli alanda test eden bir denetleme aracıdır.
Lighthouse (v5+) komut satırı sürümü, aşağıdakilere göre performans bütçelerinin belirlenmesini destekler:
- kaynak boyutu
- kaynak sayısı
Aşağıdaki kaynak türlerinden herhangi biri için bütçe ayarlayabilirsiniz:
document
font
image
media
other
script
stylesheet
third-party
total
Bütçeler bir JSON dosyasında ayarlanır ve tanımlandıktan sonra yeni "Bütçe Aşımı" sütunu herhangi bir sınırı aşıp aşmadığınızı gösterir.
![Lighthouse raporundaki Bütçeler bölümü](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/budgets-section-lighthou-1f943ff9e538d.png?authuser=5&hl=tr)
Web paketi performans ipuçları
Webpack, kodunuzun kullanıcılara yayınlanma şeklini optimize etmek için güçlü bir geliştirme aracıdır. Öğe boyutuna göre performans bütçelerini ayarlamayı da destekler.
Paket boyutunuz sınırın üzerine çıktığında komut satırı uyarıları veya hataları almak için webpack.config.js
ürününde performans ipuçlarını etkinleştirin. Bu, geliştirme süreci boyunca öğe boyutlarına dikkat etmenin mükemmel bir yoludur.
Derleme adımından sonra webpack, öğelerin ve boyutlarının renk kodlu bir listesini oluşturur. Bütçeyi aşan her şey sarı renkle vurgulanır.
![Bundle.js'yi vurgulayan web paketi çıkışı](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-output-highlighti-b33963dc70391.png?authuser=5&hl=tr)
Hem öğeler hem de giriş noktaları için varsayılan sınır 250 KB'tır. Yapılandırma dosyasında kendi hedeflerinizi ayarlayabilirsiniz.
![Web paketi paket boyutu uyarısı](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-bundle-size-warni-412c8dae0aeea.jpg?authuser=5&hl=tr)
Bütçeler, sıkıştırılmamış öğe boyutlarıyla karşılaştırılır. Sıkıştırılmamış JavaScript boyutu, yürütme süresiyle ilgilidir. Büyük dosyaların yürütülmesi özellikle mobil cihazlarda uzun sürebilir.
![Web paketi performans optimizasyonu önerisi](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-performance-optim-174c6e4d62345.jpg?authuser=5&hl=tr)
Grup boyutu
Grup boyutu, öğe boyutunu belirlediğiniz bir eşiğe göre test eden basit bir npm paketidir. Yerel olarak çalışabilir ve CI'nızla entegre edilebilir.
Paket boyutu KSA
Bir eşik ve test etmek istediğiniz dosyayı belirterek bundlesize CLI'ı çalıştırın.
bundlesize -f "dist/bundle.js" -s 170kB
Paket boyutu, renk kodlu test sonuçlarını tek satırda sunar.
![Paket boyutu KSA testi başarısız](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/failing-bundlesize-cli-te-25490fc5a9ce2.png?authuser=5&hl=tr)
![Paket boyutu CLI testini geçme](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/passing-bundlesize-cli-te-b41d7dc6c93a.png?authuser=5&hl=tr)
CI için paket boyutu
Pull isteklerinde otomatik olarak boyut sınırları uygulamak için paket boyutundan en yüksek değeri elde etmek için CI ile entegre etmeniz gerekir. Paket boyutu testi başarısız olursa bu pull isteği birleştirilmez. GitHub'da Travis CI, CircleCI, Wercker ve Drone ile pull istekleri için çalışır.
![GitHub'da grup boyutu denetimi durumu](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/bundlesize-check-status-742e3e8c62318.jpg?authuser=5&hl=tr)
Bugün hızlı bir uygulamanız olabilir, ancak yeni kod eklemek çoğu zaman bunu değiştirebilir. Bundlesize ile pull isteklerini kontrol etmek performans gerilemelerini önlemenize yardımcı olur. Bootstrap, Tinder, Trivago ve diğer pek çok marka, bütçelerini kontrol altında tutmak için bu platformu kullanıyor.
Paket boyutu kullanıldığında her dosya için ayrı olarak eşik belirlemek mümkündür. Bu, özellikle uygulamanızda bir grubu bölüyorsanız yararlı olur.
Varsayılan olarak gzip biçiminde sıkıştırılmış öğe boyutlarını test eder. Sıkıştırma seçeneğini kullanarak brotli sıkıştırmaya geçebilir veya özelliği tamamen kapatabilirsiniz.
Deniz Feneri Botu
![Deniz Feneri Botu](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-3e2ca69e8688f.png?authuser=5&hl=tr)
Lighthouse Bot, Travis CI ile entegre olur ve beş Lighthouse denetim kategorisinden herhangi birini temel alarak bütçeleri uygular. Örneğin, Lighthouse performans puanınız için 100 tutarında bir bütçe belirleyebilirsiniz. Bazen tek bir öğeyi takip etmek, öğe bütçelerinin ve Lighthouse puanlarının birçok unsuru hesaba katmaktan daha kolaydır.
![Lighthouse'un skorları 💯](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-scores-c11f98857eaf.png?authuser=5&hl=tr)
Lighthouse Bot, hazırlık sunucusuna bir site dağıttıktan sonra bir denetim çalıştırır. .travis.yml
ürününde --perf
, --a11y
, --bp
, --seo
veya --pwa
seçenekleriyle belirli Lighthouse kategorileri için bütçeler belirleyin. En az 90 puan alarak yeşil bölgede kalmaya çalışın.
after_success: - ./deploy.sh # Deploy the PR changes to staging server - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test
GitHub'da bir pull isteğinin puanları, belirlediğiniz eşiğin altına düşerse Lighthouse Bot, çekme isteğinin birleştirilmesini engelleyebilir. ⛔
![GitHub'da Lighthouse Bot'u kontrol etme durumu](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-check-stat-76287c5940f5b.png?authuser=5&hl=tr)
Ardından Lighthouse Bot'u, güncellenen puanlarla birlikte pull isteğinize yorum yapar. Bu, kod değişiklikleri yaşanırken performans hakkında diyalog kurulmasını teşvik eden şık bir özelliktir.
![Pull isteğindeki Lighthouse raporlama puanları](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-reporting-scor-f1b8e2faca379.png?authuser=5&hl=tr)
Pull isteğinizin düşük bir Lighthouse puanıyla engellendiğini tespit ederseniz Lighthouse CLI veya Geliştirici Araçları'nda bir denetim çalıştırın. Performans sorunları hakkında ayrıntıları ve basit optimizasyonlara yönelik ipuçlarını içeren bir rapor oluşturur.
Özet
Araç | CLI | CI | Özet |
---|---|---|---|
Deniz Feneri | ✔️ | ❌ |
|
webpack | ✔️ | ❌ |
|
paket boyutu | ✔️ | ✔️ |
|
Deniz Feneri Botu | ❌ | ✔️ |
|