Blogger Jateng
Home / Tutorial

Mengotomatiskan Audit Lighthouse dalam Pipeline CI/CD

Dalam lingkungan pengembangan yang serba cepat saat ini, menghadirkan aplikasi web berkualitas tinggi sangat penting untuk memastikan pengalaman pengguna yang optimal. Alat Lighthouse dari Google menyediakan cara yang ampuh bagi pengembang untuk mengaudit situs web terkait performa, aksesibilitas, SEO, dan lainnya. Meskipun menjalankan Lighthouse secara manual dapat menghasilkan wawasan yang berharga, mengotomatiskan audit ini dalam pipeline CI/CD memastikan bahwa aplikasi web memenuhi standar kualitas secara konsisten di seluruh siklus pengembangan. Artikel ini membahas cara mengintegrasikan audit Lighthouse ke dalam pipeline CI/CD, sehingga tim dapat mendeteksi dan menyelesaikan masalah lebih awal.

Apa yang dimaksud dengan Lighthouse?

Lighthouse adalah alat sumber terbuka yang dibuat oleh Google yang menilai halaman web dalam lima kategori: performa; aksesibilitas; praktik terbaik; SEO; dan fitur-fitur Aplikasi Web Progresif (PWA). Alat ini menghasilkan laporan komprehensif yang menunjukkan area-area yang membutuhkan peningkatan, membantu para pengembang dalam mengoptimalkan aplikasi web mereka secara efektif. Meskipun Lighthouse tersedia melalui Chrome DevTools, Node.js, atau sebagai ekstensi peramban, Lighthouse dapat diintegrasikan ke dalam pipeline CI/CD Anda dan dijalankan pada setiap pull request. Hal ini memungkinkan pemeriksaan kualitas yang berkelanjutan.

sumber: nashtechglobal.com

Manfaat Mengotomatiskan Audit Lighthouse

Mengotomatiskan audit Lighthouse dalam pipeline CI/CD menawarkan beberapa keuntungan:
  1. Identifikasi Masalah Lebih Awal: Dengan mengimplementasikan Lighthouse, Anda akan mengetahui masalah performa, aksesibilitas, dan SEO sejak siklus pengembangan, sehingga mengurangi biaya untuk memperbaikinya di kemudian hari.
  2. Penegakan Kualitas yang Konsisten: Pemeriksaan otomatis membantu menegakkan standar kualitas pada setiap penerapan, sehingga mencegah kemunduran.
  3. Lingkaran Umpan Balik yang Lebih Cepat: Umpan balik yang diberikan kepada pengembang bersifat langsung, sehingga memungkinkan mereka untuk membuat perubahan dengan cepat.
  4. Skalabilitas: Audit otomatis memungkinkan kontrol kualitas untuk meningkatkan skala di banyak halaman dan lingkungan seiring dengan meningkatnya ukuran proyek.

Menyiapkan Lighthouse dalam Pipeline CI/CD

Berikut adalah panduan langkah demi langkah untuk mengotomatiskan audit Lighthouse di pipeline CI/CD Anda:

1. Pilih Platform CI/CD

Karena banyak platform CI/CD, terutama GitHub Actions, GitLab CI/CD, Jenkins, dan CircleCI, mendukung alur kerja dan skrip khusus, platform ini merupakan kandidat yang tepat untuk integrasi Lighthouse. Berdasarkan infrastruktur tim saat ini, tentukan sebuah platform.

2. Menginstal CLI Lighthouse

Anda dapat menjalankan Lighthouse secara terprogram melalui Command Line Interface. Ikuti dokumentasi panduan untuk instalasi npm:

npm install -g lighthouse

3. Menulis Skrip Lighthouse

Buat skrip untuk menjalankan Lighthouse pada aplikasi Anda. Sebagai contoh, skrip Node.js mungkin terlihat seperti ini:

 const lighthouse = require('lighthouse');

const chromeLauncher = require('chrome-launcher');


(async () => {

  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });

  const options = { logLevel: 'info', output: 'html', onlyCategories: ['performance', 'accessibility'], port: chrome.port };

  const runnerResult = await lighthouse('https://your-website-url.com', options);


  console.log('Lighthouse score:', runnerResult.lhr.categories.performance.score);

  await chrome.kill();

})();

Simpan skrip ini di repositori Anda dan konfigurasikan pipeline Anda untuk menjalankannya.

4. Integrasikan ke dalam Alur Kerja CI/CD

Dalam file konfigurasi pipeline Anda, tambahkan langkah untuk menjalankan skrip Lighthouse. Sebagai contoh, dalam alur kerja GitHub Actions yang dapat Anda tambahkan:

jobs:

  lighthouse-audit:

    runs-on: ubuntu-latest

    steps:

      - name: Checkout code

        uses: actions/checkout@v3


      - name: Set up Node.js

        uses: actions/setup-node@v3

        with:

          node-version: '16'


      - name: Install Lighthouse

        run: npm install -g lighthouse


      - name: Run Lighthouse Audit

        run: node lighthouse-script.js

5. Tetapkan Ambang Batas dan Peringatan

Tetapkan ambang batas skor untuk kinerja, aksesibilitas, dan beberapa kategori lainnya. Siapkan pipeline Anda yang gagal pada skor di bawah ambang batas ini, sehingga masalah dapat teratasi.

 6. Menyimpan dan Menganalisis Laporan

Lighthouse menghasilkan laporan terperinci dalam format HTML atau JSON. Simpan laporan ini sebagai artefak untuk melacak tren dari waktu ke waktu dan mengidentifikasi masalah yang berulang.

Praktik Terbaik

  • Audit pada Lingkungan Pementasan: Pastikan audit Anda dijalankan di lingkungan pementasan atau pra-produksi yang sangat mirip dengan produksi.
  • Peramban Tanpa Kepala: Chrome tanpa kepala menghasilkan audit yang lebih cepat dan lebih baik dalam alur otomatis.
  • Kembangkan Permainan Lighthouse Anda dari Waktu ke Waktu: skor Lighthouse yang beragam dapat membantu membuat regresi tren Anda.
  • Waktu Pembuatan Lebih Cepat: Lakukan audit pada halaman atau kategori tertentu, bukan pada seluruh situs Anda.

Kesimpulan

Mengotomatiskan audit Lighthouse dalam pipeline CI/CD adalah cara yang ampuh untuk menegakkan standar kinerja, aksesibilitas, dan SEO web selama proses pengembangan. Dengan menangkap masalah lebih awal dan memberikan wawasan yang dapat ditindaklanjuti, tim dapat menghadirkan aplikasi web berkualitas tinggi dengan lebih cepat dan lebih andal. Karena aplikasi web terus berkembang dalam kompleksitas, mengintegrasikan alat seperti Lighthouse ke dalam alur kerja CI/CD sangat penting untuk mempertahankan keunggulan kompetitif.