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, sürekli entegrasyon sırasında Lighthouse'u kullanmaya yönelik bir araç paketidir. Lighthouse CI, geliştirici iş akışlarına birçok farklı şekilde dahil edilebilir. Bu kılavuzda aşağıdaki konular ele alınmaktadır:

Lighthouse CI CLI'ı kullanma.
CI sağlayıcınızı Lighthouse CI'yı çalıştıracak şekilde yapılandırma.
Lighthouse CI için bir GitHub işlemi ve durum kontrolü oluşturma. Bu işlem, GitHub pull isteklerinde otomatik olarak Lighthouse sonuçlarını gösterir.
Lighthouse raporları için performans kontrol paneli ve veri deposu oluşturma.

Genel Bakış

Lighthouse CI, performans izleme için Lighthouse kullanımını kolaylaştıran ücretsiz bir araç paketidir. Tek bir Lighthouse raporu, bir web sayfasının çalıştırıldığı sıradaki performansının anlık görüntüsünü sağlar. Lighthouse CI ise bu bulguların zaman içinde nasıl değiştiğini gösterir. Bu, belirli kod değişikliklerinin etkisini belirlemek veya sürekli entegrasyon süreçleri sırasında performans eşiklerinin karşılandığından emin olmak için kullanılabilir. Performans izleme, Lighthouse CI için en yaygın kullanım alanı olsa da Lighthouse raporunun diğer yönlerini (ör. SEO veya erişilebilirlik) izlemek için de kullanılabilir.

Lighthouse CI'nın temel işlevi, Lighthouse CI komut satırı arayüzü tarafından sağlanır. (Not: Bu, Lighthouse CLI'den ayrı bir araçtır.) Lighthouse CI CLI, Lighthouse CI'yi kullanmak için bir dizi komut sağlar. Örneğin, autorun komutu birden fazla Lighthouse çalıştırması gerçekleştirir, orta Lighthouse raporunu tanımlar ve raporu depolama alanına yükler. Bu davranış, ek işaretler iletilerek veya Lighthouse CI'nin yapılandırma dosyası lighthouserc.js özelleştirilerek büyük ölçüde özelleştirilebilir.

Lighthouse CI'nin temel işlevi temel olarak Lighthouse CI CLI'sinde kapsanmasına rağmen Lighthouse CI genellikle aşağıdaki yaklaşımlardan biriyle kullanılır:

Sürekli entegrasyon kapsamında Lighthouse CI'yi çalıştırma
Her pull isteğini çalıştıran ve yorumlayan bir Lighthouse CI GitHub işlemi kullanma
Lighthouse Server'ın sağladığı kontrol paneli aracılığıyla zaman içindeki performansı takip edebilirsiniz.

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

Lighthouse CI'ye alternatifler arasında üçüncü taraf performans izleme hizmetleri veya CI işlemi sırasında performans verilerini toplamak için kendi komut dosyanızı yazmak yer alır. Performans izleme sunucunuzun ve test cihazlarınızın yönetimini başka birinin yapmasını tercih ediyorsanız veya bu özellikleri kendiniz oluşturmak zorunda kalmadan bildirim özellikleri (e-posta veya Slack entegrasyonu gibi) kullanmak istiyorsanız üçüncü taraf hizmeti kullanmayı düşünmeniz önerilir.

Lighthouse CI'yı yerel olarak kullanma

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

