Google, içerikleri tercih ettiğiniz dile çevirmek için yapay zeka teknolojisini kullanır. Yapay zeka çevirilerinde hata olabilir.

Lighthouse CI ile performans izleme

Lighthouse'u GitHub Actions gibi bir sürekli entegrasyon sistemine 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'yı kullanma
CI sağlayıcınızı Lighthouse CI'yı çalıştıracak şekilde yapılandırma
Lighthouse CI için GitHub İşlemi ve durum kontrolü ayarlama. Bu işlem, Lighthouse sonuçlarını GitHub pull isteklerinde otomatik olarak gösterir.
Lighthouse raporları için Performance Dashboard ve veri deposu oluşturma

Genel Bakış

Lighthouse CI, performans izleme için Lighthouse'un kullanımını kolaylaştıran ücretsiz araçlardan oluşan bir pakettir. Tek bir Lighthouse raporu, çalıştırıldığı sırada web sayfasının performansının anlık görüntüsünü sağlar. Lighthouse CI, 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. Lighthouse CI'ın en yaygın kullanım alanı performans izleme olsa da Lighthouse raporunun diğer yönlerini (ör. SEO veya erişilebilirlik) izlemek için de kullanılabilir.

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

Lighthouse CI'nın temel işlevi öncelikle Lighthouse CI CLI'da kapsüllenmiş olsa da Lighthouse CI genellikle aşağıdaki yaklaşımlardan biriyle kullanılır:

Lighthouse CI'yı sürekli entegrasyonun bir parçası olarak çalıştırma
Her pull isteğinde çalıştırılan ve yorum yapan bir Lighthouse CI GitHub işlemi kullanma
Lighthouse Server tarafından sağlanan kontrol paneli aracılığıyla zaman içindeki performansı izleme.

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

Lighthouse CI'ya alternatif olarak üçüncü taraf performans izleme hizmetlerini kullanabilir veya CI sürecinde performans verilerini toplamak için kendi komut dosyanızı yazabilirsiniz. Performans izleme sunucunuzun ve test cihazlarınızın yönetimini başkasının yapmasını tercih ediyorsanız veya bildirim özelliklerini (e-posta ya da Slack entegrasyonu gibi) kendiniz oluşturmak zorunda kalmadan kullanmak istiyorsanız üçüncü taraf hizmetlerinden yararlanabilirsiniz.

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 aracının nasıl yapılandırılacağı açıklanmaktadır. Lighthouse CI CLI'yi yerel olarak çalıştırmak, lighthouserc.js dosyanızın doğru şekilde yapılandırıldığından emin olmanın en kolay yoludur.

Lighthouse CI KSA'yı 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ılmaktadır.
Deponuzun kök dizininde 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ışmıyorken bile Lighthouse'un sitenizi yüklemesini sağlar. Lighthouse CI çalışmayı tamamladığında sunucuyu otomatik olarak kapatır. Yayınlamanın doğru şekilde çalışması için staticDistDir veya startServerCommand özelliklerini yapılandırmanız gerekir.

Siteniz statikse statik dosyalarınızın nerede bulunduğunu belirtmek için ci.collect nesnesine staticDistDir özelliğini 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 testten sonra 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, URL dizisi olarak sağlanmalıdır. Bu dizi, bir veya daha fazla URL içerebilir. Lighthouse CI, varsayılan olarak her URL için Lighthouse'u üç 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 sunulabilir olmalıdır. Bu nedenle, Lighthouse CI'yı yerel olarak çalıştırıyorsanız bu URL'ler muhtemelen üretim ana makineniz yerine localhost içermelidir.
ci.upload nesnesine target özelliğini ekleyin ve değeri 'temporary-public-storage' olarak ayarlayın. Lighthouse CI tarafından toplanan Lighthouse raporları, geçici herkese açık depolama alanına yüklenir. Rapor yedi gün boyunca orada 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 konumu şuna benzer:
```
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
```
(Rapor silindiği için bu URL çalışmaz.)
autorun komutunu kullanarak terminalden Lighthouse CI CLI'yı çalıştırın. Bu işlem, Lighthouse'u üç kez çalıştırır ve ortanca Lighthouse raporunu yükler.
```
lhci autorun
```
Lighthouse CI'yı doğru şekilde yapılandırdıysanız bu komutu çalıştırdığınızda şuna 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'yı bir GitHub işlemiyle kullanmak istiyorsanız gereklidir. GitHub İşlemi'nin nasıl ayarlanacağı bu makalenin ilerleyen bölümlerinde açıklanmıştır.

Çıktıda https://storage.googleapis.com... ile başlayan bağlantıyı tıkladığınızda ortanca 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 yürütüldüğünde beş Lighthouse çalıştırmasının toplanması gerektiğini gösterir.

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

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

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

lhci autorun

Terminal çıkışında, Lighthouse'un varsayılan olarak üç kez değil, beş kez çalıştırıldığı gösterilmelidir:

✅  .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 belgelerine bakın.

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

Lighthouse CI, favori CI aracınızla kullanılabilir. Lighthouse CI belgelerinin Configure Your CI Provider (CI Sağlayıcınızı Yapılandırma) bölümünde, Lighthouse CI'nın yaygın CI araçlarının yapılandırma dosyalarına nasıl dahil edileceğini gösteren kod örnekleri yer alır. Bu kod örnekleri, CI sürecinde performans ölçümlerini toplamak için Lighthouse CI'ın nasıl çalıştırılacağını gösterir.

