Pengoptimuman Prestasi Web & Lighthouse · Pelajaran

CLI dan Lighthouse Berprogram

Pelajari cara menjalankan audit Lighthouse daripada baris perintah dan mengintegrasikan API-nya ke dalam skrip serta aplikasi tersuai.

Pelajaran 1 daripada 411 langkah

CLI dan Lighthouse Berprogram ialah pelajaran Pengoptimuman Prestasi Web & Lighthouse percuma di CoddyKit. Ini ialah pelajaran 1 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 Pengoptimuman Prestasi Web & Lighthouse, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Melangkaui Pelayar

Anda mungkin pernah menggunakan Lighthouse dalam DevTools pelayar anda. Tetapi bagaimana jika anda mahu menjalankan audit secara automatik atau mengintegrasikannya ke dalam aliran kerja anda?

Pelajaran ini menerangkan cara menggunakan Lighthouse daripada baris perintah (CLI) untuk semakan pantas dan secara berprogram melalui API Node.js untuk automasi lanjutan.

Mengautomasi dan Mengintegrasikan

Menjalankan Lighthouse daripada CLI atau secara berprogram membuka pelbagai kemungkinan yang hebat:

  • Automasi: Menjadualkan audit berkala tanpa campur tangan manual.
  • Integrasi CI/CD: Mengesan kemerosotan prestasi lebih awal dalam saluran paip pembangunan anda.
  • Laporan tersuai: Menjana laporan yang disesuaikan dengan keperluan khusus anda.
  • Pengujian berskala besar: Mengaudit banyak halaman dengan cekap merentas sesebuah tapak web.

Mendapatkan Lighthouse CLI

Untuk menggunakan Lighthouse daripada baris perintah, anda perlu memasang Node.js pada sistem anda. Setelah Node.js tersedia, anda boleh memasang CLI Lighthouse secara global menggunakan npm:

npm install -g lighthouse

Perintah ini menjadikan perintah lighthouse tersedia terus dalam terminal anda, membolehkan anda menjalankan audit dari mana-mana direktori.

Menjalankan Audit CLI Asas

Dengan CLI Lighthouse yang telah dipasang, menjalankan audit adalah mudah. Berikan URL yang mahu anda uji. Secara lalai, perintah ini memaparkan ringkasan pada konsol dan menjana laporan HTML.

lighthouse https://www.example.com

Perintah ini akan melancarkan tika Chrome tanpa kepala, menjalankan audit dan kemudian menjana fail laporan HTML dalam direktori semasa anda, dengan nama berdasarkan URL tersebut.

Memilih Output Anda

CLI Lighthouse boleh menjana laporan dalam pelbagai format. Anda boleh menentukan jenis dan laluan output menggunakan bendera:

  • --output html: Menjana laporan HTML yang mudah digunakan (lalai).
  • --output json: Menyediakan data audit mentah dalam format JSON untuk dihuraikan.
  • --output csv: Mengeksport ringkasan metrik utama sebagai fail CSV.

Cuba jalankan audit dan simpan output sebagai JSON:

lighthouse https://www.example.com --output json --output-path ./report.json

Menyesuaikan Audit Anda

Anda boleh memperhalus audit dengan pelbagai pilihan untuk mensimulasikan keadaan pengguna yang berbeza atau memfokuskan aspek tertentu:

  • --throttling-preset: Mensimulasikan keadaan rangkaian dan CPU yang berbeza (contohnya, mobile, desktop).
  • --only-categories: Memfokuskan audit pada kategori tertentu (contohnya, performance, accessibility).

Contoh: Audit prestasi sahaja untuk pengguna desktop:

lighthouse https://www.example.com --throttling-preset desktop --only-categories performance

Lighthouse sebagai API

Untuk integrasi yang lebih mendalam dan kawalan yang lebih besar, Lighthouse menawarkan API Node.js. Ini membolehkan anda membenamkan Lighthouse terus ke dalam aplikasi JavaScript, memberikan anda kawalan penuh terhadap proses audit dan akses kepada hasil mentah.

Biasanya, API ini menggunakan Puppeteer, iaitu pustaka Node, untuk mengawal tika pelayar Chrome tanpa kepala secara berprogram bagi menjalankan audit.

Audit Berprogram Asas

