Pemantauan performa dengan Lighthouse CI

Cara menambahkan Lighthouse ke sistem continuous integration, seperti GitHub Actions.

Katie Hempenius
Katie Hempenius
X

Lighthouse CI adalah rangkaian untuk menggunakan Lighthouse selama continuous integration. CI {i>Lighthouse<i} dapat disertakan ke dalam alur kerja developer dalam berbagai cara. Panduan ini membahas topik berikut:

  • Menggunakan CI CLI Lighthouse.
  • Mengonfigurasi penyedia CI Anda untuk menjalankan Lighthouse CI.
  • Menyiapkan GitHub Action dan status centang untuk Lighthouse CI. Tindakan ini akan otomatis menampilkan hasil Lighthouse di Permintaan pull GitHub.
  • Membuat dasbor performa dan penyimpanan data untuk laporan Lighthouse.

Ringkasan

Lighthouse CI adalah rangkaian alat gratis yang memfasilitasi penggunaan Lighthouse untuk pemantauan performa. Satu laporan Lighthouse memberikan ringkasan dari sebuah web performa halaman pada saat halaman tersebut dijalankan; Lighthouse CI menunjukkan bagaimana temuan kami telah berubah dari waktu ke waktu. Hal ini dapat digunakan untuk mengidentifikasi dampak perubahan kode tertentu atau memastikan bahwa nilai minimum performa terpenuhi selama proses continuous integration kami. Meskipun pemantauan kinerja adalah teknologi yang paling yang umum untuk Lighthouse CI, dapat digunakan untuk memantau aspek lain dari laporan Lighthouse - misalnya, SEO atau aksesibilitas.

Fungsi inti Lighthouse CI disediakan oleh perintah CI Lighthouse antarmuka garis. (Catatan: Ini adalah alat terpisah dari Lighthouse CLI.) Tujuan Lighthouse CI CLI menyediakan serangkaian perintah untuk menggunakan Lighthouse CI. Misalnya, perintah autorun mengeksekusi beberapa Lighthouse berjalan, mengidentifikasi laporan Lighthouse median, dan mengupload laporan tersebut untuk penyimpanan. Perilaku ini dapat sangat disesuaikan dengan meneruskan tanda tambahan atau menyesuaikan file konfigurasi Lighthouse CI, lighthouserc.js.

Meskipun fungsi inti dari CI Lighthouse terutama dienkapsulasi dalam Lighthouse CI CLI, Lighthouse CI biasanya digunakan melalui salah satu pendekatan berikut:

  • Menjalankan Lighthouse CI sebagai bagian dari continuous integration
  • Menggunakan Lighthouse CI GitHub Action yang berjalan dan memberi komentar pada setiap pull minta
  • Melacak performa dari waktu ke waktu melalui dasbor yang disediakan oleh Lighthouse Server.

Semua pendekatan ini dibangun berdasarkan Lighthouse CI CLI.

Alternatif untuk CI Lighthouse mencakup pemantauan performa pihak ketiga atau menulis skrip Anda sendiri untuk mengumpulkan data performa selama CI {i>checkout<i}. Anda harus mempertimbangkan untuk menggunakan layanan pihak ketiga jika Anda lebih suka orang lain menangani pengelolaan server pemantauan kinerja Anda dan perangkat pengujian, atau, jika Anda menginginkan kemampuan notifikasi (seperti email atau Slack integrasi) tanpa harus membangun fitur tersebut sendiri.

Menggunakan CI Lighthouse secara lokal

