Audit dan Penilaian Lighthouse
Jalankan Lighthouse di DevTools atau CI, baca skor performa dan diagnostik, lalu prioritaskan peluang dengan penghematan terbesar.
Audit dan Penilaian Lighthouse adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Apa Itu Lighthouse?
Lighthouse adalah alat audit sumber terbuka milik Google yang menyimulasikan pemuatan halaman dan memberikan skor berdasarkan kategori Performa, Aksesibilitas, Praktik Terbaik, SEO, dan PWA. Alat ini terintegrasi dalam Chrome DevTools dan dapat dijalankan dari CLI atau CI.
Menjalankan Lighthouse di DevTools
Buka DevTools, klik tab Lighthouse, pilih kategori dan perangkat (seluler/desktop), lalu klik 'Analisis pemuatan halaman'. Pengujian simulasi ini memerlukan waktu sekitar 30 detik.
Rincian Skor Performa
Skor Performa (0–100) adalah rata-rata berbobot dari: LCP (25%), Total Blocking Time (30%), CLS (25%), FCP (10%), Speed Index (10%). Standarnya tinggi—skor 90+ berarti 'Baik'.
First Contentful Paint (FCP)
FCP menandai saat bagian konten pertama (teks atau gambar) dirender. Berbeda dari LCP—FCP memperhatikan apa pun, sedangkan LCP memperhatikan elemen terbesar. Baik: di bawah 1,8 dtk.
Total Blocking Time (TBT)
TBT mengukur berapa lama thread utama diblokir oleh tugas JavaScript yang berdurasi lebih dari 50 md. TBT yang tinggi berarti halaman terasa tidak responsif meskipun tampak sudah siap.
Membaca Bagian Opportunities
Lighthouse mencantumkan 'Opportunities' dengan perkiraan penghematan (misalnya 'Hilangkan sumber daya yang memblokir rendering: 1,2 dtk'). Urutkan berdasarkan penghematan—perbaiki item terbesar terlebih dahulu untuk mendapatkan dampak maksimal.
Opportunities yang Umum
Tindakan perbaikan yang umum: tunda/jalankan secara asinkron skrip nonkritis, sematkan CSS kritis, muat awal permintaan utama, gunakan CDN, aktifkan kompresi teks (Brotli/gzip), dan sajikan format gambar modern.
Lighthouse CLI
Jalankan Lighthouse dari baris perintah untuk audit berskrip.
npm install -g lighthouse
lighthouse https://example.com \
--output html \
--output-path ./report.html \
--chrome-flags="--headless"Lighthouse CI di GitHub Actions
Jalankan audit pada setiap permintaan pull dan gagalkan kompilasi jika skor turun di bawah ambang batas.
# .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
- run: npm ci && npm run build
- uses: treosh/lighthouse-ci-action@v11
with:
configPath: ./lighthouserc.jsonKonfigurasi Lighthouse: Pernyataan Skor
Tetapkan pernyataan di lighthouserc.json agar permintaan pull dengan skor yang menurun ditolak.
{
"ci": {
"assert": {
"assertions": {
"categories:performance": ["error", { "minScore": 0.9 }],
"categories:accessibility": ["error", { "minScore": 0.95 }],
"largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
}
}
}
}Pembatasan Kecepatan dan Simulasi Perangkat
Secara bawaan, Lighthouse menyimulasikan jaringan 4G yang lambat dan CPU seluler kelas menengah. Hal ini disengaja—pengguna produksi pada perangkat nyata lebih lambat daripada mesin pengembangan Anda.
Variasi Skor — Mengapa Berubah-ubah
Skor Lighthouse berubah-ubah antarjalankan karena waktu JavaScript yang bervariasi. Jalankan audit 3–5 kali dan gunakan nilai median. Gunakan numberOfRuns milik Lighthouse CI untuk menghitung median secara otomatis.
Pemeriksaan Singkat
Metrik Lighthouse mana yang mengukur berapa lama thread utama diblokir oleh tugas JavaScript yang panjang?
Ringkasan: Lighthouse
Lighthouse mengaudit Performa, Aksesibilitas, Praktik Terbaik, SEO, dan PWA. Skor Performa adalah rata-rata berbobot dari LCP, TBT, CLS, FCP, dan Speed Index. Bagian Opportunities mengurutkan tindakan perbaikan berdasarkan perkiraan penghematan. Jalankan dengan DevTools, CLI, atau di CI menggunakan treosh/lighthouse-ci-action. Untuk mengatasi variasi skor, gunakan median dari beberapa pengujian.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Audit dan Penilaian Lighthouse” gratis?
Ya — teks lengkap “Audit dan Penilaian Lighthouse” 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 “Audit dan Penilaian Lighthouse”?
Jalankan Lighthouse di DevTools atau CI, baca skor performa dan diagnostik, lalu prioritaskan peluang dengan penghematan terbesar. 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 2 dari 4.
Berapa lama pelajaran “Audit dan Penilaian Lighthouse” 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
- Core Web Vitals: LCP, FID, CLS
- Audit dan Penilaian Lighthouse
- Optimasi Gambar: lazy loading, format WebP
- Pemisahan Kode dan Rute Lazy