Halaman ini diterjemahkan oleh Cloud Translation API.

Pemantauan performa dengan Lighthouse CI

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

Katie Hempenius

Lighthouse CI adalah rangkaian alat untuk menggunakan Lighthouse selama continuous integration. Lighthouse CI dapat dimasukkan ke dalam alur kerja developer dengan berbagai cara. Panduan ini membahas topik-topik berikut:

Menggunakan Lighthouse CI CLI.
Mengonfigurasi penyedia CI Anda untuk menjalankan Lighthouse CI.
Menyiapkan GitHub Action dan pemeriksaan status untuk Lighthouse CI. Tindakan ini akan otomatis menampilkan hasil Lighthouse pada 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 performa halaman web pada saat halaman tersebut dijalankan; Lighthouse CI menunjukkan bagaimana temuan ini telah berubah dari waktu ke waktu. Ini dapat digunakan untuk mengidentifikasi dampak perubahan kode tertentu atau memastikan bahwa nilai minimum performa terpenuhi selama proses continuous integration. Meskipun pemantauan performa adalah kasus penggunaan paling umum untuk Lighthouse CI, pemantauan performa dapat digunakan untuk memantau aspek lain dari laporan Lighthouse, misalnya, SEO atau aksesibilitas.

Fungsi inti Lighthouse CI disediakan oleh antarmuka command line Lighthouse CI. (Catatan: Ini adalah alat yang terpisah dari Lighthouse CLI.) Lighthouse CI CLI menyediakan serangkaian perintah untuk menggunakan Lighthouse CI. Misalnya, perintah autorun menjalankan beberapa proses Lighthouse, mengidentifikasi laporan Lighthouse median, dan mengupload laporan untuk disimpan. Perilaku ini dapat sangat disesuaikan dengan meneruskan flag tambahan atau menyesuaikan file konfigurasi Lighthouse CI, lighthouserc.js.

Meskipun fungsi inti Lighthouse CI 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 menjalankan dan memberi komentar pada setiap permintaan pull
Melacak performa dari waktu ke waktu melalui dasbor yang disediakan oleh Lighthouse Server.

Semua pendekatan ini dibangun berdasarkan Lighthouse CI CLI.

Alternatif untuk Lighthouse CI meliputi layanan pemantauan performa pihak ketiga atau menulis skrip Anda sendiri untuk mengumpulkan data performa selama proses CI. Sebaiknya gunakan layanan pihak ketiga jika Anda ingin mengizinkan orang lain menangani pengelolaan server pemantauan performa dan perangkat pengujian Anda, atau, jika menginginkan kemampuan notifikasi (seperti integrasi email atau Slack) tanpa harus mem-build fitur ini sendiri.

Menggunakan Lighthouse CI secara lokal

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

Instal Lighthouse CI CLI.
```
npm install -g @lhci/cli
```
Lighthouse CI dikonfigurasi dengan menempatkan file lighthouserc.js di root repo project Anda. File ini bersifat wajib dan akan berisi informasi konfigurasi terkait Lighthouse CI. Meskipun Lighthouse CI dapat dikonfigurasi untuk digunakan tanpa repo git, petunjuk dalam artikel ini mengasumsikan bahwa repo project Anda dikonfigurasi untuk menggunakan git.
Di root repositori Anda, buat file konfigurasi lighthouserc.js.
```
touch lighthouserc.js
```
Tambahkan kode berikut ke lighthouserc.js. Kode ini adalah konfigurasi Lighthouse CI kosong. Anda akan menambahkan ke konfigurasi ini di langkah-langkah selanjutnya.
```
module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};
```
Setiap kali Lighthouse CI berjalan, Lighthouse memulai server untuk menayangkan situs Anda. Server inilah yang memungkinkan Lighthouse memuat situs Anda meskipun tidak ada server lain yang sedang berjalan. Setelah selesai berjalan, Lighthouse CI akan mematikan server secara otomatis. Untuk memastikan penayangan berfungsi dengan benar, Anda harus mengonfigurasi properti staticDistDir atau startServerCommand.