Mari cipta skrip Node.js ringkas untuk menjalankan audit Lighthouse. Mula-mula, pastikan lighthouse dan chrome-launcher telah dipasang dalam projek anda:

npm install lighthouse chrome-launcher

Kemudian, cipta fail .js (contohnya, audit.js) dengan kod berikut:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runLighthouseAudit(url) {
  // Launch a headless Chrome instance
  const chrome = await chromeLauncher.launch({
    chromeFlags: ['--headless']
  });

  // Configure Lighthouse options
  const options = {
    logLevel: 'info',
    output: 'json',
    port: chrome.port // Connect to the launched Chrome instance
  };

  // Run Lighthouse audit
  const runnerResult = await lighthouse(url, options);

  console.log('Audit complete for %s', runnerResult.lhr.finalUrl);
  console.log('Performance score: %s', runnerResult.lhr.categories.performance.score * 100);

  // Kill the Chrome instance
  await chrome.kill();
}

// Call the function with a URL to audit
runLighthouseAudit('https://www.example.com');

Mengekstrak Data Audit

Objek runnerResult mengandungi banyak data tentang audit (lhr bermaksud Lighthouse Result). Anda boleh mengakses skor, butiran audit tertentu dan maklumat lain secara berprogram.

Berikut ialah cara mengekstrak skor Performance dan nilai First Contentful Paint (FCP) daripada hasil tersebut:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function extractAuditData(url) {
  const chrome = await chromeLauncher.launch({
    chromeFlags: ['--headless']
  });
  const options = {
    port: chrome.port
  };
  const runnerResult = await lighthouse(url, options);

  // Access the overall performance score
  const performanceScore = runnerResult.lhr.categories.performance.score * 100;

  // Access a specific audit result by its ID (e.g., First Contentful Paint)
  const fcpAudit = runnerResult.lhr.audits['first-contentful-paint'];

  console.log(`Performance Score: ${performanceScore}%`);
  console.log(`First Contentful Paint: ${fcpAudit.displayValue}`);

  await chrome.kill();
}

extractAuditData('https://www.example.com');

Bila Hendak Menggunakan Setiap Satu?

Anda telah mempelajari Lighthouse melalui CLI dan secara berprogram. Antara berikut, yang manakah merupakan kes penggunaan ideal untuk menggunakan Lighthouse secara berprogram (melalui API Node.js)?

Imbas Kembali: Kuasa CLI dan API

Tahniah! Anda telah meneroka keupayaan Lighthouse melangkaui pelayar.

  • CLI Lighthouse sesuai untuk audit pantas atas permintaan dan penjanaan laporan ringkas terus daripada terminal anda.
  • API Node.js Lighthouse menyediakan keupayaan integrasi mendalam, yang membolehkan automasi, pelaporan tersuai dan pembenaman semakan prestasi ke dalam aplikasi serta aliran kerja yang kompleks.

Alat ini penting untuk mengekalkan dan meningkatkan prestasi web pada skala besar serta mengintegrasikan audit ke dalam proses pembangunan anda.

Percuma untuk bermula

Pelajari Pengoptimuman Prestasi Web & Lighthouse 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
12
Pelajaran
48

Soalan Lazim

Adakah pelajaran “CLI dan Lighthouse Berprogram” percuma?

Ya — teks penuh “CLI dan Lighthouse Berprogram” 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 Pengoptimuman Prestasi Web & Lighthouse, tingkat taraf kepada CoddyKit PRO. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “CLI dan Lighthouse Berprogram”?

Pelajari cara menjalankan audit Lighthouse daripada baris perintah dan mengintegrasikan API-nya ke dalam skrip serta aplikasi tersuai. Anda berlatih Pengoptimuman Prestasi Web & Lighthouse 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 Pengoptimuman Prestasi Web & Lighthouse?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengoptimuman Prestasi Web & Lighthouse 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 1 daripada 4.

Berapa lamakah pelajaran “CLI dan Lighthouse Berprogram” 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 Pengoptimuman Prestasi Web & Lighthouse ini?

Ya. Setiap pelajaran Pengoptimuman Prestasi Web & Lighthouse 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

  1. CLI dan Lighthouse Berprogram
  2. Audit dan Pernyataan Tersuai
  3. Mengintegrasikan Lighthouse ke dalam CI/CD
  4. Belanjawan Prestasi dengan Lighthouse
← Kembali ke Pengoptimuman Prestasi Web & Lighthouse