Bagian ini menjelaskan cara menjalankan dan menginstal Lighthouse CI CLI secara lokal dan cara mengonfigurasi lighthouserc.js. Menjalankan Lighthouse CI CLI secara lokal adalah cara termudah untuk memastikan bahwa lighthouserc.js Anda dikonfigurasi dengan benar.

  1. Menginstal Lighthouse CI CLI.

    npm install -g @lhci/cli

    CI Lighthouse dikonfigurasi dengan menempatkan file lighthouserc.js di root ke repositori project Anda. File ini bersifat wajib dan akan berisi Lighthouse CI terkait informasi konfigurasi. Meskipun Lighthouse CI dapat dikonfigurasi untuk digunakan tanpa git repo ini, petunjuk dalam artikel ini mengasumsikan bahwa repo project Anda dikonfigurasi untuk gunakan git.

  2. Di root repositori Anda, buat konfigurasi lighthouserc.js file.

    touch lighthouserc.js

  3. Tambahkan kode berikut ke lighthouserc.js. Kode ini kosong Konfigurasi CI Lighthouse. Anda akan menambahkan konfigurasi ini di langkah selanjutnya.

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

  4. Setiap kali Lighthouse CI berjalan, Lighthouse CI akan memulai server untuk menayangkan situs Anda. Server inilah yang memungkinkan Lighthouse memuat situs Anda bahkan ketika tidak ada server sedang berjalan. Ketika CI Lighthouse selesai berjalan, itu akan mematikan server secara otomatis. Untuk memastikan penayangan berfungsi dengan benar, Anda harus mengonfigurasi staticDistDir atau startServerCommand properti baru.

    Jika situs Anda bersifat statis, tambahkan properti staticDistDir ke ci.collect untuk menunjukkan lokasi file statis Anda. Lighthouse CI akan menggunakan servernya sendiri untuk menayangkan file tersebut saat menguji situs Anda. Jika situs tidak statis, tambahkan properti startServerCommand ke ci.collect untuk menunjukkan perintah yang memulai server Anda. Lighthouse CI akan memulai proses server baru selama pengujian dan mematikannya ke bawah setelahnya.

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

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

  5. Tambahkan url ke objek ci.collect untuk menunjukkan URL yang Lighthouse CI harus menjalankan Lighthouse. Nilai properti url harus disediakan sebagai array URL; array ini dapat berisi satu atau beberapa URL. Menurut secara {i>default<i}, Lighthouse CI akan menjalankan Lighthouse tiga kali terhadap setiap URL.

    collect: {
  // ...
  url: ['http://localhost:8080']
}

  6. Tambahkan target ke objek ci.upload dan tetapkan nilainya ke 'temporary-public-storage'. Laporan Lighthouse yang dikumpulkan oleh Lighthouse CI akan diupload ke penyimpanan publik sementara. Laporan tersebut akan tetap ada di sana selama tujuh hari dan kemudian akan dihapus secara otomatis. Penyiapan ini menggunakan "penyimpanan publik sementara" upload, karena cepat untuk menyiapkan. Untuk informasi tentang cara lain menyimpan laporan Lighthouse, lihat ke dokumentasi.

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

    Lokasi penyimpanan laporan akan serupa dengan yang berikut:

    https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html

    (URL ini tidak akan berfungsi karena laporan telah dihapus.)

  7. Jalankan CI CLI Lighthouse dari terminal menggunakan perintah autorun. Tindakan ini akan menjalankan Lighthouse tiga kali dan mengupload median Lighthouse laporan.

    lhci autorun

    Jika Anda telah mengonfigurasi Lighthouse CI dengan benar, menjalankan perintah ini seharusnya menghasilkan output yang mirip dengan ini:

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

    Anda dapat mengabaikan pesan GitHub token not set di output konsol. J Token GitHub hanya diperlukan jika Anda ingin menggunakan Lighthouse CI dengan GitHub {i>Action<i}. Cara menyiapkan GitHub Action akan dijelaskan nanti dalam artikel ini.

    Mengeklik tautan pada {i>output<i} yang dimulai dengan https://storage.googleapis.com... akan mengarahkan Anda ke laporan Lighthouse yang sesuai dengan median usaha Lighthouse.

    Default yang digunakan oleh autorun dapat diganti melalui command line atau lighthouserc.js. Misalnya, konfigurasi lighthouserc.js di bawah menunjukkan bahwa lima rute Lighthouse harus dikumpulkan setiap kali autorun akan dijalankan.

  8. Perbarui lighthouserc.js untuk menggunakan properti numberOfRuns:

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

  9. Jalankan kembali perintah autorun:

    lhci autorun

    Output terminal harus menunjukkan bahwa Lighthouse telah dijalankan lima kali, bukan daripada tiga nilai default:

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

    Untuk mempelajari opsi konfigurasi lainnya, lihat CI Lighthouse konfigurasi dokumentasi tambahan.