Lighthouse CI CLI'yi yükleyin.
```
npm install -g @lhci/cli
```
Lighthouse CI, projenizin deposunun köküne bir lighthouserc.js dosyası yerleştirilerek yapılandırılır. Bu dosya zorunludur ve Lighthouse CI ile ilgili yapılandırma bilgilerini içerir. Lighthouse CI, git deposu olmadan kullanılacak şekilde yapılandırılabilse de bu makaledeki talimatlarda, proje deponuzun Git kullanacak şekilde yapılandırıldığı varsayılmıştır.
Deponuzun kök düzeyinde bir lighthouserc.js yapılandırma dosyası oluşturun.
```
touch lighthouserc.js
```
Aşağıdaki kodu lighthouserc.js dosyasına ekleyin. Bu kod, boş bir Lighthouse CI yapılandırmasıdır. Sonraki adımlarda bu yapılandırmaya ekleme yapacaksınız.
```
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, başka sunucu çalışmadığında bile Lighthouse'un sitenizi yüklemesini sağlar. Lighthouse CI çalışmayı tamamladığında sunucu otomatik olarak kapatılır. Yayınlamanın düzgün çalıştığından emin olmak için staticDistDir veya startServerCommand mülklerini yapılandırmanız gerekir.

Siteniz statikse statik dosyalarınızın nerede olduğunu belirtmek için staticDistDir mülkünü ci.collect nesnesine ekleyin. Lighthouse CI, sitenizi test ederken bu dosyaları sunmak için kendi sunucusunu kullanır. Siteniz statik değilse sunucunuzu başlatan komutu belirtmek için ci.collect nesnesine startServerCommand özelliğini ekleyin. Lighthouse CI, test sırasında yeni bir sunucu işlemi başlatır ve testin ardından bu işlemi kapatır.
```
// Static site example
collect: {
  staticDistDir: './public',
}
```
```
// Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}
```
Lighthouse CI'nın Lighthouse'u çalıştırması gereken URL'leri belirtmek için ci.collect nesnesine url özelliğini ekleyin. url mülkünün değeri bir URL dizisi olarak sağlanmalıdır. Bu dizi bir veya daha fazla URL içerebilir. Lighthouse CI varsayılan olarak Lighthouse'u her URL için üç kez çalıştırır.
```
collect: {
  // ...
  url: ['http://localhost:8080']
}
```
Not: Bu URL'ler, önceki adımda yapılandırdığınız sunucu tarafından yayınlanabilir olmalıdır. Bu nedenle, Lighthouse CI'yi yerel olarak çalıştırıyorsanız bu URL'ler muhtemelen üretim ana makineniz yerine localhost içerir.
ci.upload nesnesine target mülkünü ekleyin ve değeri 'temporary-public-storage' olarak ayarlayın. Lighthouse CI tarafından toplanan Lighthouse raporları, herkese açık geçici depolama alanına yüklenir. Rapor yedi gün boyunca burada kalır ve ardından otomatik olarak silinir. Bu kurulum kılavuzunda, kurulumu hızlı olduğu için "geçici herkese açık depolama alanı" yükleme seçeneği kullanılmaktadır. Lighthouse raporlarını depolamanın diğer yolları hakkında bilgi edinmek için belgelere bakın.
```
upload: {
  target: 'temporary-public-storage',
}
```
Raporun depolama yeri aşağıdaki gibidir:
```
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
```
(Rapor silindiği için bu URL işe yaramaz.)
autorun komutunu kullanarak terminalden Lighthouse CI CLI'ı çalıştırın. Bu işlem, Lighthouse'u üç kez çalıştırır ve ortalama Lighthouse raporunu yükler.
```
lhci autorun
```
Lighthouse CI'yi doğru şekilde yapılandırdıysanız bu komutu çalıştırdığınızda aşağıdakine benzer bir çıkış elde edersiniz:
```
✅  .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ışındaki GitHub token not set mesajını yoksayabilirsiniz. GitHub jetonu yalnızca Lighthouse CI'yi GitHub Action ile kullanmak istiyorsanız gereklidir. GitHub Action'ının nasıl kurulacağı bu makalenin ilerleyen kısımlarında açıklanmaktadır.

Çıktıda https://storage.googleapis.com... ile başlayan bağlantıyı tıkladığınızda ortalama Lighthouse çalıştırmasına karşılık gelen Lighthouse raporuna yönlendirilirsiniz.

autorun tarafından kullanılan varsayılanlar, komut satırı veya lighthouserc.js aracılığıyla geçersiz kılınabilir. Örneğin, aşağıdaki lighthouserc.js yapılandırması, autorun her çalıştırıldığında beş Lighthouse çalıştırması toplanacağını belirtir.

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ışında, Lighthouse'un varsayılan üç yerine beş kez çalıştırıldığı gösterilir:

✅  .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 yapılandırma dokümanlarına bakın.

Lighthouse CI'yi çalıştıracak şekilde CI sürecinizi ayarlama

Lighthouse CI, en sevdiğiniz CI aracıyla kullanılabilir. Lighthouse CI dokümanının CI Sağlayıcınızı Yapılandırın bölümünde, Lighthouse CI'nin yaygın CI araçlarının yapılandırma dosyalarına nasıl dahil edileceğini gösteren kod örnekleri yer alır. Özellikle bu kod örnekleri, CI işlemi sırasında performans ölçümleri toplamak için Lighthouse CI'nin nasıl çalıştırılacağını gösterir.

Performans ölçümlerini toplamak için Lighthouse CI'yi kullanmak, performans izlemeye başlamak için iyi bir başlangıç noktasıdır. Ancak ileri düzey kullanıcılar bir adım daha ileri gidip belirli Lighthouse denetimlerini geçme veya tüm performans bütçelerini karşılama gibi önceden tanımlanmış ölçütleri karşılamadıkları takdirde derlemelerde başarısız olmak için Lighthouse CI'yı kullanmak isteyebilir. Bu davranış, lighthouserc.js dosyasının assert özelliği üzerinden yapılandırılır.

Lighthouse CI üç düzeyde iddiayı destekler:

off: Onayları yoksay
warn: Hataları stderr'ye yazdır
error: Stderr'e yapılan yazdırma hataları ve Lighthouse CI'dan sıfır olmayan bir çıkış koduyla çıkış

Aşağıda, iddialar içeren bir lighthouserc.js yapılandırması örneği verilmiştir. Lighthouse'ın performans ve erişilebilirlik kategorilerinin puanları için iddialar belirler. Bunu denemek için aşağıdaki iddiaları lighthouserc.js dosyanıza ekleyin ve ardından Lighthouse CI'yi 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ışı şu şekilde 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 belgelere bakın.

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

