Bu sayfa, Cloud Translation API ile çevrilmiştir.

Lighthouse CI ile performans izleme

GitHub İşlemler gibi sürekli entegrasyon sistemlerine Lighthouse ekleme.

Katie Hempenius

Lighthouse CI, nasıl kullanabileceğinizi açıkladık. Lighthouse CI'yı geliştirici iş akışlarına birçok farklı şekilde entegre edildi. Bu kılavuzdaki konular şu konular:

Lighthouse CI CLI'ı kullanma.
CI sağlayıcınızı Lighthouse CI'yı çalıştıracak şekilde yapılandırma.
GitHub İşlemi ayarlama ve durum kontrol yönelik bir teknik rapordur. Lighthouse sonuçları otomatik olarak şurada görüntülenir: GitHub pull istekleri.
Lighthouse raporları için performans gösterge tablosu ve veri deposu oluşturma.

Genel Bakış

Lighthouse CI, şu işlemler için Lighthouse kullanımını kolaylaştıran ücretsiz bir araç paketidir: performans izleme araçlarıdır. Tek bir Lighthouse raporu bir web sitesinin anlık görüntüsünü sağlar sayfanın çalıştırıldığı sıradaki performansı; Lighthouse CI, bunların zamanla değişti. Bu sayede, risk yönetiminin etkisini belirlemek için belirli kod değişikliklerinin yapılmasını veya performans eşiklerine erişilmesini sürekli entegrasyon süreçleri olabilir. Performans izleme, her ne kadar gibi yaygın kullanım alanlarına sahip olsalar da, bir proje yöneticisinin göz önünde bulundurun. Örneğin, SEO veya erişilebilirlik.

Lighthouse CI'nın temel işlevi, Lighthouse CI komutu tarafından sağlanır. satır arayüzü. (Not: Bu, Lighthouse aracından KSA). İlgili içeriği oluşturmak için kullanılan Lighthouse CI CLI, bir dizi komutlar . Örneğin, autorun komutu birden fazla yürütür Lighthouse çalışır, ortanca Lighthouse raporunu tanımlar ve raporu yükler depolama alanı için. Bu davranış, ek işaretler iletilerek büyük ölçüde özelleştirilebilir veya Lighthouse CI'nın yapılandırma dosyasını (lighthouserc.js) özelleştirme.

Lighthouse CI'nın temel işlevi öncelikle Lighthouse CI CLI, Lighthouse CI genellikle şu yaklaşımlardan yararlanabilirsiniz:

Sürekli entegrasyon kapsamında Lighthouse CI'yı çalıştırma
Her pull'da çalışan ve yorum yapan bir Lighthouse CI GitHub Action'ı kullanma istek
Lighthouse tarafından sağlanan kontrol paneli ile zaman içindeki performansı izleme Sunucu.

Bu yaklaşımların tümü Lighthouse CI CLI üzerine kurulmuştur.

Lighthouse CI'nın alternatifleri arasında üçüncü taraf performans izleme bulunur. veya CI sırasında performans verilerini toplamak için kendi komut dosyanızı yazma bahsedeceğim. İzin vermek istiyorsanız üçüncü taraf bir hizmet kullanmayı performans izleme sunucunuzun yönetimini başka biri yapıyorsa ve veya bildirim özellikleri (e-posta ya da Slack gibi) istiyorsanız entegrasyonu) kendi kendinize oluşturmanız gerekmez.

Lighthouse CI'yı yerel olarak kullanma

Bu bölümde Lighthouse CI CLI'ın yerel olarak nasıl çalıştırılıp yükleneceği ve lighthouserc.js yapılandırması. Lighthouse CI CLI'ı yerel olarak çalıştırmak lighthouserc.js cihazınızın doğru şekilde yapılandırıldığından emin olmanın en kolay yolu.

Lighthouse CI CLI'ı yükleyin.
```
npm install -g @lhci/cli
```
Lighthouse CI, kök konumuna bir lighthouserc.js dosyası yerleştirilerek yapılandırılır. depolayabilmenizi sağlar. Bu dosya zorunludur ve Lighthouse CI içerir yapılandırma bilgileri. Lighthouse CI, her ne kadar aynı zamanda git olmadan kullanılamaz depo bu makaledeki talimatlarda, proje deponuzun git'i kullanın.
Deponuzun kök düzeyinde bir lighthouserc.js yapılandırması oluşturun dosyası olduğundan emin olun.
```
touch lighthouserc.js
```