Performans ölçümlerini toplamak için Lighthouse CI'yı kullanmak, performans izlemeye başlamak için iyi bir yöntemdir. Ancak ileri düzey kullanıcılar bir adım daha ileri giderek belirli Lighthouse denetimlerini geçme veya tüm performans bütçelerini karşılama gibi önceden tanımlanmış ölçütleri karşılamayan derlemeleri başarısız kılmak için Lighthouse CI'yı kullanmak isteyebilir. Bu davranış, lighthouserc.js dosyasının assert özelliği aracılığıyla yapılandırılır.

Lighthouse CI, üç düzeyde onaylamayı destekler:

off: onayları yoksay
warn: stderr'ye yazdırma hataları
error: Hataları stderr'e yazdırın ve Lighthouse CI'dan sıfır olmayan bir çıkış kodu ile çıkın.

Aşağıda, onaylar içeren bir lighthouserc.js yapılandırması örneği verilmiştir. Lighthouse'un performans ve erişilebilirlik kategorilerinin puanları için iddialar belirler. Bunu denemek için aşağıdaki onayları lighthouserc.js dosyanıza ekleyin ve 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 uyarı mesajının ekran görüntüsü

Lighthouse CI onayları hakkında daha fazla bilgi için belgelere bakın.

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

Lighthouse CI'yı çalıştırmak için GitHub İşlemi kullanılabilir. Bu işlem, bir GitHub deposunun herhangi bir dalına kod değişikliği gönderildiğinde yeni bir Lighthouse raporu oluşturur. Bu sonuçları her pull isteğinde görüntülemek için bu özelliği durum kontrolü ile 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 eklenir. İş akışı, önceden belirlenmiş bir zamanda (ör. kod gönderildiğinde) çalışan ve bir veya daha fazla işlemden oluşan bir süreçtir.
```
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ı barındıracak.
```
touch lighthouse-ci.yaml
```

lighthouse-ci.yaml dosyasına aşağıdaki metni 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 gönderildiğinde çalıştırılacak tek bir işten oluşan bir iş akışı oluşturur. Bu iş dört adımdan oluşur:

Lighthouse CI'nın çalıştırılacağı depoyu kontrol edin.
Node'u yükleme ve yapılandırma
Gerekli npm paketlerini yükleme
Lighthouse CI'yı çalıştırın ve sonuçları geçici herkese açık depolama alanına yükleyin.

Bu değişiklikleri kaydedip GitHub'a aktarın. Yukarıdaki adımları doğru şekilde uyguladıysanız kodu GitHub'a aktardığınızda yeni eklediğiniz iş akışı çalıştırılır.
Lighthouse CI'nın tetiklendiğini onaylamak ve oluşturduğu raporu görüntülemek için projenizin İşlemler sekmesine gidin. En son kaydınızın altında Build project and Run Lighthouse CI (Projeyi derle ve Lighthouse CI'yı çalıştır) iş akışını görüyor olmanız gerekir.

İşlemler sekmesinden belirli bir kayda karşılık gelen Lighthouse raporuna gidebilirsiniz. İşlemeyi tıklayın, Lighthouse CI iş akışı adımını tıklayın, ardından Lighthouse CI'yı çalıştır adımının sonuçlarını genişletin.

Lighthouse CI'yı çalıştırmak için bir GitHub işlemi oluşturdunuz. Bu, GitHub durum kontrolü ile birlikte kullanıldığında en faydalı olacaktır.

GitHub durum kontrolü ayarlama

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

GitHub "Settings" (Ayarlar) sekmesinin ekran görüntüsü

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

Lighthouse CI GitHub Uygulaması sayfasına gidin ve Configure'u (Yapılandır) tıklayın.
(İsteğe bağlı) GitHub'da birden fazla kuruluşa üyeyseniz Lighthouse CI'yı kullanmak istediğiniz deponun sahibi olan kuruluşu seçin.
Lighthouse CI'yı tüm depolarda etkinleştirmek istiyorsanız All repositories'yi (Tüm depolar), yalnızca belirli depolarda kullanmak istiyorsanız Only select repositories'yi (Yalnızca belirli depoları seç) belirleyin ve ardından depoları seçin. Ardından Yükle ve Yetkilendir'i tıklayın.
Gösterilen jetonu kopyalayın. Bu kodu bir sonraki adımda kullanacaksınız.
Jetonu eklemek için GitHub deponuzun Settings (Ayarlar) sayfasına gidin, Secrets'ı (Gizli anahtarlar) ve ardından Add a new secret'ı (Yeni gizli anahtar ekle) tıklayın.
Name (Ad) alanını LHCI_GITHUB_APP_TOKEN, Value (Değer) alanını ise son adımda kopyaladığınız jeton olarak ayarlayın ve Add secret (Gizli anahtar ekle) düğmesini tıklayın.
lighthouse-ci.yaml dosyasına gidin ve yeni ortam gizli anahtarını "run Lighthouse CI" 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 isteği oluşturun veya mevcut bir pull isteğine bir commit gönderin.

Lighthouse CI sunucusunu kurma

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

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

Lighthouse CI Server'da iki Lighthouse raporunun karşılaştırılmasının ekran görüntüsü

Karşılaştırılacak commit'leri seçin.
Lighthouse puanının iki kayıt arasında değiştiği miktar.
Bu bölümde yalnızca iki commit arasında değişen metrikler gösterilir.
Gerilemeler 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 uygun seçenektir.

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

Daha fazla bilgi

Lighthouse CI GitHub deposu