Lighthouse CI ile performans izleme

Deniz Feneri CI sürekli entegrasyon sırasında Lighthouse’u kullanmak için bir araç takımıdır. Lighthouse CI, geliştirici iş akışlarına birçok farklı şekilde dahil edilebilir. Bu kılavuz aşağıdaki konuları kapsar:

• Lighthouse CI CLI’yi kullanma.
• CI sağlayıcınızı Lighthouse CI’yi çalıştıracak şekilde yapılandırma.
• kurma GitHub İşlemi Ve durum kontrolü Deniz Feneri CI için. Bu, Lighthouse sonuçlarını GitHub çekme isteklerinde otomatik olarak görüntüler.
• Lighthouse raporları için bir performans panosu ve veri deposu oluşturma.

genel bakış #

Lighthouse CI, performans izleme için Lighthouse’u kullanmayı kolaylaştıran bir ücretsiz araçlar paketidir. Tek bir Lighthouse raporu, bir web sayfasının çalıştırıldığı andaki 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österiyor. Bu, belirli kod değişikliklerinin etkisini belirlemek veya sürekli entegrasyon süreçleri sırasında performans eşiklerinin karşılanmasını sağlamak için kullanılabilir. Lighthouse CI için en yaygın kullanım durumu performans izleme olsa da, Lighthouse raporunun SEO veya erişilebilirlik gibi diğer yönlerini izlemek için kullanılabilir.

Lighthouse CI’nin temel işlevleri, Lighthouse CI komut satırı arabirimi tarafından sağlanır. (Not: Bu, Deniz Feneri CLI’sı.) Lighthouse CI CLI, bir dizi komutlar Lighthouse CI’yi kullanmak için. Örneğin, autorun komutu birden fazla Lighthouse çalıştırması yürütür, ortalama Lighthouse raporunu tanımlar ve raporu depolama için yükler. Bu davranış, ek işaretler geçirilerek veya Lighthouse CI’nin yapılandırma dosyası özelleştirilerek büyük ölçüde özelleştirilebilir. lighthouserc.js.

Lighthouse CI’nin temel işlevleri öncelikle Lighthouse CI CLI’de kapsüllenmiş olsa da, Lighthouse CI tipik olarak aşağıdaki yaklaşımlardan biri aracılığıyla kullanılır:

• Lighthouse CI’yi sürekli entegrasyonun bir parçası olarak çalıştırma
• Her çekme isteğinde çalışan ve yorum yapan bir Lighthouse CI GitHub Eylemi kullanma
• Lighthouse Server tarafından sağlanan pano aracılığıyla zaman içindeki performansı izleme.

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

Lighthouse CI’ye alternatifler arasında üçüncü taraf performans izleme hizmetleri veya CI süreci 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 yönetmesini tercih ediyorsanız veya bu özellikleri kendiniz oluşturmak zorunda kalmadan bildirim yetenekleri (e-posta veya Slack entegrasyonu gibi) istiyorsanız, bir üçüncü taraf hizmeti kullanmayı düşünmelisiniz.

Lighthouse CI’yı yerel olarak kullanın #

Bu bölümde, Lighthouse CI CLI’nin yerel olarak nasıl çalıştırılıp kurulacağı ve nasıl yapılandırılacağı açıklanmaktadır. lighthouserc.js. Lighthouse CI CLI’yi yerel olarak çalıştırmak, lighthouserc.js doğru yapılandırılmıştır.

1. Lighthouse CI CLI’yi kurun.

   npm install -g @lhci/cli

   Lighthouse CI, bir lighthouserc.js projenizin deposunun kök dizinindeki dosya. Bu dosya zorunludur ve Lighthouse CI ile ilgili yapılandırma bilgilerini içerecektir. Lighthouse CI olmasına rağmen git deposu olmadan kullanılmak üzere yapılandırılmışbu makaledeki talimatlar, proje deponuzun git kullanacak şekilde yapılandırıldığını varsayar.

2. Deponuzun kök dizininde bir lighthouserc.js yapılandırma dosyası.

   touch lighthouserc.js

3. için aşağıdaki kodu ekleyin lighthouserc.js. Bu kod, boş bir Lighthouse CI yapılandırmasıdır. Daha sonraki adımlarda bu yapılandırmaya ekleyeceksiniz.

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

4. Lighthouse CI her çalıştığında, sitenize hizmet verecek bir sunucu başlatır. Bu sunucu, Lighthouse’un sitenizi başka hiçbir sunucu çalışmıyorken bile yüklemesini sağlayan sunucudur. Lighthouse CI çalışmayı bitirdiğinde, sunucuyu otomatik olarak kapatacaktır. Sunumun doğru çalıştığından emin olmak için, staticDistDir veya startServerCommand özellikler.

   Siteniz statik ise, şunu ekleyin: staticDistDir mülkiyet ci.collect statik dosyalarınızın nerede olduğunu belirtmek için nesne. Lighthouse CI, sitenizi test ederken bu dosyaları sunmak için kendi sunucusunu kullanacaktır. Siteniz statik değilse şunu ekleyin: startServerCommand mülkiyet ci.collect sunucunuzu başlatan komutu belirtmek için nesne. Lighthouse CI, test sırasında yeni bir sunucu işlemi başlatacak ve sonrasında kapatacaktır.

   // Static site example
   collect: {
   staticDistDir: './public',
   }

   // Dynamic site example
   collect: {
   startServerCommand: 'npm run start',
   }