Aşağıdaki kodu lighthouserc.js alanına ekleyin. Bu kod boş Lighthouse CI yapılandırması. Bu yapılandırmaya şunu ekleyeceksiniz: devam edebilirsiniz.

module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};

Lighthouse CI her çalıştığında, sitenizi sunmak için bir sunucu başlatır. Bu sunucu, Lighthouse'un başka hiçbir yerde değilken bile sitenizi çalışıyor olabilir. Lighthouse CI çalışmayı tamamladığında sunucuyu otomatik olarak kapatır. Sunumun doğru şekilde çalıştığından emin olmak için staticDistDir veya startServerCommand özellikler.

Siteniz statikse staticDistDir özelliğini ci.collect nesnesini tanımlayın. Lighthouse CI, sitenizi test ederken bu dosyaları sunmak için kendi sunucusunu kullanabilir. Eğer site statik değilse startServerCommand özelliğini Sunucunuzu başlatan komutu belirten ci.collect nesnesi. Lighthouse CI, test sırasında yeni bir sunucu işlemi başlatır ve kapatır. düşebilir.
```
// Static site example
collect: {
  staticDistDir: './public',
}
```
```
// Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}
```
URL'yi url özelliğini ci.collect nesnesine ekleyerek Lighthouse CI'nın birlikte çalıştırmanız gerekir. url özelliğinin değeri şöyle olmalıdır: bir URL dizisi olarak sağlanır; bu dizi bir veya daha fazla URL içerebilir. Ölçüt Lighthouse CI, her URL için Lighthouse'u üç kez çalıştırır.
```
collect: {
  // ...
  url: ['http://localhost:8080']
}
```
Not: Bu URL'ler önceki adım. Bu nedenle, Lighthouse CI'yı yerel olarak çalıştırıyorsanız bu URL'ler büyük olasılıkla üretim barındırıcınız yerine localhost içerir.
URL'yi target özelliğini ci.upload nesnesine ekleyin ve değeri 'temporary-public-storage'. tarafından toplanan Lighthouse raporları Lighthouse CI, geçici olarak herkese açık depolama alanına yüklenir. Raporda orada yedi gün kalır ve sonra otomatik olarak silinir. Bu kurulum kılavuz, "herkese açık geçici depolama"yı kullanıyor hızlı olduğundan tıklayın. Lighthouse raporlarını depolamanın diğer yolları hakkında bilgi edinmek için değerini belgeleri inceleyin.
```
upload: {
  target: 'temporary-public-storage',
}
```
Raporun depolama konumu şuna benzer:
```
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
```
(Rapor zaten silindiği için bu URL çalışmaz.)
autorun komutunu kullanarak terminalden Lighthouse CI CLI'ı çalıştırın. Bu, Lighthouse'u üç kez çalıştırır ve ortanca değerindeki Lighthouse'u yükler rapordur.
```
lhci autorun
```
Lighthouse CI'yı doğru şekilde yapılandırdıysanız bu komutu çalıştırdığınızda şuna benzer çıktılar üretir:
```
✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Started a web server on port 65324...
Running Lighthouse 3 time(s) on http://localhost:65324/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:65324/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.
```
Konsol çıkışında GitHub token not set mesajını yoksayabilirsiniz. CEVAP GitHub jetonu yalnızca GitHub ile Lighthouse CI kullanmak istediğinizde gereklidir İşlem. GitHub Action'ının nasıl kurulacağı bu makalenin ilerleyen kısımlarında açıklanmaktadır.

Çıkıştaki şununla başlayan bağlantıyı tıklama: https://storage.googleapis.com... sizi Lighthouse raporuna yönlendirecek ortanca Lighthouse çalıştırmasına karşılık gelir.

autorun tarafından kullanılan varsayılanlar, komut satırı veya lighthouserc.js. Örneğin, aşağıdaki lighthouserc.js yapılandırması her autorun için beş Lighthouse çalıştırmasının toplanması gerektiğini gösterir yürütülür.

numberOfRuns özelliğini kullanmak için lighthouserc.js öğesini güncelleyin:

module.exports = {
    // ...
    collect: {
      numberOfRuns: 5
    },
  // ...
  },
};

autorun komutunu yeniden çalıştırın:

lhci autorun

Terminal çıkışı, Lighthouse'un diğer işlemler yerine beş kez çalıştırıldığını göstermelidir değişiklik gösterir:

✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Automatically determined ./dist as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.

Started a web server on port 64444...
Running Lighthouse 5 time(s) on http://localhost:64444/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Run #4...done.
Run #5...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:64444/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.

Diğer yapılandırma seçenekleri hakkında bilgi edinmek için Lighthouse CI'ya bakın. yapılandırma dokümanlarına göz atın.

Lighthouse CI'yı çalıştırmak için CI sürecinizi ayarlayın

Lighthouse CI, en sevdiğiniz CI aracıyla kullanılabilir. CI'nizi Yapılandırma Sağlayıcı Lighthouse CI dokümanlarının bölümü, ortak CI araçlarının yapılandırma dosyalarına Lighthouse CI'yı dahil etme. Bu kod örnekleri, verileri toplamak için Lighthouse CI'nın nasıl çalıştırılacağını gösterir. performans ölçümlerini karşılaştırabilirsiniz.

Performans ölçümleri toplamak için Lighthouse CI'yı kullanmak iyi bir başlangıç noktasıdır performans izleme ile. Ancak ileri düzey kullanıcılar ve Lighthouse CI'yı kullanarak, önceden tanımlanmış değerleri karşılamamaları halinde derlemelerde gibi ölçütleri (ör. belirli Lighthouse denetimlerinden geçerken) kullanabilirsiniz. Bu davranış assert özelliğinin lighthouserc.js özelliğine sahip olduğundan emin olun.

Lighthouse CI, üç onay düzeyini destekler:

off: Onayları yoksay
warn: stderr yazdırma hataları
error: stderr'e yapılan yazdırma hataları ve Lighthouse CI'dan sıfır olmayan bir değerle çıkış çıkış kod

Aşağıda, aşağıdakileri içeren bir lighthouserc.js yapılandırması örneği verilmiştir: onaylarıdır. Lighthouse'un performans puanı için onaylar belirler ve erişilebilirlik kategorileri. Bunu denemek için aşağıda gösterilen iddiaları lighthouserc.js dosyanızı ve ardından Lighthouse CI'yı yeniden çalıştırın.

module.exports = {
  ci: {
    collect: {
      // ...
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 1}],
        'categories:accessibility': ['error', {minScore: 1}]
      }
    },
    upload: {
      // ...
    },
  },
};

Oluşturduğu konsol çıkışı aşağıdaki gibi görünür:

Lighthouse CI tarafından oluşturulan bir uyarı mesajının ekran görüntüsü

Lighthouse CI onayları hakkında daha fazla bilgi için belgeleri inceleyin.

Lighthouse CI çalıştırmak için GitHub Action'ı oluşturma

Çalıştırmak için GitHub Action kullanılabilir Lighthouse CI. Bu komut, bir kod kullanıldığında yeni bir Lighthouse raporu GitHub deposunun herhangi bir dalına aktarılır. Bunu birlikte kullanın bir duruma sahip kontrol et kullanabilirsiniz.

GitHub durum kontrolünün ekran görüntüsü

Deponuzun kök dizininde şu isimli bir dizin oluşturun: .github/workflows İlgili içeriği oluşturmak için kullanılan iş akışları bu dizine eklenir. İş akışı, önceden belirlenmiş bir zamanda çalışır (örneğin, kod aktarıldığında) ve bir veya daha fazla işlemden oluşur.
```
mkdir .github
mkdir .github/workflows
```
.github/workflows ürününde lighthouse-ci.yaml adlı bir dosya oluşturun. Bu dosya yeni bir iş akışı için yapılandırmayı koruyacak.
```
touch lighthouse-ci.yaml
```

Aşağıdaki metni lighthouse-ci.yaml adlı reklam grubuna ekleyin.

name: Build project and run Lighthouse CI
on: [push]
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - name: npm install
        run: |
          npm install
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.3.x
          lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"

Bu yapılandırma, çalışacak tek bir iş içeren bir iş akışı ayarlar. anlamına gelir. Bu işin dört adımı vardır:

Lighthouse CI'nın çalıştırılacağı depoya göz atın
Düğümü yükleyin ve yapılandırın
Gerekli npm paketlerini yükleyin
Lighthouse CI'yı çalıştırın ve sonuçları geçici olarak herkese açık depolama alanına yükleyin.