Lighthouse CI'yi çalıştırmak için GitHub işlemi kullanılabilir. Bu işlem, bir GitHub deposunun herhangi bir dalına her kod değişikliği aktarıldığında yeni bir Lighthouse raporu oluşturur. Bu sonuçları her bir çekme isteğinde görüntülemek için bu işlevi bir durum kontrolüyle birlikte kullanın.

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

Deponuzun kök dizininde .github/workflows adlı bir dizin oluşturun. Projenizin iş akışları bu dizine yerleştirilir. İş akışı, önceden belirlenmiş bir zamanda (ör. kod yayınlandığında) çalışan ve bir veya daha fazla işlemden oluşan bir işlemdir.
```
mkdir .github
mkdir .github/workflows
```
.github/workflows içinde lighthouse-ci.yaml adlı bir dosya oluşturun. Bu dosya, yeni bir iş akışının yapılandırmasını içerir.
```
touch lighthouse-ci.yaml
```

Aşağıdaki metni lighthouse-ci.yaml alanına 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, depoya yeni kod her itildiğinde çalışacak tek bir işten oluşan bir iş akışı oluşturur. Bu işin dört adımı vardır:

Lighthouse CI'nin çalışacağı depoyu kontrol edin
Düğümü yükleyin ve yapılandırın
Gerekli npm paketlerini yükleyin
Lighthouse CI'yi çalıştırın ve sonuçları geçici herkese açık depolama alanına yükleyin.

Bu değişiklikleri kaydedip GitHub'a gönderin. Yukarıdaki adımları doğru bir şekilde uyguladıysanız GitHub'a kod gönderdiğinizde, yeni eklediğiniz iş akışı çalıştırılır.
Lighthouse CI'nin tetiklendiğini onaylamak ve oluşturduğu raporu görüntülemek için projenizin İşlemler sekmesine gidin. En son taahhüdünüz altında Proje derleyin ve Lighthouse CI'yı Çalıştır iş akışını görürsünüz.

İşlemler sekmesinden belirli bir kayda karşılık gelen Lighthouse raporuna gidebilirsiniz. Taahhüt işlemini, Lighthouse CI iş akışı adımını ve ardından Lighthouse CI'yi çalıştır adımını genişletin.

Lighthouse CI'yi çalıştırmak için bir GitHub işlemi oluşturdunuz. Bu işlev, GitHub durum kontrolüyle birlikte kullanıldığında en yararlı olur.

GitHub durum kontrolü ayarlama

Yapılandırılmışsa durum kontrolü, her PR'de görünen ve genellikle bir testin sonuçları veya derlemenin başarısı gibi bilgileri içeren bir mesajdır.

GitHub "Ayarlar" sekmesinin ekran görüntüsü

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

Lighthouse CI GitHub uygulaması sayfasına gidin ve Yapılandır'ı tıklayın.
(İsteğe bağlı) GitHub'da birden fazla kuruluşa dahilseniz Lighthouse CI'yı kullanmak istediğiniz deponun sahibi olan kuruluşu seçin.
Lighthouse CI'yi tüm kod depolarında etkinleştirmek istiyorsanız Tüm kod depoları'nı, yalnızca belirli kod depolarında kullanmak istiyorsanız Yalnızca belirli kod depoları'nı seçin ve ardından kod depolarını seçin. 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 deponuzun Ayarlar sayfasına gidin, Gizli veriler'i ve ardından Yeni gizli veri ekle'yi tıklayın.
Ad alanını LHCI_GITHUB_APP_TOKEN, Değer alanını ise son adımda kopyaladığınız jetona ayarlayın ve ardından Gizli bilgi ekle düğmesini tıklayın.
lighthouse-ci.yaml dosyasına gidin ve yeni ortam gizli anahtarını "Lighthouse CI'yi çalıştır" 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. Bunu test etmek için yeni bir çekme isteği oluşturun veya mevcut bir çekme isteğine bir taahhüt gönderin.

Lighthouse CI sunucusunu ayarlama

Lighthouse CI sunucusu, geçmiş Lighthouse raporlarını keşfetmek için bir kontrol paneli sağlar. Ayrıca Lighthouse raporları için özel, uzun süreli bir veri kümesi olarak da kullanılabilir.

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

Lighthouse CI sunucusunda iki Lighthouse raporunun karşılaştırıldığı ekran görüntüsü

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

Lighthouse CI Server, kendi altyapılarını dağıtma ve yönetme konusunda rahat olan kullanıcılar için en uygundur.

Dağıtım için Heroku ve Docker kullanma tarifleri de dahil olmak üzere Lighthouse CI sunucusunu ayarlama hakkında bilgi edinmek için bu talimatları inceleyin.

Daha fazla bilgi

Lighthouse CI GitHub deposu