Menyiapkan proses CI Anda untuk menjalankan Lighthouse CI

CI Lighthouse dapat digunakan dengan alat CI favorit Anda. Kursus Configure Your CI Penyedia dokumentasi Lighthouse CI berisi contoh kode yang menunjukkan cara menggabungkan Lighthouse CI ke dalam file konfigurasi alat CI yang umum. Secara khusus, contoh kode ini menunjukkan cara menjalankan Lighthouse CI untuk mengumpulkan pengukuran kinerja selama proses CI.

Menggunakan CI Lighthouse untuk mengumpulkan pengukuran kinerja adalah titik yang baik untuk memulai dengan pemantauan performa. Namun, pengguna lanjutan mungkin perlu melakukan satu langkah dan menggunakan Lighthouse CI untuk gagal membangun jika tidak memenuhi persyaratan yang ditentukan kriteria seperti lulus audit Lighthouse tertentu atau memenuhi semua performa anggaran. Perilaku ini dikonfigurasi melalui assert dari file lighthouserc.js.

CI Lighthouse mendukung tiga tingkat pernyataan:

  • off: mengabaikan pernyataan
  • warn: kegagalan pencetakan ke stderr
  • error: kegagalan pencetakan ke stderr dan keluar dari CI Lighthouse dengan nilai bukan nol keluar kode

Di bawah ini adalah contoh konfigurasi lighthouserc.js yang menyertakan pernyataan. API ini menetapkan pernyataan untuk skor performa Lighthouse dan kategori aksesibilitas. Untuk mencobanya, tambahkan pernyataan yang ditunjukkan di bawah ini ke file lighthouserc.js Anda, lalu jalankan kembali Lighthouse CI.

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

Output konsol yang dihasilkannya akan terlihat seperti ini:

Screenshot pesan peringatan yang dibuat oleh Lighthouse CI

Untuk informasi selengkapnya tentang pernyataan CI Lighthouse, lihat dokumentasi.

Menyiapkan GitHub Action untuk menjalankan Lighthouse CI

GitHub Action dapat digunakan untuk menjalankan Lighthouse CI. Hal ini akan menghasilkan laporan Lighthouse baru setiap kali kode perubahan didorong ke cabang mana pun dari repositori GitHub. Gunakan ini bersama-sama dengan status centang untuk menampilkan hasil ini pada setiap permintaan pull.

Screenshot pemeriksaan status GitHub

  1. Di root repositori Anda, buat direktori bernama .github/workflows. Tujuan alur kerja untuk proyek Anda akan masuk ke dalam direktori ini. Alur kerja adalah proses yang berjalan pada waktu yang telah ditentukan (misalnya, ketika kode didorong) dan terdiri dari satu atau lebih tindakan.

    mkdir .github