Bu değişiklikleri kaydedin ve GitHub'a aktarın. Kampanyayı doğru bir şekilde yukarıdaki adımlar uygulandığında, kodun GitHub'a aktarılması iş akışını çalıştırmayı tetikler. yazın.
Lighthouse CI'nın tetiklendiğini onaylamak ve raporu görüntülemek için projenizin İşlemler sekmesine gidin. Burada Proje oluşturun ve Lighthouse CI'yı çalıştırın en uygun son kayıt.

Belirli bir kayda karşılık gelen Lighthouse raporuna gidebilirsiniz İşlemler sekmesinden. Kaydetmeyi ve ardından Lighthouse CI'yı tıklayın. daha sonra Lighthouse CI'yı çalıştırma adımının sonuçlarını genişletin.

Lighthouse CI'yı çalıştırmak için az önce bir GitHub Action ayarladınız. Bu, en çok GitHub durumuyla birlikte kullanıldığında kullanışlıdır onay kutusunu işaretleyin.

GitHub durum denetimi ayarla

Durum denetimi, yapılandırıldıysa her halkla ilişkiler ve genellikle bir testin sonuçları veya bir testin başarısı seçeceğiz.

GitHub "Settings"in ekran görüntüsü sekmesinden

Aşağıdaki adımlarda Lighthouse CI için durum denetiminin nasıl ayarlanacağı açıklanmaktadır.

Lighthouse CI GitHub uygulamasına gidin. sayfasına gidin ve Yapılandır'ı tıklayın.
(İsteğe bağlı) GitHub'da birden fazla kuruluşa dahilseniz Lighthouse'u kullanmak istediğiniz deponun sahibi olan kuruluş CI.
Tüm depolarda Lighthouse CI'yı etkinleştirmek istiyorsanız All Repositories'i (Tüm depolar) seçin. Depoları yalnızca kullanmak istiyorsanız Yalnızca depoları seçin'i seçin depoları seçmeli ve ardından depoları seçmelidir. Ardından Yükle ve Yetkilendir'i tıklayın.
Gösterilen jetonu kopyalayın. Sonraki adımda bu adı kullanacaksınız.
Jetonu eklemek için GitHub'ınızın Settings (Ayarlar) sayfasına gidin deponuz varsa Gizli anahtarlar'ı, ardından Yeni gizli anahtar ekle'yi tıklayın.
Name (Ad) alanını LHCI_GITHUB_APP_TOKEN olarak ve Value'yu (Değer) ayarlayın. alanını son adımda kopyaladığınız jetona ekleyin ve ardından Ekle gizli düğmesi.
lighthouse-ci.yaml dosyasına gidin ve yeni ortam gizli anahtarını "Run Lighthouse CI"ya ekleyin. komutuna ekleyin.

-           name: run Lighthouse CI
            run: |
              npm install -g @lhci/cli@0.3.x
              lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+            env:
+              LHCI_GITHUB_APP_TOKEN: $

Durum kontrolü kullanıma hazır. Test etmek için yeni bir pull oluşturun talep edin veya mevcut bir pull isteğine kayıt aktarın.

Lighthouse CI sunucusunu kurma

Lighthouse CI sunucusu, geçmiş deneyimi keşfetmek için bir kontrol paneli sağlar Lighthouse raporları. Ayrıca, veriler için özel, uzun vadeli veri deposu görevi de Lighthouse raporları.

Lighthouse CI Server kontrol panelinin ekran görüntüsü

Lighthouse CI Server'daki iki Lighthouse raporunu karşılaştırmanın ekran görüntüsü

Karşılaştırılacak kaydetmeleri seçin.
İki kaydetme arasındaki Lighthouse puanının değişim miktarı.
Bu bölümde yalnızca iki kaydetme arasında değişen metrikler gösterilir.
Regresyonlar pembe renkle vurgulanır.
İyileştirmeler mavi renkle vurgulanır.

Lighthouse CI Server, dağıtım ve güvenlik konusunda deneyimli kullanıcılar için uygundur. yönetebiliyor.

Lighthouse CI sunucusunun kurulumuyla ilgili bilgiler ve dağıtım için Heroku ve Docker'ı kullanıyorsanız talimatları inceleyin.

Daha fazla bilgi

Lighthouse CI GitHub deposu