Hızlı olmak için çok çalıştınız. Şimdi de Lighthouse Bot ile performans testini otomatikleştirerek hızınızı koruyun.
Lighthouse, uygulamanızı 5 kategoride değerlendirir. Bu kategorilerden biri de performanstır. Kodunuzu her düzenlediğinizde DevTools veya Lighthouse CLI ile performans değişikliklerini izlemeyi hatırlamaya çalışabilirsiniz ancak bunu yapmanız gerekmez. Araçlar, sıkıcı işleri sizin yerinize yapabilir. Travis CI, yeni kod gönderdiğiniz her seferde uygulamanız için bulutta otomatik olarak testler çalıştıran harika bir hizmettir.
Lighthouse Bot, Travis CI ile entegre olur ve performans bütçesi özelliği sayesinde performansı fark etmeden yanlışlıkla düşürmezsiniz. Lighthouse puanları belirlediğiniz eşiğin (ör. < 96/100) altına düşerse çekme isteklerinin birleştirilmesine izin vermeyecek şekilde deponuzu yapılandırabilirsiniz.
Performansı localhost'ta test edebilseniz de siteniz genellikle canlı sunucularda farklı performans gösterir. Daha gerçekçi bir görünüm elde etmek için sitenizi bir hazırlık sunucusuna dağıtmanız en iyisidir. Herhangi bir barındırma hizmetini kullanabilirsiniz. Bu kılavuzda Firebase Hosting ele alınacaktır.
1. Kurulum
Bu basit uygulama, üç sayıyı sıralamanıza yardımcı olur.
Örneği GitHub'dan kopyalayın ve GitHub hesabınıza depo olarak eklediğinizden emin olun.
2. Firebase'e dağıtma
Başlamak için bir Firebase hesabınızın olması gerekir. Bu işlemi tamamladıktan sonra "Proje ekle"yi tıklayarak Firebase konsolunda yeni bir proje oluşturun:
Firebase'e dağıtma
Uygulamayı dağıtmak için Firebase CLI'yı yüklemeniz gerekir. Daha önce yüklemiş olsanız bile CLI'yı şu komutla en son sürüme sık sık güncellemeniz iyi bir uygulamadır:
npm install -g firebase-tools
Firebase CLI'yı yetkilendirmek için şu komutu çalıştırın:
firebase login
Şimdi projeyi başlatın:
firebase init
Kurulum sırasında konsolda size bir dizi soru sorulur:
- Özellik seçmeniz istendiğinde "Barındırma"yı seçin.
- Varsayılan Firebase projesi için Firebase konsolunda oluşturduğunuz projeyi seçin.
- Herkese açık dizininiz olarak "public" yazın.
- Tek sayfalık uygulama olarak yapılandırmak için "N" (hayır) yazın.
Bu işlem, proje dizininizin kök kısmında bir firebase.json yapılandırma dosyası oluşturur.
Tebrikler, dağıtıma hazırsınız. Koşu:
firebase deploy
Bir saniye içinde canlı bir uygulamanız olur.
3. Travis'i ayarlama
Travis'te hesap kaydetmeniz ve ardından profilinizin Ayarlar bölümünde GitHub Apps entegrasyonunu etkinleştirmeniz gerekir.
Hesabınız olduğunda
Profilinizdeki Ayarlar'a gidin, Hesabı senkronize et düğmesine basın ve proje deponuzun Travis'te listelendiğinden emin olun.
Sürekli entegrasyonu başlatmak için iki şeye ihtiyacınız vardır:
- Kök dizinde
.travis.ymldosyası olmalıdır. - Normal bir eski git push işlemi yaparak derlemeyi tetikleme
lighthouse-bot-starter deposunda zaten bir .travis.yml YAML dosyası var:
language: node_js
node_js:
- "8.1.3"
install:
- npm install
before_script:
- npm install -g firebase-tools
script:
- webpack
YAML dosyası, Travis'e tüm bağımlılıkları yüklemesini ve uygulamanızı oluşturmasını söyler. Şimdi örnek uygulamayı kendi GitHub deponuza gönderme sırası sizde. Henüz yapmadıysanız aşağıdaki komutu çalıştırın:
git push origin main
Projenizin Travis kontrol panelini görmek için Travis'teki Ayarlar bölümünde deponuzu tıklayın. Her şey yolundaysa birkaç dakika içinde derlemenizin sarıdan yeşile döndüğünü görürsünüz. 🎉
4. Travis ile Firebase dağıtımını otomatikleştirme
2. adımda Firebase hesabınızda oturum açtınız ve uygulamayı firebase deploy ile komut satırından dağıttınız. Travis'in uygulamanızı Firebase'e dağıtabilmesi için Travis'i yetkilendirmeniz gerekir. Bunu nasıl yapıyorsunuz? Firebase jetonuyla.
🗝️🔥
Firebase'e yetki verme
Jetonu oluşturmak için şu komutu çalıştırın:
firebase login:ci
Firebase'in sizi doğrulayabilmesi için tarayıcı penceresinde yeni bir sekme açılır. Ardından konsola geri döndüğünüzde yeni oluşturulan jetonunuzu görürsünüz. Kopyalayın ve Travis'e geri dönün.
Projenizin Travis kontrol panelinde More options (Diğer seçenekler) > Settings (Ayarlar) > Environment variables (Ortam değişkenleri) seçeneğine gidin.
Jetonu değer alanına yapıştırın, değişkene FIREBASE_TOKEN adını verin ve ekleyin.
Travis kurulumunuza dağıtım ekleme
Travis'e her başarılı derlemeden sonra uygulamayı dağıtmasını söylemek için aşağıdaki satırlara ihtiyacınız vardır.
Bunları .travis.yml dosyasının sonuna ekleyin. 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
Bu değişikliği GitHub'a gönderin ve ilk otomatik dağıtımınızı bekleyin. Travis günlüğünüze göz atarsanız kısa süre içinde ✔️ Deploy complete! (Dağıtım tamamlandı) mesajını görürsünüz.
Artık uygulamanızda yaptığınız değişiklikler otomatik olarak Firebase'e dağıtılacak.
5. Lighthouse Bot'u ayarlama
Friendly Lighthouse Bot, uygulamanızın Lighthouse puanları hakkında sizi bilgilendirir. Bu araç için yalnızca deponuza davetiye göndermeniz gerekir.
GitHub'da projenizin ayarlarına gidin ve "lighthousebot"u ortak çalışan olarak ekleyin (Ayarlar> Ortak Çalışanlar):
Bu isteklerin onaylanması manuel bir süreç olduğundan her zaman anında gerçekleşmez. Teste başlamadan önce lighthousebot'un işbirlikçi durumunu onayladığından emin olun. Bu arada, Travis'teki projenizin ortam değişkenlerine başka bir anahtar da eklemeniz gerekir. E-posta adresinizi buraya girin. Gelen kutunuza Lighthouse Bot anahtarı gönderilir. 📬
Travis'te bu anahtarı ortam değişkeni olarak ekleyin ve LIGHTHOUSE_API_KEY olarak adlandırın:
Projenize Lighthouse Bot'u ekleme
Ardından, aşağıdaki komutu çalıştırarak Lighthouse Bot'u projenize ekleyin:
npm i --save-dev https://github.com/ebidel/lighthousebot
Ayrıca package.json alanına şunu ekleyin:
"scripts": {
"lh": "lighthousebot"
}
Travis yapılandırmanıza Lighthouse Bot'u ekleme
Son ipucu olarak, her çekme isteğinden sonra uygulamanın performansını test edin.
.travis.yml bölümünde after_success'e başka bir adım ekleyin:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Belirtilen URL'de Lighthouse denetimi gerçekleştirir. Bu nedenle, https://staging.example.com yerine uygulamanızın URL'sini (ör. your-app-123.firebaseapp.com) girin.
Standartlarınızı yüksek tutun ve kurulumu, performans puanını 95'in altına düşüren uygulama değişikliklerini kabul etmeyecek şekilde ayarlayın:
- npm run lh -- --perf=95 https://staging.example.com
Travis'te Lighthouse Bot testini tetiklemek için pull isteği gönderme
Lighthouse Bot yalnızca pull isteklerini test eder. Bu nedenle, şu anda ana dala push işlemi yaparsanız Travis günlüğünüzde yalnızca "Bu komut dosyası yalnızca Travis PR isteklerinde çalıştırılabilir" mesajını görürsünüz.
Lighthouse Bot testini tetiklemek için:
- Yeni bir dalı kullanıma alma
- GitHub'a aktarın
- Pull isteği oluşturma
pull isteği sayfasında bekleyin ve Lighthouse Bot'un şarkı söylemesini bekleyin. 🎤
Performans puanı mükemmel, uygulama bütçe dahilinde ve kontrol başarılı oldu.
Diğer Lighthouse seçenekleri
Lighthouse'un 5 farklı kategoriyi test ettiğini hatırlıyor musunuz? Lighthouse Bot işaretleri olan tüm öğeler için puanları zorunlu kılabilirsiniz:
--perf # performance
--pwa # progressive web app score
--a11y # accessibility score
--bp # best practices score
--seo # SEO score
Örnek:
npm run lh -- --perf=93 --seo=100 https://staging.example.com
Performans puanı 93'ün veya SEO puanı 100'ün altına düşerse bu işlem PR'yi başarısız kılar.
--no-comment seçeneğiyle Lighthouse Bot'un yorumlarını almamayı da tercih edebilirsiniz.