5. Ekle url mülkiyet ci.collect Lighthouse CI’nin Lighthouse’u çalıştırması gereken URL’leri belirtmek için nesne. değeri url özellik, 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 bir URL’ye karşı üç 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 sunulmalıdır. Bu nedenle, yerel olarak Lighthouse CI çalıştırıyorsanız, bu URL’ler muhtemelen şunları içermelidir: localhost üretim sunucunuz yerine.

6. Ekle target mülkiyet ci.upload nesne ve değeri olarak ayarlayın 'temporary-public-storage'. Lighthouse CI tarafından toplanan Lighthouse rapor(lar)ı, geçici genel depolama alanına yüklenecektir. Rapor yedi gün boyunca orada kalacak ve ardından otomatik olarak silinecektir. Bu kurulum kılavuzu, kurulumu hızlı olduğu için “geçici genel depolama” yükleme seçeneğini kullanır. Lighthouse raporlarını saklamanın diğer yolları hakkında bilgi için bkz. belgeler.

   upload: {
   target: 'temporary-public-storage',
   }

   Raporun saklanma yeri şuna benzer olacaktır:

   (Rapor zaten silindiği için bu URL çalışmayacaktır.)

7. Terminalden Lighthouse CI CLI’yi çalıştırın. autorun emretmek. Bu, Lighthouse’u üç kez çalıştıracak ve ortalama Lighthouse raporunu yükleyecektir.

   lhci autorun

   Lighthouse CI’yi doğru şekilde yapılandırdıysanız, bu komutu çalıştırmak şuna benzer bir çıktı üretmelidir:

   ✅  .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.

   göz ardı edebilirsiniz GitHub token not set konsol çıkışındaki mesaj. Bir GitHub belirteci, yalnızca Lighthouse CI’yi bir GitHub İşlemi ile kullanmak istiyorsanız gereklidir. Bir GitHub İşleminin nasıl kurulacağı bu makalenin ilerleyen kısımlarında açıklanmaktadır.

   ile başlayan çıktıdaki bağlantıya tıklamak sizi medyan Deniz Feneri koşusuna karşılık gelen Deniz Feneri raporuna götürecektir.

   tarafından kullanılan varsayılanlar autorun komut satırı aracılığıyla geçersiz kılınabilir veya lighthouserc.js. Örneğin, lighthouserc.js aşağıdaki yapılandırma, her seferinde beş Deniz Feneri çalışmasının toplanması gerektiğini gösterir autorun yürütür.

8. Güncelleme lighthouserc.js kullanmak için numberOfRuns mülk:

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

9. yeniden çalıştırın autorun emretmek:

   lhci autorun

   Terminal çıktısı, Lighthouse’un varsayılan üç yerine 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’ye bakın. yapılandırma belgeleri.

CI sürecinizi Lighthouse CI’yi çalıştıracak şekilde ayarlayın #

Lighthouse CI, favori CI aracınızla birlikte kullanılabilir. bu CI Sağlayıcınızı Yapılandırın Lighthouse CI belgelerinin bu bölümü, Lighthouse CI’nin genel CI araçlarının yapılandırma dosyalarına nasıl dahil edileceğini gösteren kod örnekleri içerir. Özellikle, bu kod örnekleri, CI işlemi sırasında performans ölçümlerini toplamak için Lighthouse CI’nin nasıl çalıştırılacağını gösterir.

Performans ölçümlerini toplamak için Lighthouse CI kullanmak, performans izlemeye başlamak için iyi bir yerdir. Bununla birlikte, ileri düzey kullanıcılar, belirli Lighthouse denetimlerini geçmek veya tüm performans bütçelerini karşılamak gibi önceden tanımlanmış kriterleri karşılamıyorlarsa, bir adım daha ileri gitmek ve başarısız derlemeler için Lighthouse CI’yi kullanmak isteyebilirler. Bu davranış, assert mülkiyeti lighthouserc.js dosya.

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

• off: iddiaları yoksay
• warn: stderr’e yazdırma hataları
• error: başarısızlıkları stderr’e yazdırın ve Lighthouse CI’den sıfır olmayan bir değerle çıkın çıkış kodu

Aşağıda bir örnek lighthouserc.js iddiaları içeren yapılandırma. Lighthouse’un performans ve erişilebilirlik kategorilerinin puanları için iddialar belirler. Bunu denemek için, aşağıda gösterilen iddiaları lighthouserc.js dosyasını açın, 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 çıktısı şöyle görünür:

Lighthouse CI iddiaları hakkında daha fazla bilgi için bkz. belgeler.

