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

Lighthouse CI ile performans izleme

GitHub Actions gibi bir sürekli entegrasyon sistemine 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 şu konular ele alınmaktadır:

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

Genel bakış

Lighthouse CI, performans izleme için Lighthouse'u kullanmayı kolaylaştıran ücretsiz bir araç paketidir. Tek bir Lighthouse raporu, bir web sayfasının çalıştırıldığı anda gösterdiği performansı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 tanımlamak veya sürekli entegrasyon işlemleri sırasında performans eşiklerine ulaşılmasını sağlamak için kullanılabilir. Performans izleme, Lighthouse CI'nın en yaygın kullanım alanı olsa da Lighthouse raporunun SEO veya erişilebilirlik gibi diğer yönlerini 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 KSA'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ını yürütür, ortanca Lighthouse raporunu tanımlar ve raporu depolama için yükler. Bu davranış, ek bayraklar iletilerek veya Lighthouse CI'nın yapılandırma dosyası lighthouserc.js özellenerek yoğun bir şekilde özelleştirilebilir.

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

Sürekli entegrasyon kapsamında Lighthouse CI'yı çalıştırma
Her pull isteğinde çalışan ve yorum yapan bir Lighthouse CI GitHub Action kullanma
Lighthouse Server tarafından sağlanan kontrol paneli aracılığıyla zaman içindeki performansı izleme.

Tüm bu yaklaşımlar Lighthouse CI CLI üzerine inşa edilmiştir.

Lighthouse CI'ya alternatif olarak, üçüncü taraf performans izleme hizmetleri veya CI sürecinde performans verilerini toplamak için kendi komut dosyanızı yazma da yer alır. Performans izleme sunucunuzun ve test cihazlarınızın yönetimini başka birinin yönetmesini tercih ediyorsanız veya bu özellikleri kendiniz oluşturmak zorunda kalmadan bildirim özelliklerinden (e-posta veya Slack entegrasyonu gibi) yararlanmak istiyorsanız üçüncü taraf hizmeti kullanmayı düşünmelisiniz.

Yerel olarak Lighthouse CI'yı kullanma

Bu bölümde Lighthouse CI CLI'nın yerel olarak nasıl çalıştırılacağı ve yükleneceği ve lighthouserc.js ürününün nasıl yapılandırılacağı açıklanmaktadır. Lighthouse CI CLI'yi yerel olarak çalıştırmak, lighthouserc.js ürünü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 konumuna bir lighthouserc.js dosyası eklenerek 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ılabilir ancak bu makaledeki talimatlarda, proje deponuzun git kullanacak şekilde yapılandırıldığı varsayılır.
Kod deponuzun kök dizininde bir lighthouserc.js yapılandırma dosyası oluşturun.
```
touch lighthouserc.js
```
Aşağıdaki kodu lighthouserc.js hesabına ekleyin. Bu kod boş bir Lighthouse CI yapılandırmasıdır. Bu yapılandırmaya sonraki adımlarda ekleyeceksiniz.
```
module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};
```
Bu Lighthouse CI her çalıştığında sitenize hizmet vermek için bir sunucu başlatır. Bu sunucu, başka hiçbir sunucu çalışmıyorken bile Lighthouse'un sitenizi yüklemesini sağlar. Lighthouse CI çalışmayı bitirdiğinde, sunucu otomatik olarak kapatılır. Yayının doğru şekilde çalıştığından emin olmak için staticDistDir veya startServerCommand özelliklerini yapılandırmanız gerekir.

