Pengujian Kinerja Frontend: Mengintegrasikan Lighthouse CI untuk Peningkatan Berkelanjutan

Dalam lanskap digital saat ini, kinerja situs web adalah yang terpenting. Waktu muat yang lambat, masalah aksesibilitas, dan SEO yang buruk dapat secara signifikan memengaruhi pengalaman pengguna dan, akibatnya, hasil bisnis. Pengujian kinerja frontend telah menjadi bagian penting dari siklus hidup pengembangan perangkat lunak modern, memastikan situs web dan aplikasi web cepat, andal, dan ramah pengguna untuk audiens global. Artikel ini membahas integrasi Lighthouse CI, sebuah alat sumber terbuka yang kuat, ke dalam pipeline continuous integration (CI) Anda untuk mengotomatiskan pengujian kinerja frontend dan mendorong peningkatan berkelanjutan.

Mengapa Pengujian Kinerja Frontend Penting?

Sebelum mendalami Lighthouse CI, mari kita pahami mengapa pengujian kinerja frontend sangat penting:

• Pengalaman Pengguna: Situs web yang cepat dan responsif memberikan pengalaman pengguna yang lebih baik, yang mengarah pada peningkatan keterlibatan dan penurunan rasio pentalan. Bayangkan seorang calon pelanggan di Tokyo, Jepang, mencoba membeli produk di situs e-commerce yang lambat. Mereka kemungkinan besar akan meninggalkan situs tersebut dan mencari alternatif.
• Peringkat SEO: Mesin pencari seperti Google menganggap kecepatan dan kinerja situs web sebagai faktor peringkat. Situs web yang lebih cepat cenderung mendapat peringkat lebih tinggi dalam hasil pencarian, yang mendorong lebih banyak lalu lintas organik. Inisiatif Core Web Vitals dari Google menekankan pentingnya faktor-faktor seperti Largest Contentful Paint (LCP), First Input Delay (FID), dan Cumulative Layout Shift (CLS) untuk SEO.
• Aksesibilitas: Peningkatan kinerja sering kali mengarah pada aksesibilitas yang lebih baik bagi pengguna penyandang disabilitas. Kode dan gambar yang dioptimalkan dapat meningkatkan pengalaman bagi pengguna yang mengandalkan pembaca layar atau mereka yang memiliki bandwidth terbatas.
• Tingkat Konversi: Situs web yang lebih cepat dapat secara langsung memengaruhi tingkat konversi. Studi telah menunjukkan bahwa penundaan satu detik saja dalam waktu muat halaman dapat menyebabkan penurunan konversi yang signifikan. Pikirkan seorang pengguna di Mumbai, India, yang mencoba memesan penerbangan. Proses pemesanan yang lambat dapat menyebabkan mereka meninggalkan pembelian dan memilih pesaing.
• Optimisasi Sumber Daya: Pengujian kinerja membantu mengidentifikasi area di mana sumber daya dapat dioptimalkan, yang mengarah pada penghematan biaya dalam hal infrastruktur server dan penggunaan bandwidth.

Memperkenalkan Lighthouse CI

Lighthouse CI adalah alat sumber terbuka dan otomatis yang dirancang untuk berintegrasi secara mulus dengan pipeline CI/CD Anda. Alat ini menjalankan Lighthouse, sebuah alat audit populer yang dikembangkan oleh Google, dan memberikan wawasan tentang kinerja, aksesibilitas, SEO, praktik terbaik, dan kepatuhan Progressive Web App (PWA) situs web Anda. Lighthouse CI membantu Anda:

• Otomatiskan Audit Kinerja: Jalankan audit Lighthouse secara otomatis dengan setiap commit atau pull request.
• Lacak Kinerja Seiring Waktu: Pantau metrik kinerja dari waktu ke waktu dan identifikasi regresi sejak dini.
• Tetapkan Anggaran Kinerja: Tentukan anggaran kinerja dan gagalkan build jika terlampaui.
• Integrasi dengan Sistem CI/CD: Berintegrasi dengan sistem CI/CD populer seperti GitHub Actions, GitLab CI, CircleCI, dan Jenkins.
• Berkolaborasi dalam Masalah Kinerja: Bagikan laporan Lighthouse dan berkolaborasi dengan tim Anda untuk menyelesaikan masalah kinerja.

