Eksperimen Google pada 2009 menunjukkan bahwa penambahan latensi sebesar 100 hingga 400 milidetik menurunkan volume pencarian pengguna sebesar 0,2% hingga 0,6%. Dampak ini bersifat akumulatif: perlambatan sistem langsung mengubah perilaku pengguna secara negatif. Menerapkan performance budget di pipeline continuous integration (CI) memastikan regresi performa tertahan sebelum kode digabungkan ke cabang utama.

Metrik Kritis dalam Performance Budget

Performance budget membatasi alokasi sumber daya teknis web. Batasan ini terbagi menjadi dua kategori utama:

  • Metrik Kuantitas Aset: Ukuran total JavaScript, CSS, atau aset visual setelah kompresi (gzip/brotli). Lonjakan ukuran bundle berdampak langsung pada parse/compile time di sisi klien.
  • Metrik Sintetis Browser: Metrik rendering dan responsivitas runtime, seperti First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), dan Server Response Time (Time to First Byte/TTFB).

Validasi Ukuran Bundle Menggunakan Shell Script

Pencegahan paling murah dilakukan sebelum browser headless dijalankan, yaitu dengan memvalidasi artefak build langsung pada runner. Skrip shell berikut membaca ukuran file pasca-kompresi dan mengembalikan exit code 1 jika ukuran melebihi ambang batas.

#!/usr/bin/env bash
set -euo pipefail

# ponytail: hardcoded dist directory; upgrade to argument parsing if dynamic paths needed.
DIST_DIR="dist/assets"
MAX_JS_BYTES=204800 # 200 KB

if [ ! -d "$DIST_DIR" ]; then
  echo "Error: Direktori $DIST_DIR tidak ditemukan. Jalankan build terlebih dahulu."
  exit 1
fi

TOTAL_JS_BYTES=$(find "$DIST_DIR" -type f -name "*.js" -exec gzip -c {} + | wc -c)

echo "Ukuran total JS (gzipped): $TOTAL_JS_BYTES bytes"
echo "Batas anggaran: $MAX_JS_BYTES bytes"

if [ "$TOTAL_JS_BYTES" -gt "$MAX_JS_BYTES" ]; then
  echo "REGRESI PERFORMA: Ukuran bundle JS melebihi batas budget!"
  exit 1
fi

echo "Validasi asset size berhasil."

Konfigurasi Lighthouse CI (lighthouserc.json)

Lighthouse CI (LHCI) menjalankan audit sintetis di lingkungan runner. Berkas konfigurasi berikut menetapkan batas tegas untuk TTFB, FCP, LCP, dan Cumulative Layout Shift (CLS) menggunakan assertion level error, yang menyebabkan CLI mengembalikan status non-zero saat terjadi pelanggaran.

{
  "ci": {
    "collect": {
      "numberOfRuns": 3,
      "startServerCommand": "npm run preview",
      "startServerReadyPattern": "ready on",
      "url": ["http://localhost:3000/"]
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "server-response-time": ["error", { "maxNumericValue": 300 }],
        "first-contentful-paint": ["error", { "maxNumericValue": 1800 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

Integrasi pada Pipeline CI/CD Runner

Konfigurasi GitHub Actions berikut mengeksekusi pemeriksaan ukuran bundle dan audit LHCI secara berurutan. Jika salah satu threshold terlanggar, pull request diblokir dari merge.

name: Performance CI Budget

on:
  pull_request:
    branches: [main]

jobs:
  audit-performance:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install Dependencies
        run: npm ci

      - name: Build Application
        run: npm run build

      - name: Validate Bundle Size
        run: bash ./scripts/check-bundle-size.sh

      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun

Menangani Varians Hasil pada Lingkungan CI

CPU virtualization pada shared CI runner sering menyebabkan fluktuasi pengukuran sintetis hingga rentang 15-20%. Terapkan strategi berikut untuk menstabilkan pipeline:

  • Median Runs: Jalankan audit minimal 3 hingga 5 kali (konfigurasi numberOfRuns: 3) dan evaluasi nilai median, bukan nilai tunggal.
  • Fokus pada Metrik Deterministik: Jadikan ukuran byte aset dan TTFB backend lokal sebagai hard-blocker. Berikan toleransi margin 10% untuk metrik runtime seperti FCP atau Total Blocking Time (TBT) di infrastruktur CI bersama.