Pelajari cara mengimplementasikan Frontend Lighthouse CI untuk pemantauan kinerja berkelanjutan, memastikan kecepatan dan pengalaman pengguna yang optimal untuk aplikasi web Anda.
Frontend Lighthouse CI: Pemantauan Kinerja Berkelanjutan untuk Aplikasi Web
Dalam lanskap digital yang serba cepat saat ini, kinerja situs web adalah yang terpenting. Situs web yang lambat dimuat atau tidak dioptimalkan dengan baik dapat menyebabkan pengguna frustrasi, penurunan keterlibatan, dan pada akhirnya, dampak negatif pada bisnis Anda. Di situlah Lighthouse CI berperan. Panduan ini akan memandu Anda dalam mengimplementasikan Lighthouse CI untuk pemantauan kinerja berkelanjutan, memberdayakan Anda untuk secara proaktif mengidentifikasi dan mengatasi hambatan kinerja sebelum memengaruhi pengguna Anda.
Apa itu Lighthouse CI?
Lighthouse CI adalah alat pengujian kinerja otomatis sumber terbuka yang terintegrasi secara mulus ke dalam pipeline Continuous Integration dan Continuous Delivery (CI/CD) Anda. Alat ini memanfaatkan alat audit Lighthouse dari Google untuk memberikan wawasan yang dapat ditindaklanjuti mengenai kinerja, aksesibilitas, SEO, dan praktik terbaik situs web Anda. Dengan memasukkan Lighthouse CI ke dalam alur kerja Anda, Anda dapat terus memantau kinerja situs web Anda, melacak regresi, dan memastikan bahwa setiap perubahan kode berkontribusi pada pengalaman pengguna yang lebih baik. Lighthouse CI tidak terikat pada satu penyedia cloud tertentu dan dapat digunakan dengan berbagai pengaturan. Sebagai contoh, ia dapat berjalan di dalam kontainer Docker pada layanan seperti Github Actions, Jenkins, CircleCI, dan banyak lagi.
Mengapa Menggunakan Lighthouse CI?
Mengimplementasikan Lighthouse CI menawarkan banyak manfaat:
- Deteksi Dini Regresi Kinerja: Identifikasi masalah kinerja yang diperkenalkan oleh perubahan kode baru sebelum mencapai produksi.
- Peningkatan Kinerja Situs Web: Dapatkan wawasan yang dapat ditindaklanjuti tentang cara mengoptimalkan situs web Anda untuk kecepatan, aksesibilitas, dan SEO.
- Pengalaman Pengguna yang Ditingkatkan: Sajikan situs web yang lebih cepat dan ramah pengguna yang membuat pengunjung tetap terlibat.
- Penurunan Tingkat Pentalan (Bounce Rate): Optimalkan waktu muat untuk mengurangi frustrasi pengguna dan mencegah mereka meninggalkan situs Anda.
- Peningkatan Tingkat Konversi: Situs web yang lebih cepat biasanya menghasilkan tingkat konversi yang lebih tinggi dan hasil bisnis yang lebih baik.
- Pengujian Kinerja Otomatis: Integrasikan pengujian kinerja ke dalam pipeline CI/CD Anda untuk pemantauan berkelanjutan.
- Pengambilan Keputusan Berbasis Data: Dasarkan upaya optimisasi Anda pada metrik dan wawasan kinerja yang konkret.
- Pelacakan Kinerja Jangka Panjang: Pantau kinerja situs web Anda dari waktu ke waktu untuk mengidentifikasi tren dan mengukur dampak dari optimisasi Anda.
Fitur Utama Lighthouse CI
- Audit Otomatis: Menjalankan audit Lighthouse secara otomatis sebagai bagian dari proses CI/CD Anda.
- Anggaran Kinerja (Performance Budgets): Tetapkan anggaran kinerja untuk memastikan situs web Anda tetap dalam ambang batas kinerja yang dapat diterima.
- Pelacakan Regresi: Melacak regresi kinerja dari waktu ke waktu, memungkinkan Anda mengidentifikasi perubahan kode yang menyebabkannya.
- Wawasan yang Dapat Ditindaklanjuti: Menyediakan laporan terperinci dengan rekomendasi yang dapat ditindaklanjuti tentang cara meningkatkan kinerja situs web Anda.
- Konfigurasi yang Dapat Disesuaikan: Konfigurasikan Lighthouse CI untuk memenuhi kebutuhan dan persyaratan spesifik Anda.
- Integrasi dengan Alat CI/CD: Terintegrasi secara mulus dengan alat CI/CD populer seperti Jenkins, CircleCI, GitHub Actions, dan GitLab CI.
- Sumber Terbuka (Open Source): Lighthouse CI adalah proyek sumber terbuka, yang berarti gratis untuk digunakan dan dimodifikasi.
Menyiapkan Lighthouse CI: Panduan Langkah-demi-Langkah
Berikut adalah panduan komprehensif untuk menyiapkan Lighthouse CI untuk proyek Anda:
1. Instal Lighthouse CI CLI
Pertama, Anda perlu menginstal antarmuka baris perintah (CLI) Lighthouse CI secara global menggunakan npm atau yarn:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Konfigurasi Lighthouse CI
Buat file lighthouserc.js di root proyek Anda untuk mengonfigurasi Lighthouse CI. File ini mendefinisikan URL yang akan diaudit, aturan asersi, dan opsi konfigurasi lainnya.
Berikut adalah contoh dasar file lighthouserc.js:
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000', 'http://localhost:3000/about']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'temporary-public-storage'
},
},
};
Penjelasan:
collect.url: Menentukan URL yang akan diaudit oleh Lighthouse. Dalam contoh ini, kami mengaudit halaman beranda dan halaman "about" dari situs web yang berjalan dilocalhost:3000. Ingatlah untuk menggantinya dengan URL yang relevan dengan proyek *Anda*, yang mungkin mencakup lingkungan staging.assert.preset: Menggunakan presetlighthouse:recommended, yang menerapkan serangkaian asersi yang telah ditentukan sebelumnya berdasarkan rekomendasi Lighthouse. Ini adalah titik awal yang baik, tetapi Anda dapat menyesuaikan asersi ini sesuai kebutuhan.upload.target: Mengonfigurasi ke mana hasil Lighthouse CI akan diunggah.temporary-public-storageberguna untuk pengujian dan pengembangan, tetapi untuk lingkungan produksi, Anda biasanya ingin menggunakan solusi penyimpanan yang lebih persisten (dibahas nanti).
3. Integrasikan Lighthouse CI ke dalam Pipeline CI/CD Anda
Langkah selanjutnya adalah mengintegrasikan Lighthouse CI ke dalam pipeline CI/CD Anda. Langkah-langkah pastinya akan bervariasi tergantung pada penyedia CI/CD Anda, tetapi proses umumnya melibatkan penambahan skrip ke konfigurasi CI/CD Anda yang menjalankan perintah Lighthouse CI.
Contoh menggunakan GitHub Actions:
Buat file bernama .github/workflows/lighthouse-ci.yml di repositori Anda dengan konten berikut:
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Install dependencies
run: npm ci
- name: Run Lighthouse CI
run: |
npm install -g @lhci/cli@0.11.x
lhci autorun
Penjelasan:
on.push.branches: Memicu alur kerja pada saat push ke cabangmain.on.pull_request: Memicu alur kerja pada saat pull request.jobs.lighthouse.runs-on: Menentukan sistem operasi yang akan digunakan untuk pekerjaan (Ubuntu dalam kasus ini).steps: Mendefinisikan langkah-langkah yang akan dieksekusi dalam pekerjaan:actions/checkout@v3: Melakukan checkout repositori.actions/setup-node@v3: Menyiapkan Node.js.npm ci: Menginstal dependensi.Run Lighthouse CI: Menjalankan perintah Lighthouse CI:npm install -g @lhci/cli@0.11.x: Menginstal Lighthouse CI CLI secara global. *Penting*: Selalu disarankan untuk mengunci versi tertentu.lhci autorun: Menjalankan Lighthouse CI dalam mode "autorun", yang secara otomatis mengumpulkan audit, menegaskan anggaran kinerja, dan mengunggah hasilnya.
Pertimbangan Penting untuk Integrasi CI/CD:
- Memulai Server: Sebelum menjalankan
lhci autorun, pastikan server web Anda berjalan (mis.,npm start). Anda mungkin perlu menambahkan langkah ke konfigurasi CI/CD Anda untuk memulai server Anda di latar belakang. - Migrasi Database: Jika aplikasi Anda bergantung pada database, pastikan migrasi database dijalankan sebagai bagian dari proses CI/CD Anda *sebelum* menjalankan Lighthouse CI.
- Variabel Lingkungan: Jika aplikasi Anda memerlukan variabel lingkungan, pastikan ini dikonfigurasi dengan benar di lingkungan CI/CD Anda.
4. Jalankan Lighthouse CI
Sekarang, setiap kali Anda melakukan push perubahan ke cabang main atau membuat pull request, alur kerja Lighthouse CI akan berjalan secara otomatis. Hasilnya akan tersedia di antarmuka GitHub Actions.
5. Lihat Hasil Lighthouse CI
Hasil Lighthouse CI akan diunggah ke lokasi yang ditentukan dalam file lighthouserc.js Anda (mis., temporary-public-storage). Anda dapat mengakses hasil ini dengan mengikuti tautan yang disediakan dalam output CI/CD. Hasil ini memberikan informasi terperinci tentang kinerja, aksesibilitas, SEO, dan praktik terbaik situs web Anda.
Mengonfigurasi Asersi dan Anggaran Kinerja
Lighthouse CI memungkinkan Anda untuk mengonfigurasi asersi dan anggaran kinerja untuk memastikan bahwa situs web Anda memenuhi tujuan kinerja Anda. Asersi adalah aturan yang memeriksa metrik kinerja tertentu (mis., First Contentful Paint, Largest Contentful Paint) terhadap ambang batas yang telah ditentukan. Anggaran kinerja mendefinisikan batas yang dapat diterima untuk berbagai metrik kinerja.
Berikut adalah contoh cara mengonfigurasi asersi di file lighthouserc.js Anda:
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
assertions: {
'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
'total-blocking-time': ['warn', { maxNumericValue: 500 }],
'categories:performance': ['warn', { minScore: 0.9 }],
'categories:accessibility': ['error', { minScore: 0.8 }],
}
},
upload: {
target: 'temporary-public-storage'
},
}
};
Penjelasan:
first-contentful-paint: Menetapkan ambang batas peringatan untuk First Contentful Paint (FCP) pada 2000ms.largest-contentful-paint: Menetapkan ambang batas peringatan untuk Largest Contentful Paint (LCP) pada 2500ms.cumulative-layout-shift: Menetapkan ambang batas peringatan untuk Cumulative Layout Shift (CLS) pada 0.1.total-blocking-time: Menetapkan ambang batas peringatan untuk Total Blocking Time (TBT) pada 500ms.categories:performance: Menetapkan ambang batas peringatan untuk skor kategori Kinerja secara keseluruhan pada 0.9.categories:accessibility: Menetapkan ambang batas kesalahan untuk skor kategori Aksesibilitas secara keseluruhan pada 0.8.
Tingkat Asersi:
off: Menonaktifkan asersi.warn: Menampilkan peringatan jika asersi gagal.error: Menggagalkan proses Lighthouse CI jika asersi gagal.
Menyesuaikan Asersi:
Anda dapat menyesuaikan asersi untuk memenuhi kebutuhan spesifik Anda. Misalnya, Anda mungkin ingin menetapkan ambang batas yang lebih ketat untuk metrik kinerja kritis atau menonaktifkan asersi yang tidak relevan dengan aplikasi Anda.
Memilih Target Unggahan Lighthouse CI
Opsi upload.target di file lighthouserc.js Anda menentukan ke mana hasil Lighthouse CI akan diunggah. Target temporary-public-storage nyaman untuk pengujian dan pengembangan, tetapi tidak cocok untuk lingkungan produksi karena datanya tidak persisten.
Berikut adalah beberapa target unggahan alternatif:
- Server Lighthouse CI: Pendekatan yang direkomendasikan untuk lingkungan produksi adalah menggunakan server Lighthouse CI. Server Lighthouse CI menyediakan solusi penyimpanan persisten untuk hasil Lighthouse CI Anda, serta antarmuka pengguna untuk melihat dan menganalisis data Anda. Ini dapat di-deploy ke berbagai penyedia cloud atau di-host di infrastruktur Anda sendiri.
- Google Cloud Storage: Anda dapat mengunggah hasil Lighthouse CI Anda ke bucket Google Cloud Storage. Ini adalah solusi yang hemat biaya dan dapat diskalakan untuk menyimpan data Anda.
- Amazon S3: Mirip dengan Google Cloud Storage, Anda dapat mengunggah hasil Lighthouse CI Anda ke bucket Amazon S3.
Menyiapkan Server Lighthouse CI:
Menyiapkan server Lighthouse CI melibatkan langkah-langkah berikut:
- Instal Server Lighthouse CI: Anda dapat menginstal server Lighthouse CI menggunakan npm atau yarn:
- Konfigurasi Database: Server Lighthouse CI memerlukan database untuk menyimpan datanya. Anda dapat menggunakan berbagai database, termasuk PostgreSQL, MySQL, dan SQLite. Konfigurasikan pengaturan koneksi database di file
.env. - Mulai Server Lighthouse CI: Mulai server Lighthouse CI menggunakan perintah
lhci server. - Konfigurasi Lighthouse CI CLI untuk Menggunakan Server: Perbarui file
lighthouserc.jsAnda untuk menggunakan server Lighthouse CI sebagai target unggahan:
npm install -g @lhci/server
yarn global add @lhci/server
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'lhci',
serverBaseUrl: 'http://your-lhci-server.com',
token: 'YOUR_LHCI_TOKEN'
},
}
};
Ganti http://your-lhci-server.com dengan URL server Lighthouse CI Anda dan YOUR_LHCI_TOKEN dengan token akses untuk proyek Anda.
Praktik Terbaik untuk Menggunakan Lighthouse CI
Untuk mendapatkan hasil maksimal dari Lighthouse CI, ikuti praktik terbaik berikut:
- Jalankan Lighthouse CI pada Setiap Perubahan Kode: Integrasikan Lighthouse CI ke dalam pipeline CI/CD Anda untuk menjalankan audit pada setiap perubahan kode. Ini akan membantu Anda menangkap regresi kinerja lebih awal.
- Tetapkan Anggaran Kinerja: Tentukan anggaran kinerja untuk memastikan bahwa situs web Anda tetap dalam ambang batas kinerja yang dapat diterima.
- Pantau Tren Kinerja: Lacak kinerja situs web Anda dari waktu ke waktu untuk mengidentifikasi tren dan mengukur dampak dari optimisasi Anda.
- Prioritaskan Upaya Optimisasi: Fokus pada pengoptimalan metrik kinerja yang paling kritis terlebih dahulu.
- Gunakan Data Dunia Nyata: Gunakan data dunia nyata untuk menginformasikan upaya optimisasi Anda. Misalnya, Anda dapat menggunakan Google Analytics untuk mengidentifikasi halaman yang paling sering dikunjungi oleh pengguna Anda.
- Uji pada Perangkat Nyata: Uji situs web Anda pada perangkat nyata untuk memastikan kinerjanya baik dalam kondisi dunia nyata.
- Tinjau Hasil Lighthouse CI Secara Teratur: Pastikan untuk meninjau hasil Lighthouse CI secara teratur dan mengambil tindakan untuk mengatasi masalah kinerja yang teridentifikasi.
- Optimalkan Gambar: Optimalkan gambar Anda untuk mengurangi ukuran filenya tanpa mengorbankan kualitas. Alat seperti ImageOptim (macOS), TinyPNG, dan ImageKit berguna untuk ini.
- Minifikasi CSS dan JavaScript: Minifikasi file CSS dan JavaScript Anda untuk mengurangi ukurannya. Alat seperti UglifyJS dan CSSNano dapat membantu dalam hal ini.
- Manfaatkan Caching Browser: Manfaatkan caching browser untuk mengurangi jumlah permintaan yang dibuat situs web Anda ke server.
- Gunakan Jaringan Pengiriman Konten (CDN): Gunakan CDN untuk mendistribusikan konten situs web Anda ke server di seluruh dunia. Ini dapat meningkatkan waktu muat bagi pengguna di lokasi geografis yang berbeda. Layanan seperti Cloudflare dan Amazon CloudFront adalah CDN yang populer.
- Tunda Gambar di Luar Layar (Defer Offscreen Images): Terapkan lazy loading untuk gambar yang tidak langsung terlihat di layar. Ini dapat secara signifikan meningkatkan waktu muat halaman awal. Atribut
loading="lazy"dapat digunakan untuk lazy loading sederhana. - Hilangkan Sumber Daya yang Memblokir Render: Identifikasi dan hilangkan sumber daya yang memblokir proses render halaman Anda. Ini seringkali melibatkan penyisipan CSS kritis secara inline dan menunda CSS dan JavaScript yang tidak kritis.
- Kurangi Waktu Eksekusi JavaScript: Profil kode JavaScript Anda untuk mengidentifikasi dan mengoptimalkan fungsi yang berjalan lambat. Teknik seperti code splitting dan tree shaking dapat membantu mengurangi jumlah JavaScript yang perlu diunduh dan dieksekusi.
Teknik Lanjutan Lighthouse CI
Setelah Anda terbiasa dengan dasar-dasar Lighthouse CI, Anda dapat menjelajahi beberapa teknik lanjutan untuk lebih meningkatkan pemantauan kinerja Anda:
- Audit Lighthouse Kustom: Anda dapat membuat audit Lighthouse kustom untuk menguji masalah kinerja spesifik yang relevan dengan aplikasi Anda.
- Konfigurasi Headless Chrome: Konfigurasikan Headless Chrome untuk menggunakan emulasi perangkat atau pengaturan throttling jaringan tertentu.
- Integrasi dengan Alat Pemantauan: Integrasikan Lighthouse CI dengan alat pemantauan yang ada (mis., New Relic, Datadog) untuk mendapatkan gambaran yang lebih komprehensif tentang kinerja situs web Anda.
- Pengujian Regresi Visual: Gabungkan Lighthouse CI dengan alat pengujian regresi visual untuk mendeteksi perubahan visual yang mungkin berdampak pada kinerja.
Lighthouse CI untuk Audiens Global: Pertimbangan untuk Situs Web Internasional
Saat menggunakan Lighthouse CI untuk situs web yang menargetkan audiens global, pertimbangkan hal berikut:
- Uji dari Beberapa Lokasi: Waktu respons server dapat sangat bervariasi berdasarkan lokasi pengguna. Gunakan CDN (Content Delivery Network) dan pertimbangkan untuk menjalankan audit Lighthouse CI dari berbagai wilayah geografis untuk mendapatkan gambaran kinerja yang lebih akurat bagi pengguna internasional Anda. Beberapa penyedia CI/CD menawarkan opsi untuk menentukan lokasi geografis runner.
- Perhitungkan Kondisi Jaringan: Kecepatan dan latensi jaringan sangat bervariasi di seluruh dunia. Simulasikan kondisi jaringan yang berbeda selama audit Lighthouse CI Anda untuk memahami bagaimana kinerja situs web Anda di bawah berbagai batasan. Lighthouse memungkinkan Anda untuk melakukan throttle koneksi jaringan, mensimulasikan koneksi yang lebih lambat seperti 3G.
- Lokalisasi Konten: Pastikan konten yang dilokalkan dioptimalkan dengan benar. Ini termasuk optimisasi gambar untuk bahasa dan set karakter yang berbeda, serta pengkodean yang tepat untuk menghindari masalah tampilan.
- Pemuatan Font: Optimalkan pemuatan font untuk berbagai bahasa. Pertimbangkan untuk menggunakan font-display: swap untuk mencegah teks tidak terlihat selama pemuatan font.
- Skrip Pihak Ketiga: Waspadai skrip pihak ketiga, karena dapat secara signifikan memengaruhi kinerja, terutama bagi pengguna di wilayah dengan koneksi jaringan yang lebih lambat. Audit kinerja skrip pihak ketiga secara teratur dan pertimbangkan untuk menggunakan pemuatan asinkron atau menghosting sendiri skrip penting.
- Optimisasi Seluler: Penggunaan seluler lazim di banyak bagian dunia. Pastikan situs web Anda dioptimalkan untuk perangkat seluler dan audit Lighthouse CI Anda mencakup pengujian khusus seluler.
Pemecahan Masalah Umum Lighthouse CI
Berikut adalah beberapa masalah umum yang mungkin Anda temui saat menggunakan Lighthouse CI dan cara mengatasinya:
- Lighthouse CI Gagal dengan Kesalahan "Timeout": Ini bisa terjadi jika situs web Anda terlalu lama untuk dimuat atau jika Lighthouse CI tidak dapat terhubung ke situs web Anda. Coba tingkatkan nilai timeout di file
lighthouserc.jsAnda atau periksa log server situs web Anda untuk mencari kesalahan. - Lighthouse CI Melaporkan Hasil yang Tidak Konsisten: Hasil Lighthouse dapat sedikit bervariasi antar proses karena kondisi jaringan atau faktor lain. Jalankan beberapa audit untuk mendapatkan rata-rata yang lebih stabil.
- Lighthouse CI Gagal Mengunggah Hasil: Periksa konfigurasi
upload.targetAnda dan pastikan server Lighthouse CI Anda berjalan dan dapat diakses. Selain itu, verifikasi bahwa Anda telah mengonfigurasi token akses yang benar. - Lighthouse CI Melaporkan Regresi Kinerja yang Tidak Terduga: Selidiki perubahan kode yang dibuat sebelum regresi terdeteksi. Gunakan laporan Lighthouse CI untuk mengidentifikasi metrik kinerja spesifik yang telah mengalami regresi dan fokuskan upaya optimisasi Anda pada area tersebut.
Kesimpulan
Frontend Lighthouse CI adalah alat yang ampuh untuk pemantauan kinerja berkelanjutan aplikasi web. Dengan mengintegrasikan Lighthouse CI ke dalam pipeline CI/CD Anda, Anda dapat secara proaktif mengidentifikasi dan mengatasi masalah kinerja, memastikan bahwa situs web Anda memberikan pengalaman pengguna yang optimal. Ingatlah untuk menyesuaikan pengaturan, aturan asersi, dan lokasi pengujian Anda untuk audiens global guna menciptakan pengalaman terbaik bagi pengguna di seluruh dunia.
Dengan mengikuti langkah-langkah dan praktik terbaik yang diuraikan dalam panduan ini, Anda dapat secara signifikan meningkatkan kinerja situs web Anda, mengurangi tingkat pentalan, meningkatkan tingkat konversi, dan pada akhirnya, mencapai tujuan bisnis Anda. Mulailah menerapkan Lighthouse CI hari ini dan buka potensi penuh aplikasi web Anda.