Menyiapkan Lighthouse CI

Berikut adalah panduan langkah demi langkah untuk menyiapkan Lighthouse CI di proyek Anda:

1. Instal Lighthouse CI

Instal Lighthouse CI CLI secara global menggunakan npm atau yarn:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. Konfigurasi Lighthouse CI

Buat file lighthouserc.js di direktori root proyek Anda untuk mengonfigurasi Lighthouse CI. Berikut adalah contoh konfigurasi:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

Mari kita jabarkan konfigurasi ini:

• collect.url: Sebuah array URL yang akan diaudit. Contoh ini mengaudit halaman beranda dan halaman tentang. Anda harus menyertakan semua halaman penting dari situs web Anda, dengan mempertimbangkan berbagai kasus penggunaan. Misalnya, situs e-commerce mungkin menyertakan halaman beranda, halaman daftar produk, halaman detail produk, dan proses checkout.
• collect.startServerCommand: Perintah untuk memulai server pengembangan Anda. Ini diperlukan jika Lighthouse CI perlu berjalan terhadap lingkungan pengembangan lokal.
• collect.numberOfRuns: Jumlah berapa kali audit Lighthouse akan dijalankan untuk setiap URL. Menjalankan beberapa audit membantu mengurangi variasi dalam kondisi jaringan dan faktor lainnya.
• assert.assertions: Seperangkat pernyataan untuk memvalidasi hasil audit Lighthouse. Setiap pernyataan menentukan metrik atau kategori dan ambang batas. Jika ambang batas tidak terpenuhi, build akan gagal. Contoh ini menetapkan ambang batas untuk kategori kinerja, aksesibilitas, praktik terbaik, dan SEO. Ini juga menetapkan ambang batas untuk metrik spesifik seperti First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), dan Cumulative Layout Shift (CLS).
• upload.target: Menentukan ke mana laporan Lighthouse akan diunggah. temporary-redirect mengunggah laporan ke lokasi penyimpanan sementara dan menyediakan URL untuk mengaksesnya. Opsi lain termasuk menggunakan server Lighthouse CI atau solusi penyimpanan cloud seperti Google Cloud Storage atau Amazon S3.

3. Integrasi dengan Sistem CI/CD Anda

Langkah selanjutnya adalah mengintegrasikan Lighthouse CI ke dalam pipeline CI/CD Anda. Berikut adalah contoh cara mengintegrasikannya dengan GitHub Actions:

Buat file .github/workflows/lighthouse.yml di repositori Anda:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

Alur kerja ini melakukan langkah-langkah berikut:

• Melakukan checkout kode.
• Menyiapkan Node.js.
• Menginstal dependensi.
• Menjalankan Lighthouse CI. Langkah ini pertama-tama membangun aplikasi (npm run build), kemudian menjalankan lhci autorun, yang mengeksekusi audit Lighthouse dan menegaskan hasilnya terhadap ambang batas yang dikonfigurasi.

Sesuaikan alur kerja ini dengan sistem CI/CD dan kebutuhan proyek spesifik Anda. Misalnya, jika Anda menggunakan GitLab CI, Anda akan mengonfigurasi file .gitlab-ci.yml dengan langkah-langkah serupa.

4. Jalankan Lighthouse CI

Commit perubahan Anda dan push ke repositori Anda. Pipeline CI/CD akan secara otomatis menjalankan Lighthouse CI. Jika ada pernyataan yang gagal, build akan gagal, memberikan umpan balik yang berharga kepada pengembang. Laporan Lighthouse CI akan tersedia di URL yang disediakan oleh sistem CI/CD.

Konfigurasi dan Kustomisasi Lanjutan

Lighthouse CI menawarkan berbagai pilihan konfigurasi dan kemungkinan kustomisasi. Berikut adalah beberapa fitur lanjutan:

1. Menggunakan Server Lighthouse CI

Server Lighthouse CI menyediakan dasbor terpusat untuk melacak metrik kinerja dari waktu ke waktu, mengelola proyek, dan berkolaborasi dalam masalah kinerja. Untuk menggunakan server Lighthouse CI, Anda perlu menyiapkan instance dan mengonfigurasi file lighthouserc.js Anda untuk mengunggah laporan ke server.

