Menggunakan Lighthouse Bot untuk menetapkan anggaran performa

Milica Mihajlija

Anda telah bekerja keras untuk mendapatkan kecepatan, kini pastikan Anda tetap cepat dengan mengotomatiskan pengujian performa menggunakan Lighthouse Bot.

Lighthouse memberi nilai pada 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 Anda mengedit kode, Anda tidak perlu melakukannya. Alat dapat melakukan hal-hal yang membosankan untuk Anda. Travis CI adalah layanan hebat yang otomatis menjalankan pengujian untuk aplikasi Anda di cloud setiap kali Anda mengirim kode baru.

Lighthouse Bot terintegrasi dengan Travis CI, dan fitur anggaran performanya memastikan Anda tidak akan menurunkan performa secara tidak sengaja tanpa menyadarinya. Anda dapat mengonfigurasi repositori sehingga tidak akan 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 berperforma berbeda di server aktif. Untuk mendapatkan gambaran yang lebih realistis, sebaiknya deploy situs Anda ke server staging. Anda dapat menggunakan layanan hosting apa pun; panduan ini akan menggunakan hosting Firebase.

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 mengurusnya, buat project baru di Firebase console dengan mengklik "Add project":

Men-deploy ke Firebase

Anda memerlukan Firebase CLI untuk men-deploy aplikasi. Meskipun Anda sudah menginstalnya, sebaiknya sering mengupdate CLI ke versi terbaru dengan perintah ini:

npm install -g firebase-tools

Untuk mengotorisasi 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) untuk mengonfigurasi sebagai aplikasi halaman tunggal.

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

Selamat, Anda siap men-deploy! Jalankan:

firebase deploy

Dalam sepersekian detik, Anda akan memiliki aplikasi aktif.

3. Menyiapkan Travis

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

Setelah Anda memiliki akun

Buka Setelan di profil Anda, klik tombol Sinkronkan akun, dan pastikan repo project Anda tercantum di Travis.

Untuk memulai continuous integration, Anda memerlukan dua hal:

1. Memiliki file .travis.yml di direktori root
2. Memicu build dengan melakukan git push lama yang biasa

Repo 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 belum, jalankan perintah berikut:

git push origin main

Klik repo Anda di bagian Setelan di Travis untuk melihat dasbor Travis project Anda. Jika semuanya baik-baik saja, Anda akan melihat build Anda 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 mengotorisasinya. Bagaimana caranya? Dengan token Firebase. 🗝️🔥

Mengotorisasi 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 token tersebut dan kembali ke Travis.

Di dasbor Travis project Anda, buka More options > Settings > Environment variables.

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

Menambahkan deployment ke penyiapan Travis

Anda memerlukan baris berikut untuk memberi tahu Travis agar men-deploy aplikasi setelah setiap build berhasil. Tambahkan baris tersebut 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 complete!

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

5. Menyiapkan Lighthouse Bot

Lighthouse Bot yang mudah digunakan akan memberi tahu Anda tentang skor Lighthouse aplikasi Anda. Bot ini hanya memerlukan undangan ke repo Anda.

Di GitHub, buka setelan project Anda dan tambahkan "lighthousebot" sebagai kolaborator (Settings>Collaborators):

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

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

Menambahkan Lighthouse Bot ke project Anda

Selanjutnya, tambahkan Lighthouse Bot ke project Anda dengan menjalankan:

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

Dan tambahkan bagian ini ke package.json:

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

Menambahkan Lighthouse Bot ke konfigurasi Travis

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

Di .travis.yml, tambahkan langkah lain di after_success:

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

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

Tetapkan standar Anda tinggi dan sesuaikan penyiapan agar Anda tidak menerima perubahan apa pun pada aplikasi yang membuat skor performa di bawah 95:

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

Membuat permintaan pull untuk memicu pengujian Lighthouse Bot di Travis

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

Untuk memicu pengujian Lighthouse Bot:

1. Checkout cabang baru
2. Kirim ke GitHub
3. Buat permintaan pull

Tunggu di halaman permintaan pull tersebut dan tunggu Lighthouse Bot bernyanyi. 🎤

Skor performanya bagus, aplikasi sesuai anggaran, dan pemeriksaan telah lulus.

Opsi Lighthouse lainnya

Ingat bagaimana Lighthouse menguji 5 kategori yang berbeda? Anda dapat menerapkan skor untuk salah satu kategori tersebut dengan flag Lighthouse Bot:

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

Tindakan ini akan gagal jika skor performa turun di bawah 93 atau skor SEO turun di bawah 100.

Anda juga dapat memilih untuk tidak mendapatkan komentar Lighthouse Bot dengan opsi --no-comment.