Frontend Academy · Pelajaran

Pemeriksaan Lighthouse Automatik

Tambah GitHub Action Lighthouse CI, tetapkan ambang skor prestasi dan kebolehcapaian, serta halang percantuman yang menurunkan Core Web Vitals.

Pelajaran 4 daripada 414 langkah

Pemeriksaan Lighthouse Automatik ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Mengapa Mengautomasikan Lighthouse?

Pelaksanaan Lighthouse secara manual mengesan kemerosotan prestasi lewat — biasanya selepas pengguna sebenar membuat aduan. Lighthouse CI automatik berjalan pada setiap PR, menggagalkan binaan yang merosot dalam metrik utama dan menjejaki skor mengikut masa. Anggap prestasi seperti set ujian.

Lighthouse CI

Set alat sumber terbuka Lighthouse CI (lhci) oleh Google: menjalankan Lighthouse beberapa kali, mengambil median, membuat penegasan terhadap ambang dan memuat naik hasil.

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json — Konfigurasi

Konfigurasikan URL untuk diuji, bilangan pelaksanaan dan penegasan.

// 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 rasmi menjalankan lhci pada setiap PR dan menyiarkan 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 bagi Berbilang Pelaksanaan

Skor Lighthouse berubah antara pelaksanaan kerana gangguan masa. numberOfRuns: 5 mengambil median — cukup stabil untuk dibuat penegasan. Kurang daripada 3 pelaksanaan menghasilkan keputusan yang tidak stabil.

Bajet Prestasi

Selain skor, tetapkan bajet keras untuk saiz dan bilangan sumber. Binaan gagal jika bajet dilampaui.

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

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

Pelayan Lighthouse CI

Hos sendiri pelayan LHCI untuk mengekalkan data sejarah, melihat carta trend dan membandingkan cabang mengikut masa. Atau gunakan storan awam sementara untuk hasil PR sekali sahaja.

Menguji Halaman yang Memerlukan Pengesahan

Gunakan skrip Puppeteer untuk log 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();
};

Pemberitahuan Slack/Discord

Salurkan hasil LHCI ke sembang pasukan anda — kemerosotan prestasi wajar menerima perhatian yang sama seperti kegagalan ujian.

Mudah Alih berbanding Desktop

Lighthouse menggunakan mudah alih sebagai lalai (4G perlahan + CPU kelas pertengahan). Untuk desktop, tetapkan preset: 'desktop'. Kebanyakan aplikasi pengeluaran patut diaudit pada kedua-duanya — gunakan kerja berasingan dalam CI.

Menentukur Ambang

Mulakan dengan skor semasa sebagai garis dasar. Jangan gagalkan PR pada hari pertama — catat dan beri amaran dahulu. Setelah pasukan anda biasa dengan aliran kerja ini, naikkan ambang secara beransur-ansur.

Melangkaui Lighthouse

Lighthouse ialah data makmal. Gabungkannya dengan pemantauan pengguna sebenar (RUM): pakej npm web-vitals bersama analitik anda, atau perkhidmatan seperti SpeedCurve dan Calibre, memberikan trend prestasi dunia sebenar.

Semakan Pantas

Mengapakah Lighthouse CI biasanya mengambil median daripada berbilang pelaksanaan (contohnya 5), bukannya satu pelaksanaan sahaja?

Jawab dalam pelajaran interaktif

Ringkasan: Lighthouse Automatik

lhci autorun berintegrasi dengan CI. Konfigurasikan dalam lighthouserc.json: URL, pelaksanaan (5+), penegasan terhadap kategori dan metrik serta bajet prestasi. Gunakan treosh/lighthouse-ci-action untuk GitHub. Hos sendiri pelayan LHCI untuk melihat trend. Gunakan skrip Puppeteer untuk halaman yang memerlukan pengesahan. Audit mudah alih dan desktop. Mulakan dengan amaran; ketatkan ambang dari semasa ke semasa. Gabungkan dengan RUM untuk gambaran menyeluruh.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pemeriksaan Lighthouse Automatik” percuma?

Ya — teks penuh “Pemeriksaan Lighthouse Automatik” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pemeriksaan Lighthouse Automatik”?

Tambah GitHub Action Lighthouse CI, tetapkan ambang skor prestasi dan kebolehcapaian, serta halang percantuman yang menurunkan Core Web Vitals. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Pemeriksaan Lighthouse Automatik” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

GitHub Actions untuk Frontend: lint, ujian dan binaan
Pelancaran ke Vercel, Netlify dan Cloudflare Pages
Pemboleh Ubah Persekitaran dalam CI
Pemeriksaan Lighthouse Automatik

← Kembali ke Frontend Academy