Siteniz statikse statik dosyalarınızın nerede bulunduğunu belirtmek için staticDistDir özelliğini 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 startServerCommand özelliğini ci.collect nesnesine ekleyin. Lighthouse CI, test sırasında yeni bir sunucu işlemi başlatır ve daha sonra 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 özelliğinin değeri bir URL dizisi olarak sağlanmalıdır. Bu dizi, bir veya daha fazla URL içerebilir. Lighthouse CI, varsayılan olarak her URL'ye karşı 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 sunulabilmelidir. Bu nedenle, Lighthouse CI'yı yerel olarak çalıştırıyorsanız bu URL'ler üretim ana makineniz yerine muhtemelen localhost öğesini içermelidir.
target özelliğini ci.upload nesnesine 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 orada kalır ve daha sonra otomatik olarak silinir. Bu kurulum kılavuzunda, kurulumu hızlı olduğundan "geçici ve 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 depolanacağı konum şuna benzer:
```
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
```
(Rapor zaten silinmiş olduğundan bu URL çalışmaz.)
autorun komutunu kullanarak terminalde Lighthouse CI CLI'yi çalıştırın. Bu işlem, Lighthouse'u üç kez çalıştırır ve ortanca değeri olan 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ış oluşturulur:
```
✅  .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. GitHub jetonu, yalnızca Lighthouse CI'yı GitHub İşlemi ile kullanmak istiyorsanız gereklidir. GitHub Action'ının nasıl ayarlanacağı bu makalenin ilerleyen kısımlarında açıklanmaktadır.

Çıkışta 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 yürütüldüğünde beş Lighthouse çalıştırmasının toplanması gerektiğini belirtir.

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

✅  .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 işleminizi ayarlayın

Lighthouse CI, en sevdiğiniz CI aracıyla kullanılabilir. Lighthouse CI belgelerinin CI Sağlayıcınızı Yapılandırın bölümü, Lighthouse CI'nın yaygın CI araçlarının yapılandırma dosyalarına nasıl ekleneceğini gösteren kod örnekleri içerir. Özellikle bu kod örnekleri, CI sürecinde performans ölçümleri toplamak için Lighthouse CI'nı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 noktadır. Ancak ileri düzey kullanıcılar, belirli Lighthouse denetimlerini geçme veya tüm performans bütçelerini karşılama gibi önceden tanımlanmış kriterleri karşılamıyorsa derlemeleri başarısız olmak için bir adım daha ileri gitmek ve 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, üç onaylama düzeyini destekler:

off: Onayları yoksay
warn: stderr'e yazdırma hataları
error: stderr'e 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'un performans ve erişilebilirlik kategorilerinin puanları için onaylar ayarlar. Bunu denemek için aşağıda gösterilen onaylamaları 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 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'yı çalıştırmak için GitHub Action oluşturun

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

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

Kod deponuzun kök dizininde .github/workflows adlı bir dizin oluşturun. Projenizin iş akışları bu dizine gider. İş akışı, önceden belirlenmiş bir zamanda çalışan (örneğin, kod aktarıldığında) bir veya daha fazla işlemden oluşan bir süreçtir.
```
mkdir .github
mkdir .github/workflows
```
.github/workflows uygulamasında lighthouse-ci.yaml adlı bir dosya oluşturun. Bu dosya, yeni bir iş akışının yapılandırmasını saklar.
```
touch lighthouse-ci.yaml
```

Aşağıdaki metni lighthouse-ci.yaml kampanyası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 her yeni kod aktarıldığında çalışacak tek bir işten oluşan bir iş akışı oluşturur. 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ıp sonuçları geçici bir herkese açık depolama alanına yükleyin.

Bu değişiklikleri uygulayın ve GitHub'a aktarın. Yukarıdaki adımları doğru bir şekilde uyguladıysanız GitHub'a kod aktardığınızda yeni eklediğiniz iş akışı çalıştırılır.
Lighthouse CI'nın tetiklediğini onaylamak ve oluşturduğu raporu görüntülemek için projenizin İşlemler sekmesine gidin. En son kaydetme işleminizin altında Proje derle ve Lighthouse CI Çalıştır iş akışını göreceksiniz.

İşlemler sekmesinden belirli bir kayda karşılık gelen Lighthouse raporuna gidebilirsiniz. Kaydetmeyi, Lighthouse CI iş akışı adımını ve 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 Action'ı ayarladınız. Bu özellik, GitHub durum kontrolü ile birlikte kullanıldığında çok faydalı olur.

GitHub durum denetimi ayarlayın

Durum denetimi (yapılandırılmışsa), her PR'de görünen ve genellikle bir testin sonuçları veya bir 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şun parçasıysanız Lighthouse CI'yı kullanmak istediğiniz depoya sahip olan kuruluşu seçin.
Lighthouse CI'yı tüm depolarda etkinleştirmek istiyorsanız Tüm depolar'ı, yalnızca belirli kod depolarında kullanmak istiyorsanız Yalnızca kod depolarını seç'i ve ardından depoları seçin. Ardından Yükle ve Yetkilendir'i tıklayın.
Gösterilen jetonu kopyalayın. Bu adı bir sonraki adımda kullanacaksınız.
Jetonu eklemek için GitHub deponuzun Ayarlar sayfasına gidip Gizli Anahtarlar'ı, ardından Yeni gizli anahtar ekle'yi tıklayın.
Ad alanını LHCI_GITHUB_APP_TOKEN olarak ayarlayın ve Değer alanını son adımda kopyaladığınız jetona ayarlayın ve ardından 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 denetimi kullanıma hazır. Bunu test etmek için yeni bir pull isteği oluşturun veya mevcut bir pull isteğine bir kaydetme aktarın.

Lighthouse CI Server'ı kurma

Lighthouse CI sunucusu, geçmiş Lighthouse raporlamasını keşfetmek için bir kontrol paneli sağlar. Ayrıca Lighthouse raporları için özel, uzun vadeli bir veri deposu olarak da çalışabilir.

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

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

Karşılaştırılacak kaydetmeleri seçin.
İki kaydetme arasındaki Lighthouse puanının 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, kendi altyapılarını dağıtma ve yönetme konusunda rahat olan kullanıcılar için idealdir.

Dağıtım için Heroku ve Docker'ı kullanmayla ilgili tarifler de dahil olmak üzere Lighthouse CI sunucusunu ayarlama hakkında bilgi edinmek için bu instructions bakın.

Daha fazla bilgi

Lighthouse CI GitHub deposu