mkdir .github/workflows

  2. Di .github/workflows, buat file bernama lighthouse-ci.yaml. File ini akan menyimpan konfigurasi untuk alur kerja baru.

    touch lighthouse-ci.yaml

  3. Tambahkan teks berikut ke lighthouse-ci.yaml.

    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!"

    Konfigurasi ini menyiapkan alur kerja yang terdiri dari satu tugas yang akan dijalankan setiap kali kode baru dikirim ke repositori. Pekerjaan ini memiliki empat langkah:

    • Lihat repositori tempat Lighthouse CI akan dijalankan
    • Menginstal dan mengonfigurasi Node
    • Menginstal paket npm yang diperlukan
    • Jalankan Lighthouse CI dan upload hasilnya ke penyimpanan publik sementara.

  4. Commit perubahan ini dan kirim ke GitHub. Jika Anda telah mengikuti dengan benar langkah-langkah di atas, mengirim kode ke GitHub akan memicu pelaksanaan alur kerja yang baru saja Anda tambahkan.

  5. Untuk mengonfirmasi bahwa Lighthouse CI telah dipicu dan untuk melihat laporan, buat, buka tab Actions pada project. Anda akan melihat Alur kerja Build project dan Run Lighthouse CI yang tercantum dalam daftar commit terbaru.

    Screenshot &#39;Settings&#39; GitHub Beranda

    Anda dapat membuka laporan Lighthouse yang sesuai dengan commit tertentu dari tab Tindakan. Klik commit, klik Lighthouse CI langkah alur kerja Anda, lalu perluas hasil langkah jalankan Lighthouse CI.

    Screenshot &#39;Settings&#39; GitHub Beranda

    Anda baru saja menyiapkan GitHub Action untuk menjalankan Lighthouse CI. Ini akan menjadi cara berguna saat digunakan bersama dengan status GitHub centang.

Menyiapkan pemeriksaan status GitHub

Pemeriksaan status, jika dikonfigurasi, adalah pesan yang muncul di setiap Humas dan biasanya mencakup informasi seperti hasil tes atau keberhasilan buat.

Screenshot &#39;Settings&#39; GitHub Beranda

Langkah-langkah di bawah menjelaskan cara menyiapkan pemeriksaan status untuk Lighthouse CI.

  1. Buka Lighthouse CI GitHub App , lalu klik Konfigurasi.

  2. (Opsional) Jika Anda adalah bagian dari beberapa organisasi di GitHub, pilih organisasi yang memiliki repositori tempat Anda ingin menggunakan Lighthouse CI.

  3. Pilih All repository jika Anda ingin mengaktifkan Lighthouse CI di semua repositori atau pilih Hanya pilih repositori jika Anda hanya ingin menggunakan di repositori tertentu, lalu memilih repositori. Kemudian klik Instal & Izinkan.

  4. Salin token yang ditampilkan. Anda akan menggunakannya di langkah berikutnya.

  5. Untuk menambahkan token, buka halaman Settings di GitHub. repositori, klik Secrets, lalu klik Add a new secret.

    Screenshot &#39;Settings&#39; GitHub Beranda

  6. Tetapkan kolom Name ke LHCI_GITHUB_APP_TOKEN dan tetapkan Value ke token yang Anda salin pada langkah terakhir, lalu klik tombol Tambahkan secret.

  7. Buka file lighthouse-ci.yaml dan tambahkan rahasia lingkungan baru ke "jalankan Lighthouse CI" perintah.

-           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: $
  1. Pemeriksaan status siap digunakan. Untuk mengujinya, buat metode pull baru meminta atau mengirimkan commit ke permintaan pull yang ada.

Menyiapkan Server CI Lighthouse

Server CI Lighthouse menyediakan dasbor untuk menjelajahi Pelaporan Lighthouse. Cloud SQL juga dapat bertindak sebagai datastore pribadi jangka panjang untuk Laporan Lighthouse.

Screenshot dasbor Server CI Lighthouse
Screenshot perbandingan dua laporan Lighthouse di Lighthouse CI Server
  1. Pilih commit yang akan dibandingkan.
  2. Jumlah skor Lighthouse yang telah diubah antara dua commit.
  3. Bagian ini hanya menampilkan metrik yang telah berubah di antara kedua commit.
  4. Regresi ditandai dengan warna merah muda.
  5. Peningkatan ditandai dengan warna biru.

CI Server Lighthouse paling cocok untuk pengguna yang nyaman dalam men-deploy dan dalam mengelola infrastruktur mereka sendiri.

Untuk informasi tentang pengaturan server CI Lighthouse, termasuk resep untuk menggunakan Heroku dan Docker untuk deployment, lihat petunjuk ini.

Cari tahu selengkapnya