Jika situs Anda statis, tambahkan properti staticDistDir ke objek ci.collect untuk menunjukkan lokasi file statis Anda. Lighthouse CI akan menggunakan servernya sendiri untuk menyalurkan file ini saat menguji situs Anda. Jika situs Anda tidak statis, tambahkan properti startServerCommand ke objek ci.collect untuk menunjukkan perintah yang memulai server Anda. Lighthouse CI akan memulai proses server baru selama pengujian dan mematikannya setelahnya.
```
// Static site example
collect: {
  staticDistDir: './public',
}
```
```
// Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}
```
Tambahkan properti url ke objek ci.collect untuk menunjukkan URL yang harus digunakan untuk menjalankan Lighthouse CI. Nilai properti url harus diberikan sebagai array URL; array ini dapat berisi satu atau beberapa URL. Secara default, Lighthouse CI akan menjalankan Lighthouse tiga kali terhadap setiap URL.
```
collect: {
  // ...
  url: ['http://localhost:8080']
}
```
Catatan: URL ini harus dapat ditayangkan oleh server yang dikonfigurasi pada langkah sebelumnya. Oleh karena itu, jika Anda menjalankan Lighthouse CI secara lokal, URL ini mungkin harus menyertakan localhost, bukan host produksi Anda.
Tambahkan properti 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 akan tetap ada di sana selama tujuh hari lalu akan dihapus secara otomatis. Panduan penyiapan ini menggunakan opsi upload "penyimpanan publik sementara" karena cepat disiapkan. Untuk mengetahui informasi tentang cara lain menyimpan laporan Lighthouse, lihat dokumentasi.
```
upload: {
  target: 'temporary-public-storage',
}
```
Lokasi penyimpanan laporan akan serupa dengan ini:
```
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
```
(URL ini tidak akan berfungsi karena laporan telah dihapus.)
Jalankan Lighthouse CI CLI dari terminal menggunakan perintah autorun. Ini akan menjalankan Lighthouse tiga kali dan mengupload laporan Lighthouse median.
```
lhci autorun
```
Jika Anda telah mengonfigurasi Lighthouse CI dengan benar, menjalankan perintah ini akan menghasilkan output yang serupa 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. Token GitHub hanya diperlukan jika Anda ingin menggunakan Lighthouse CI dengan Action GitHub. Cara menyiapkan GitHub Action akan dijelaskan nanti dalam artikel ini.

Mengklik link di output yang dimulai dengan https://storage.googleapis.com... akan mengarahkan Anda ke laporan Lighthouse yang sesuai dengan median proses Lighthouse.

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

Perbarui lighthouserc.js untuk menggunakan properti numberOfRuns:

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

Jalankan kembali perintah autorun:

lhci autorun

Output terminal akan menunjukkan bahwa Lighthouse telah dijalankan lima kali, bukan tiga 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 dokumentasi konfigurasi Lighthouse CI.

Siapkan proses CI Anda untuk menjalankan Lighthouse CI

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

Menggunakan Lighthouse CI untuk mengumpulkan pengukuran performa adalah titik awal yang baik untuk memulai pemantauan performa. Namun, pengguna tingkat lanjut mungkin ingin melanjutkan dan menggunakan Lighthouse CI untuk menggagalkan build jika tidak memenuhi kriteria yang ditentukan sebelumnya, seperti lulus audit Lighthouse tertentu atau memenuhi semua anggaran performa. Perilaku ini dikonfigurasi melalui properti assert dari file lighthouserc.js.

Lighthouse CI mendukung tiga tingkat pernyataan:

off: mengabaikan pernyataan
warn: kegagalan cetak ke stderr
error: kegagalan cetak ke stderr dan keluar dari Lighthouse CI dengan kode keluar yang bukan nol

Berikut adalah contoh konfigurasi lighthouserc.js yang menyertakan pernyataan. Fungsi ini menetapkan pernyataan untuk skor performa dan kategori aksesibilitas Lighthouse. 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 mengetahui informasi selengkapnya tentang pernyataan CI Lighthouse, lihat dokumentasi.

