0Pricing
Frontend Academy · Pelajaran

Pemeriksaan Lighthouse Otomatis

Tambahkan GitHub Action Lighthouse CI, tetapkan ambang skor performa dan aksesibilitas, serta blokir penggabungan yang menurunkan Core Web Vitals.

Pemeriksaan Lighthouse Otomatis adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Mengotomatiskan Lighthouse?

Menjalankan Lighthouse secara manual sering menemukan kemunduran kinerja terlambat—biasanya setelah pengguna sungguhan mengeluh. Lighthouse CI otomatis berjalan pada setiap PR, menggagalkan pembangunan yang menurunkan metrik utama, dan melacak skor dari waktu ke waktu. Perlakukan kinerja seperti rangkaian pengujian.

Lighthouse CI

Toolset Lighthouse CI sumber terbuka (lhci) dari Google: menjalankan Lighthouse beberapa kali, mengambil nilai median, memeriksa hasil terhadap ambang batas, dan mengunggah hasilnya.

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json — Konfigurasi

Konfigurasikan URL yang akan diuji, jumlah proses, dan pemeriksaan.

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/blog",
        "http://localhost:3000/pricing"
      ],
      "numberOfRuns": 5,
      "startServerCommand": "npm run start"
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo":            ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint":  ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time":       ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift":   ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

Integrasi GitHub Action

treosh/lighthouse-ci-action resmi menjalankan lhci pada setiap PR dan mengirimkan pemeriksaan status.

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

Median dari Beberapa Proses

Skor Lighthouse berbeda-beda antarproses karena gangguan waktu. numberOfRuns: 5 mengambil nilai median—cukup stabil untuk dijadikan dasar pemeriksaan. Kurang dari 3 proses menghasilkan hasil yang tidak konsisten.

Anggaran Kinerja

Selain skor, tetapkan batas tegas untuk ukuran dan jumlah sumber daya. Pembangunan gagal jika anggaran terlampaui.

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "image", "budget": 100 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

// lighthouserc.json:
"collect": {
  "settings": { "budgetsPath": "./budget.json" }
}

Server Lighthouse CI

Host sendiri server LHCI untuk menyimpan data historis, melihat diagram tren, dan membandingkan cabang dari waktu ke waktu. Atau gunakan penyimpanan publik sementara untuk hasil PR satu kali.

Menguji Halaman Terautentikasi

Gunakan skrip Puppeteer untuk masuk sebelum Lighthouse dijalankan.

// lighthouserc.json
"collect": {
  "puppeteerScript": "./lighthouse-login.js",
  "url": ["http://localhost:3000/dashboard"]
}

// lighthouse-login.js
module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'test123');
  await page.click('button[type=submit]');
  await page.waitForNavigation();
};

Notifikasi Slack/Discord

Alirkan hasil LHCI ke percakapan tim—kemunduran kinerja layak mendapat perhatian yang sama seperti kegagalan pengujian.

Seluler vs Desktop

Secara bawaan, Lighthouse menggunakan seluler (4G lambat + CPU kelas menengah). Untuk desktop, tetapkan preset: 'desktop'. Sebagian besar aplikasi produksi sebaiknya mengaudit keduanya—gunakan pekerjaan terpisah dalam CI.

Menyesuaikan Ambang Batas

Mulailah dengan skor saat ini sebagai patokan. Jangan menggagalkan PR sejak hari pertama—catat dan beri peringatan terlebih dahulu. Setelah tim terbiasa dengan alur kerja ini, naikkan ambang batas secara bertahap.

Melampaui Lighthouse

Lighthouse menyediakan data laboratorium. Padukan dengan pemantauan pengguna nyata (RUM): paket npm web-vitals bersama analitik Anda, atau layanan seperti SpeedCurve dan Calibre, memberikan tren kinerja dunia nyata.

Pemeriksaan Singkat

Mengapa Lighthouse CI biasanya mengambil median dari beberapa proses (misalnya 5), bukan hanya satu proses?

Ringkasan: Lighthouse Otomatis

lhci autorun terintegrasi dengan CI. Konfigurasikan dalam lighthouserc.json: URL, proses (5+), pemeriksaan kategori dan metrik, serta anggaran kinerja. Gunakan treosh/lighthouse-ci-action untuk GitHub. Host sendiri server LHCI untuk melihat tren. Gunakan skrip Puppeteer untuk halaman terautentikasi. Audit seluler dan desktop. Mulailah dengan peringatan; perketat ambang batas seiring waktu. Padukan dengan RUM untuk mendapatkan gambaran lengkap.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemeriksaan Lighthouse Otomatis” gratis?

Ya — teks lengkap “Pemeriksaan Lighthouse Otomatis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pemeriksaan Lighthouse Otomatis”?

Tambahkan GitHub Action Lighthouse CI, tetapkan ambang skor performa dan aksesibilitas, serta blokir penggabungan yang menurunkan Core Web Vitals. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pemeriksaan Lighthouse Otomatis” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. GitHub Actions untuk Frontend: lint test build
  2. Deployment ke Vercel Netlify dan Cloudflare Pages
  3. Variabel Lingkungan dalam CI
  4. Pemeriksaan Lighthouse Otomatis
← Kembali ke Frontend Academy