Menggunakan Lighthouse Bot untuk menetapkan anggaran performa

Milica Mihajlija

Anda telah bekerja keras untuk menjadi cepat, sekarang pastikan Anda tetap cepat dengan mengotomatiskan pengujian performa dengan Lighthouse Bot.

Lighthouse menilai aplikasi Anda dalam 5 kategori, dan salah satunya adalah performa. Meskipun Anda dapat mencoba mengingat untuk memantau perubahan performa dengan DevTools atau Lighthouse CLI setiap kali mengedit kode, Anda tidak perlu melakukannya. {i>Tool<i} dapat melakukan pekerjaan yang membosankan sesuatu untuk Anda. Travis CI adalah layanan hebat yang otomatis menjalankan pengujian untuk aplikasi Anda di cloud setiap kali Anda mendorong kode baru.

Lighthouse Bot terintegrasi dengan Travis CI, dan fitur anggaran performanya memastikan bahwa Anda tidak akan menurunkan kinerja secara tidak sengaja tanpa menyadarinya. Anda dapat mengonfigurasi repositori agar tidak mengizinkan penggabungan permintaan pull jika skor Lighthouse berada di bawah nilai minimum yang telah Anda tetapkan (misalnya, < 96/100).

Meskipun Anda dapat menguji performa di localhost, situs Anda sering kali akan berperforma berbeda di server aktif. Untuk mendapatkan gambar yang lebih realistis, sebaiknya men-deploy situs Anda ke server staging. Anda dapat menggunakan layanan hosting apa pun; panduan ini akan menggunakan Firebase Hosting.

1. Penyiapan

Aplikasi sederhana ini membantu Anda mengurutkan tiga angka.

Clone contoh dari GitHub, dan pastikan untuk menambahkannya sebagai repositori di akun GitHub Anda.

2. Men-deploy ke Firebase

Untuk memulai, Anda memerlukan akun Firebase. Setelah Anda melakukannya, membuat project baru di Firebase console dengan mengklik "Add project":

Men-deploy ke Firebase

Anda memerlukan Firebase CLI untuk men-deploy . Bahkan jika Anda sudah menginstalnya, Anda sebaiknya sering Perbarui CLI ke versi terbaru dengan perintah ini:

npm install -g firebase-tools

Untuk memberikan otorisasi ke Firebase CLI, jalankan:

firebase login

Sekarang inisialisasi project:

firebase init

Konsol akan mengajukan serangkaian pertanyaan selama penyiapan:

• Saat diminta untuk memilih fitur, pilih "Hosting".
• Untuk project Firebase default, pilih project yang telah Anda buat di Firebase console.
• Ketik "public" sebagai direktori publik Anda.
• Ketik "N" (tidak) hingga mengonfigurasi sebagai aplikasi web satu halaman.

Proses ini akan membuat file konfigurasi firebase.json di root project.

Selamat, Anda siap men-deploy. Jalankan:

firebase deploy

Dalam hitungan detik, Anda akan memiliki aplikasi yang aktif.

3. Menyiapkan Travis

Anda harus mendaftarkan akun di Travis, lalu mengaktifkan integrasi Aplikasi GitHub di bagian Setelan di profil Anda.

Setelah Anda memiliki akun

Buka Pengaturan di bawah profil Anda, tekan tombol Sinkronkan akun, dan pastikan repo project Anda tercantum di Travis.

Untuk memulai continuous integration, Anda memerlukan dua hal:

1. Untuk memiliki file .travis.yml di direktori utama
2. Untuk memicu build dengan melakukan push git lama biasa

Repositori lighthouse-bot-starter sudah memiliki file YAML .travis.yml:

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

File YAML memberi tahu Travis untuk menginstal semua dependensi dan mem-build aplikasi Anda. Sekarang giliran Anda untuk mengirim aplikasi contoh ke repositori GitHub Anda sendiri. Jika Anda belum melakukannya, jalankan perintah berikut:

git push origin main

Klik repo Anda di bagian Settings di Travis untuk melihat Travis project Anda dasbor. Jika semuanya keren, Anda akan melihat warna bangunan berubah dari kuning menjadi hijau dalam beberapa menit. 🎉

4. Mengotomatiskan deployment Firebase dengan Travis

Pada Langkah 2, Anda login ke akun Firebase dan men-deploy aplikasi dari command line dengan firebase deploy. Agar Travis dapat men-deploy aplikasi Anda ke Firebase, Anda harus mengizinkannya. Bagaimana Anda melakukannya? Dengan token Firebase. 🗝️🔥

