Lighthouse CI untuk Tim Engineering: Jaga Performa Otomatis Setiap Commit

TL;DR: Lighthouse CI adalah cara termurah menjaga skor Core Web Vitals tetap stabil di proyek aktif. Dengan menempelkan lhci autorun di pipeline GitHub Actions, setiap pull request divalidasi otomatis, dan build gagal kalau LCP atau INP melewati ambang. Per April 2026, ini sudah jadi praktik default di tim frontend yang serius soal performa, mulai dari startup kecil sampai e-commerce skala menengah.

Selama beberapa bulan terakhir saya melihat satu pola berulang di proyek client. Tim membangun website dengan Lighthouse 95+ saat launching, lalu sembilan bulan kemudian skornya tergerus menjadi 60-an karena library tracking baru, banner promo musiman, atau gambar pahlawan yang lupa dikompresi. Tidak ada yang bermaksud merusaknya. Audit manual hanya tidak cukup sering dijalankan.

Saat membangun ulang sebagian frontend Atmo, kami memutuskan menggeser audit performa dari "kalau ingat" menjadi default pipeline. Pilihan jatuh pada Lighthouse CI karena gratis, kompatibel dengan stack Next.js, dan tidak butuh server tambahan. Hasilnya, tiga regresi tertangkap di pull request sebelum sempat menyentuh produksi.

Masalah Audit Manual

Tim kecil biasanya hanya menjalankan Lighthouse di Chrome DevTools saat ada keluhan. Cara ini punya tiga kelemahan. Pertama, hanya menangkap kondisi setelah masalah muncul. Kedua, satu kali run mudah bias karena variansi network. Ketiga, tidak ada riwayat perbandingan antar commit. Tanpa baseline, sulit menjawab pertanyaan sederhana seperti "apakah PR yang menambah library chart membuat LCP memburuk?".

Konteks lebih luas tentang metrik yang diuji bisa dibaca di Core Web Vitals dan INP. Dua metrik ini paling sering naik diam-diam saat ada penambahan JavaScript pihak ketiga.

Kerangka Pengaktifan Lighthouse CI

Konfigurasi minimal cukup empat hingga enam baris. Untuk project Next.js yang dideploy di Vercel, URL preview tiap pull request sudah otomatis tersedia, tinggal di-feed ke lhci autorun --collect.url=$PREVIEW_URL. Detail lengkap tersedia di dokumentasi resmi Lighthouse CI.

Studi Kasus Penerapan di Proyek Vetmo

Saat refactor halaman katalog Vetmo, kami menambahkan dua library, satu untuk image gallery dan satu untuk komponen chart. Tanpa Lighthouse CI, kombinasi keduanya menambah sekitar 240 KB JavaScript blocking yang turun ke skor performa dari 92 ke 71 di mobile. PR berhasil ditahan karena assertion categories.performance di-set minimum 0.85. Tim akhirnya mengganti library chart dengan versi yang lebih ringan dan men-defer galeri sampai user scroll. Skor kembali ke 90 di rilis berikutnya.

Pengalaman serupa bisa diraih tanpa harus menjadi e-commerce. Bahkan landing page personal branding Yuanita Sekar yang kami bangun memakai assertion sederhana untuk LCP di bawah 2,5 detik, supaya tidak ada PR cepat yang menambah font kustom besar tanpa audit.

Tips Praktis Saat Mengintegrasikan

Pakai median dari minimal tiga run untuk mengurangi variansi. Jangan buat threshold terlalu ketat di awal, mulai dari nilai realistis hari ini, lalu naikkan setelah tim terbiasa. Ekspos hasil run di komentar PR supaya reviewer bisa melihat dampak performa tanpa membuka tab tambahan. Kombinasikan dengan Real User Monitoring agar lab test divalidasi data lapangan, karena Lighthouse CI tidak menggantikan pengukuran pengguna nyata.

Pertanyaan Umum

Apakah Lighthouse CI butuh server khusus?

Tidak wajib. Hasil bisa di-upload ke temporary public storage gratis atau di-self-host di LHCI Server kalau butuh riwayat panjang. Untuk tim kecil, temporary storage cukup.

Bisakah dipakai di repo monorepo dengan banyak app?

Bisa. Setiap app bisa punya lighthouserc.js sendiri dan dipanggil paralel via matrix di GitHub Actions.

Berapa lama setup awal hingga berjalan?

Dari pengalaman beberapa proyek, sekitar 2 sampai 4 jam untuk integrasi pertama, termasuk kalibrasi threshold awal.

Apakah skor Lighthouse CI sama dengan PageSpeed Insights?

Tidak persis sama. PageSpeed Insights memakai data lab dan field. Lighthouse CI hanya lab. Keduanya saling melengkapi.

Penutup

Performa stabil bukan soal sprint heroik di akhir kuartal, tapi disiplin kecil yang berjalan setiap commit. Lighthouse CI membuat disiplin itu otomatis dengan biaya hampir nol. Bagi tim engineering Indonesia yang dituntut menjaga konversi sambil menambah fitur, ini investasi waktu yang biasanya kembali dalam satu bulan pertama lewat regresi yang tertangkap sebelum dirasakan pengguna.