Lighthouse CI’yi çalıştırmak için bir GitHub İşlemi kurun #

A GitHub İşlemi Lighthouse CI’yi çalıştırmak için kullanılabilir. Bu, bir GitHub deposunun herhangi bir şubesine her kod değişikliği gönderildiğinde yeni bir Lighthouse raporu oluşturur. Bunu bir ile birlikte kullanın durum kontrolü her çekme isteğinde bu sonuçları görüntülemek için.

1. Deponuzun kökünde, adlı bir dizin oluşturun. .github/workflows. bu iş akışları projeniz için bu dizine gidecek. İş akışı, önceden belirlenmiş bir zamanda (örneğin, kod gönderildiğinde) çalışan ve bir veya daha fazla eylemden oluşan bir süreçtir.

   mkdir .github
   mkdir .github/workflows

2. İçinde .github/workflows adında bir dosya oluştur lighthouse-ci.yaml. Bu dosya, yeni bir iş akışı için yapılandırmayı içerecektir.

   touch lighthouse-ci.yaml

3. Aşağıdaki metni ekleyin lighthouse-ci.yaml.

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

   Bu yapılandırma, havuza her yeni kod gönderildiğinde çalışacak tek bir işten oluşan bir iş akışı kurar. Bu işin dört adımı vardır:

   • Lighthouse CI’nin karşı çalıştırılacağı depoya göz atın
   • Düğümü kurun ve yapılandırın
   • Gerekli npm paketlerini kurun
   • Lighthouse CI’yi çalıştırın ve sonuçları geçici genel depolamaya yükleyin.

4. Bu değişiklikleri yapın ve GitHub’a aktarın. Yukarıdaki adımları doğru bir şekilde izlediyseniz, kodu GitHub’a göndermek az önce eklediğiniz iş akışını çalıştırmayı tetikler.

5. Lighthouse CI’nin tetiklediğini doğrulamak ve oluşturduğu raporu görüntülemek için şuraya gidin: Hareketler projenizin sekmesi. görmelisin Proje oluşturun ve Lighthouse CI’yi çalıştırın en son taahhüdün altında listelenen iş akışı.

   Belirli bir taahhüde karşılık gelen Deniz Feneri raporuna şu adresten gidebilirsiniz: Hareketler sekme. Taahhüdü tıklayın, tıklayın Deniz Feneri CI iş akışı adımı, ardından sonuçları genişletin Lighthouse CI’yi çalıştırın adım.

   Lighthouse CI’yi çalıştırmak için bir GitHub İşlemi kurdunuz. Bu, bir GitHub ile birlikte kullanıldığında en yararlı olacaktır. durum kontrolü.

GitHub durum kontrolü kurun #

Durum denetimi, yapılandırılırsa, her PR’de görünen bir mesajdır ve tipik olarak bir testin sonuçları veya bir derlemenin başarısı gibi bilgileri içerir.

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

1. Gitmek Lighthouse CI GitHub Uygulama sayfası ve tıklayın Yapılandır.

2. (İsteğe bağlı) GitHub’da birden çok kuruluşun parçasıysanız, kendisi için Lighthouse CI kullanmak istediğiniz havuzun sahibi olan kuruluşu seçin.

3. Seçme Tüm havuzlar Lighthouse CI’yi tüm depolarda etkinleştirmek istiyorsanız veya seçin Yalnızca depoları seçin yalnızca belirli depolarda kullanmak istiyorsanız ve ardından depoları seçin. Sonra tıklayın Yükle ve Yetkilendir.

4. Görüntülenen belirteci kopyalayın. Bir sonraki adımda kullanacaksınız.

5. Jetonu eklemek için şuraya gidin: Ayarlar GitHub deponuzun sayfasında, tıklayın Sırlarardından tıklayın Yeni bir sır ekle.

6. Yı kur İsim alan LHCI_GITHUB_APP_TOKEN ve ayarla Değer alanını son adımda kopyaladığınız belirtecin üzerine getirin ve ardından Sır ekle düğme.

7. Gitmek lighthouse-ci.yaml dosyasını açın ve yeni ortam sırrını “Lighthouse CI’yi çalıştır” komutuna ekleyin.

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

The status check is ready for use. To test it, create a new pull
request
or push a commit to an existing pull request.

Set up the Lighthouse CI Server #
The Lighthouse CI server provides a dashboard for exploring historical
Lighthouse reporting. It can also act as a private, long-term datastore for
Lighthouse reports.

  


  


Choose which commits to compare.
The amount that the Lighthouse score has changed between the two commits.
This section only shows metrics that have changed between the two commits.
Regressions are highlighted in pink.
Improvements are highlighted in blue.

Lighthouse CI Server is best-suited to users who are comfortable deploying and
managing their own infrastructure.
For information on setting up the Lighthouse CI server, including recipes for
using Heroku and Docker for deployment, refer to these
instructions.
Find out more #



      

      

      


      

      
        
        
      

      
        
      
      
    

  









    
  
    By
    

    Chrome DevRel