Siapkan GitHub Action untuk menjalankan Lighthouse CI

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

Di root repositori Anda, buat direktori bernama .github/workflows. Alur kerja untuk project Anda akan masuk ke dalam direktori ini. Alur kerja adalah proses yang berjalan pada waktu yang telah ditentukan (misalnya, saat kode dikirim) dan terdiri dari satu atau beberapa tindakan.
```
mkdir .github
mkdir .github/workflows
```
Di .github/workflows, buat file bernama lighthouse-ci.yaml. File ini akan menyimpan konfigurasi untuk alur kerja baru.
```
touch lighthouse-ci.yaml
```

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 berjalan setiap kali kode baru dikirim ke repositori. Tugas ini memiliki empat langkah:

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

Commit perubahan ini dan kirim ke GitHub. Jika Anda telah mengikuti langkah-langkah di atas dengan benar, mengirim kode ke GitHub akan memicu menjalankan alur kerja yang baru saja Anda tambahkan.
Untuk mengonfirmasi bahwa Lighthouse CI telah terpicu dan untuk melihat laporan yang dihasilkannya, buka tab Actions project Anda. Anda akan melihat alur kerja Build project dan Run Lighthouse CI yang tercantum di bagian commit terbaru Anda.

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

Anda baru saja menyiapkan GitHub Action untuk menjalankan Lighthouse CI. Hal ini akan paling berguna saat digunakan bersama dengan pemeriksaan status GitHub.

Menyiapkan pemeriksaan status GitHub

Pemeriksaan status, jika dikonfigurasi, adalah pesan yang muncul di setiap PR dan biasanya menyertakan informasi seperti hasil pengujian atau keberhasilan build.

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

Buka halaman Aplikasi GitHub Lighthouse CI, lalu klik Configure.
(Opsional) Jika Anda adalah bagian dari beberapa organisasi di GitHub, pilih organisasi yang memiliki repositori tempat Anda ingin menggunakan CI Lighthouse.
Pilih All repository jika Anda ingin mengaktifkan Lighthouse CI di semua repositori, atau pilih Only select repository jika Anda hanya ingin menggunakannya di repositori tertentu, lalu pilih repositori. Kemudian klik Install & Authorize.
Salin token yang ditampilkan. Anda akan menggunakannya di langkah berikutnya.
Untuk menambahkan token, buka halaman Settings di repositori GitHub Anda, klik Secrets, lalu klik Add a new secret.
Tetapkan kolom Name ke LHCI_GITHUB_APP_TOKEN dan tetapkan kolom Value ke token yang Anda salin di langkah terakhir, lalu klik tombol Add secret.
Buka file lighthouse-ci.yaml dan tambahkan rahasia lingkungan baru ke perintah "run Lighthouse CI".

-           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: $

Pemeriksaan status siap digunakan. Untuk mengujinya, buat permintaan pull baru atau kirim commit ke permintaan pull yang sudah ada.

Menyiapkan Lighthouse CI Server

Server CI Lighthouse menyediakan dasbor untuk menjelajahi pelaporan Lighthouse historis. API ini juga dapat bertindak sebagai datastore pribadi jangka panjang untuk laporan Lighthouse.

Screenshot perbandingan dua laporan Lighthouse di Lighthouse CI Server

Pilih commit mana yang akan dibandingkan.
Jumlah skor Lighthouse yang telah berubah di antara kedua commit.
Bagian ini hanya menampilkan metrik yang telah berubah di antara kedua commit.
Regresi ditandai dengan warna merah muda.
Peningkatan ditandai dengan warna biru.

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

Untuk mengetahui informasi tentang cara menyiapkan server CI Lighthouse, termasuk urutan langkah menggunakan Heroku dan Docker untuk deployment, lihat instructions ini.

Cari tahu selengkapnya

Repo GitHub Lighthouse CI