Memberi otorisasi ke Firebase

Untuk membuat token, jalankan perintah ini:

firebase login:ci

Tindakan ini akan membuka tab baru di jendela browser sehingga Firebase dapat memverifikasi Anda. Setelah itu, lihat kembali konsol, dan Anda akan melihat token yang baru dibuat. Salin dan kembali ke Travis.

Di dasbor Travis project Anda, buka Opsi lainnya > Setelan > Variabel lingkungan.

Tempel token di kolom nilai, beri nama variabel FIREBASE_TOKEN, lalu tambahkan.

Menambahkan deployment ke penyiapan Travis

Anda memerlukan baris berikut untuk memberi tahu Travis agar men-deploy aplikasi setelah setiap build berhasil. Tambahkan ke akhir file .travis.yml. 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

Kirim perubahan ini ke GitHub dan tunggu deployment otomatis pertama Anda. Jika Anda melihat log Travis, log tersebut akan segera menampilkan ✔️ Deployment selesai.

Sekarang, setiap kali Anda membuat perubahan pada aplikasi, perubahan tersebut akan otomatis di-deploy ke Firebase.

5. Menyiapkan Bot Lighthouse

Friendly Lighthouse Bot akan memberi tahu Anda tentang skor Lighthouse aplikasi Anda. Anda hanya memerlukan undangan ke repo Anda.

Di GitHub, buka setelan project Anda dan tambahkan "badgebot" sebagai kolaborator (Setelan>Kolaborator):

Menyetujui permintaan ini adalah proses manual sehingga tidak selalu terjadi secara instan. Sebelum Anda memulai pengujian, pastikan lighthousebot telah menyetujui status kolaboratornya. Sementara itu, Anda juga perlu menambahkan kunci lain ke variabel lingkungan project di Travis. Berikan email Anda di sini, dan Anda akan mendapatkan kunci Lighthouse Bot di kotak masuk. 📬

Di Travis, tambahkan kunci ini sebagai variabel lingkungan dan beri nama LIGHTHOUSE_API_KEY:

Menambahkan Lighthouse Bot ke project Anda

Selanjutnya, tambahkan Bot Lighthouse ke project Anda dengan menjalankan:

npm i --save-dev https://github.com/ebidel/lighthousebot

Dan tambahkan bit ini ke package.json:

"scripts": {
  "lh": "lighthousebot"
}

Menambahkan Lighthouse Bot ke konfigurasi Travis

Untuk trik terakhir, uji performa aplikasi setelah setiap pull permintaan!

Di .travis.yml, tambahkan langkah lagi di after_berhasil:

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

Tindakan ini akan menjalankan audit Lighthouse di URL yang diberikan, jadi ganti https://staging.example.com dengan URL aplikasi Anda (yaitu your-app-123.firebaseapp.com).

Tetapkan standar Anda yang tinggi dan sesuaikan pengaturan sehingga Anda tidak menerima perubahan apa pun aplikasi yang menghasilkan skor performa di bawah 95:

- npm run lh -- --perf=95 https://staging.example.com

Membuat permintaan pull untuk memicu pengujian Bot Lighthouse di Travis

Bot Lighthouse hanya akan menguji permintaan pull, jadi jika Anda mengirim ke cabang utama sekarang, Anda akan mendapatkan pesan "This script can only be run on Travis PR requests" di Catatan Travis.

Untuk memicu pengujian Bot Lighthouse:

1. Melakukan checkout cabang baru
2. Mengirimnya ke GitHub
3. Membuat permintaan pull

Bersabarlah di halaman permintaan pull dan tunggu hingga Lighthouse Bot bernyanyi! 🎤

Skor performanya bagus, aplikasi berada di bawah anggaran, dan pemeriksaan telah lulus.

Opsi Lighthouse lainnya

Ingat bagaimana Lighthouse menguji 5 kategori yang berbeda? Anda dapat menerapkan skor untuk yang memiliki penanda Bot Lighthouse:

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

Contoh:

npm run lh -- --perf=93 --seo=100 https://staging.example.com

Hal ini akan membuat PR gagal jika skor performa turun di bawah 93 atau skor SEO turun di bawah 100.

Anda juga dapat memilih untuk tidak menerima komentar Bot Lighthouse dengan --no-comment sebelumnya.