Pertama, deploy server. Ada berbagai opsi deployment yang tersedia, termasuk Docker, Heroku, dan penyedia cloud seperti AWS dan Google Cloud. Lihat dokumentasi Lighthouse CI untuk instruksi detail tentang deployment server.

Setelah server berjalan, perbarui file lighthouserc.js Anda untuk menunjuk ke server:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

Ganti YOUR_LHCI_SERVER_URL dengan URL server Lighthouse CI Anda dan YOUR_LHCI_SERVER_TOKEN dengan token yang dihasilkan oleh server. Token tersebut mengotentikasi pipeline CI Anda dengan server.

2. Menetapkan Anggaran Kinerja

Anggaran kinerja menentukan ambang batas yang dapat diterima untuk metrik tertentu. Lighthouse CI memungkinkan Anda untuk menetapkan anggaran kinerja dan menggagalkan build jika anggaran tersebut terlampaui. Ini membantu mencegah regresi kinerja dan memastikan bahwa situs web Anda tetap dalam batas kinerja yang dapat diterima.

Anda dapat menentukan anggaran kinerja di file lighthouserc.js Anda menggunakan properti assert.assertions. Misalnya, untuk menetapkan anggaran kinerja untuk First Contentful Paint (FCP), Anda dapat menambahkan pernyataan berikut:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

Pernyataan ini akan menggagalkan build jika FCP lebih besar dari 2500 milidetik.

3. Menyesuaikan Konfigurasi Lighthouse

Lighthouse CI memungkinkan Anda untuk menyesuaikan konfigurasi Lighthouse agar sesuai dengan kebutuhan spesifik Anda. Anda dapat mengonfigurasi berbagai pengaturan Lighthouse, seperti:

• onlyAudits: Tentukan daftar audit yang akan dijalankan.
• skipAudits: Tentukan daftar audit yang akan dilewati.
• throttling: Konfigurasikan pengaturan pembatasan jaringan untuk mensimulasikan kondisi jaringan yang berbeda.
• formFactor: Tentukan faktor bentuk (desktop atau seluler) untuk diemulasi.
• screenEmulation: Konfigurasikan pengaturan emulasi layar.

Untuk menyesuaikan konfigurasi Lighthouse, Anda dapat meneruskan flag --config-path ke perintah lhci autorun, yang menunjuk ke file konfigurasi Lighthouse kustom. Lihat dokumentasi Lighthouse untuk daftar lengkap opsi konfigurasi.

4. Mengaudit Halaman Terotentikasi

Mengaudit halaman terotentikasi memerlukan pendekatan yang sedikit berbeda. Anda perlu menyediakan cara bagi Lighthouse CI untuk mengautentikasi sebelum menjalankan audit. Ini dapat dicapai dengan menggunakan cookie atau dengan membuat skrip proses login.

Salah satu pendekatan umum adalah menggunakan flag --extra-headers untuk meneruskan cookie otentikasi ke Lighthouse CI. Anda bisa mendapatkan cookie dari alat pengembang browser Anda setelah masuk ke situs web.

Sebagai alternatif, Anda dapat menggunakan skrip Puppeteer untuk mengotomatiskan proses login dan kemudian menjalankan audit Lighthouse pada halaman yang diautentikasi. Pendekatan ini memberikan lebih banyak fleksibilitas dan memungkinkan Anda untuk menangani skenario otentikasi yang kompleks.

Praktik Terbaik untuk Pengujian Kinerja Frontend dengan Lighthouse CI

Untuk memaksimalkan manfaat Lighthouse CI, ikuti praktik terbaik berikut:

• Jalankan Lighthouse CI Secara Teratur: Integrasikan Lighthouse CI ke dalam pipeline CI/CD Anda untuk menjalankan audit secara otomatis dengan setiap commit atau pull request. Ini memastikan bahwa regresi kinerja terdeteksi lebih awal dan ditangani dengan cepat.
• Tetapkan Anggaran Kinerja yang Realistis: Tentukan anggaran kinerja yang menantang tetapi dapat dicapai. Mulailah dengan anggaran yang konservatif dan secara bertahap ketatkan seiring dengan peningkatan kinerja situs web Anda. Pertimbangkan untuk menetapkan anggaran yang berbeda untuk berbagai jenis halaman, tergantung pada kompleksitas dan kepentingannya.
• Fokus pada Metrik Kunci: Prioritaskan metrik kinerja utama yang paling berdampak pada pengalaman pengguna dan hasil bisnis. Core Web Vitals dari Google (LCP, FID, dan CLS) adalah titik awal yang baik.
• Selidiki dan Tangani Masalah Kinerja: Ketika Lighthouse CI mengidentifikasi masalah kinerja, selidiki secara menyeluruh dan terapkan solusi yang sesuai. Gunakan laporan Lighthouse untuk mengidentifikasi akar penyebab masalah dan prioritaskan perbaikan yang paling berdampak.
• Pantau Kinerja Seiring Waktu: Lacak metrik kinerja dari waktu ke waktu untuk mengidentifikasi tren dan pola. Gunakan server Lighthouse CI atau alat pemantauan lainnya untuk memvisualisasikan data kinerja dan mengidentifikasi area untuk perbaikan.
• Edukasi Tim Anda: Pastikan tim Anda memahami pentingnya kinerja frontend dan cara menggunakan Lighthouse CI secara efektif. Sediakan pelatihan dan sumber daya untuk membantu mereka meningkatkan keterampilan dan pengetahuan mereka.
• Pertimbangkan Kondisi Jaringan Global: Saat menetapkan anggaran kinerja, pertimbangkan kondisi jaringan di berbagai belahan dunia. Pengguna di area dengan kecepatan internet yang lebih lambat mungkin memiliki pengalaman yang berbeda dari pengguna di area dengan kecepatan yang lebih cepat. Gunakan alat untuk mensimulasikan kondisi jaringan yang berbeda selama pengujian.
• Optimalkan Gambar: Optimisasi gambar adalah aspek penting dari kinerja frontend. Gunakan alat seperti ImageOptim, TinyPNG, atau konverter online untuk mengompres dan mengoptimalkan gambar tanpa kehilangan kualitas. Gunakan format gambar modern seperti WebP, yang menawarkan kompresi dan kualitas yang lebih baik daripada format tradisional seperti JPEG dan PNG. Terapkan lazy loading untuk gambar yang tidak langsung terlihat di viewport.
• Minifikasi dan Kompres Kode: Minifikasi kode HTML, CSS, dan JavaScript Anda untuk mengurangi ukuran file. Gunakan alat seperti UglifyJS, Terser, atau minifier online. Aktifkan kompresi Gzip atau Brotli di server Anda untuk lebih mengurangi ukuran file yang ditransfer.
• Manfaatkan Caching Browser: Konfigurasikan server Anda untuk mengatur header cache yang sesuai untuk aset statis seperti gambar, file CSS, dan JavaScript. Ini memungkinkan browser untuk menyimpan aset-aset ini dalam cache dan menghindari mengunduhnya berulang kali.

Kesimpulan

Mengintegrasikan Lighthouse CI ke dalam alur kerja pengembangan Anda adalah langkah penting untuk membangun situs web yang berkinerja tinggi, dapat diakses, dan ramah SEO. Dengan mengotomatiskan pengujian kinerja frontend dan melacak kinerja dari waktu ke waktu, Anda dapat mengidentifikasi dan mengatasi masalah kinerja sejak dini, meningkatkan pengalaman pengguna, dan mendorong hasil bisnis. Manfaatkan Lighthouse CI dan jadikan peningkatan kinerja berkelanjutan sebagai nilai inti dalam proses pengembangan Anda. Ingatlah bahwa kinerja situs web bukanlah upaya satu kali tetapi proses berkelanjutan yang memerlukan perhatian dan optimisasi konstan. Pertimbangkan faktor budaya dan regional untuk memastikan pengalaman yang mulus bagi semua pengguna Anda, terlepas dari lokasi atau perangkat mereka. Dengan mengikuti praktik terbaik yang diuraikan dalam artikel ini, Anda dapat memastikan bahwa situs web Anda memberikan pengalaman yang cepat, andal, dan menyenangkan bagi pengguna di seluruh dunia.