Web Performance Optimization & Lighthouse · บทเรียน

การตรวจสอบและการยืนยันแบบกำหนดเอง

พัฒนาการตรวจสอบ Lighthouse ของคุณเองเพื่อบังคับใช้กฎด้านประสิทธิภาพหรือแนวทางปฏิบัติที่ดีที่สุดซึ่งเหมาะกับโครงการ

บทเรียน 2 จาก 411 ขั้นตอน

การตรวจสอบและการยืนยันแบบกำหนดเอง เป็นบทเรียน Web Performance Optimization & Lighthouse ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Performance Optimization & Lighthouse และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Performance Optimization & Lighthouse มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Extend Lighthouse's Power

Welcome to creating custom Lighthouse audits! While Lighthouse offers many built-in checks, sometimes you need to enforce project-specific rules or validate unique performance requirements.

This lesson shows you how to build your own.

Why Create Custom Audits?

Custom audits allow you to tailor Lighthouse to your exact needs. They help you:

  • Enforce Standards: Check for specific coding patterns or component usage.
  • Validate Unique Metrics: Measure performance aspects not covered by default.
  • Ensure Compliance: Verify project-specific accessibility or SEO rules.
  • Automate Checks: Integrate tailored performance feedback directly into your development workflow.

Audit Anatomy: Gatherers & Audits

A custom Lighthouse audit typically has two main parts:

  • Gatherer: This component collects raw data about the page. It runs inside the browser and extracts specific information, like DOM elements, network requests, or JavaScript variables.
  • Audit: This component analyzes the data collected by the gatherer. It applies logic to determine a score, a pass/fail state, and provides recommendations.

Both are then linked in a Lighthouse configuration file.

Building a Gatherer: Data Collection

A gatherer is responsible for collecting data. It extends Lighthouse.Gatherer and uses methods like afterPass to run JavaScript in the page's context.

Let's create a gatherer that checks for a specific <meta> tag.

Gatherer Code Example

This gatherer looks for an <meta name="author"> tag and returns its content. If not found, it returns null.

// gatherers/author-meta-gatherer.js
'use strict';
const Gatherer = require('lighthouse').Gatherer;

class AuthorMetaGatherer extends Gatherer {
  afterPass(options) {
    const driver = options.driver;
    // Evaluate JS in the browser context
    return driver.evaluateAsync(() => {
      const metaTag = document.querySelector('meta[name="author"]');
      return metaTag ? metaTag.content : null;
    });
  }
}

module.exports = AuthorMetaGatherer;

Building an Audit: Evaluation Logic

An audit takes the data provided by gatherers and applies your custom logic. It extends Lighthouse.Audit and implements a static audit method.

This method receives the collected "artifacts" (data) and determines the audit's result.

Audit Code Example

This audit uses the data from our AuthorMetaGatherer to check if the author meta tag is present and has content. It scores 1 (pass) or 0 (fail).

// audits/author-meta-audit.js
'use strict';
const Audit = require('lighthouse').Audit;

class AuthorMetaAudit extends Audit {
  static get meta() {
    return {
      id: 'author-meta-tag',
      title: 'Author meta tag is present',
      failureTitle: 'Author meta tag is missing or empty',
      description: 'Ensures an author meta tag is present for attribution.',
      requiredArtifacts: ['AuthorMetaGatherer'],
    };
  }

  static audit(artifacts) {
    const authorMetaContent = artifacts.AuthorMetaGatherer;
    const passed = !!authorMetaContent && authorMetaContent.trim().length > 0;

    return {
      score: passed ? 1 : 0,
      details: {
        type: 'debuginfo',
        headings: [
          {key: 'content', itemType: 'text', text: 'Author Meta Content'},
        ],
        items: [{content: authorMetaContent || 'Not found'}],
      },
    };
  }
}

module.exports = AuthorMetaAudit;

Integrating into Lighthouse Config

To make Lighthouse aware of your custom gatherer and audit, you need a custom configuration file. This file tells Lighthouse which gatherers to run and which audits to include, often extending the default Lighthouse checks.

// custom-config.js
'use strict';

module.exports = {
  extends: 'lighthouse:default', // Inherit default audits
  gatherers: [
    './gatherers/author-meta-gatherer.js',
  ],
  audits: [
    './audits/author-meta-audit.js',
  ],
  categories: {
    'custom-category': {
      title: 'Custom Checks',
      description: 'Project-specific performance and best practice audits.',
      auditRefs: [
        {id: 'author-meta-tag', weight: 1, group: 'metrics'},
      ],
    },
  },
};

Running Lighthouse with Custom Audits

Finally, you can run Lighthouse programmatically using Node.js, referencing your custom configuration file. This script launches Chrome, runs Lighthouse, and generates a report.

Make sure you have lighthouse and chrome-launcher installed via npm.

// run-custom-audit.js
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {
    logLevel: 'info',
    output: 'html',
    onlyCategories: ['custom-category'], // Run ONLY our custom category
    port: chrome.port
  };
  const config = require('./custom-config.js'); // Load your custom config

  const runnerResult = await lighthouse('https://example.com', options, config);

  console.log('Report is done for', runnerResult.lhr.requestedUrl);
  // Accessing your custom audit score:
  const customAuditScore = runnerResult.lhr.audits['author-meta-tag'].score;
  console.log('Author Meta Tag Audit Score:', customAuditScore);

  await chrome.kill();
})();

Custom Audit Components

You've learned about the key pieces needed to build a custom Lighthouse audit.

Which of the following are essential components when creating a custom Lighthouse audit?

Recap: Your Custom Audit Toolkit

You've successfully learned how to extend Lighthouse's capabilities!

By understanding gatherers, audits, and custom configurations, you can now build powerful, project-specific checks. This allows you to enforce unique best practices and gain deeper, tailored insights into your web performance.

เริ่มต้นได้ฟรี

เรียนรู้ Web Performance Optimization & Lighthouse ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
12
บทเรียน
48

คำถามที่พบบ่อย

บทเรียน “การตรวจสอบและการยืนยันแบบกำหนดเอง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การตรวจสอบและการยืนยันแบบกำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Performance Optimization & Lighthouse ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Performance Optimization & Lighthouse มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การตรวจสอบและการยืนยันแบบกำหนดเอง”

พัฒนาการตรวจสอบ Lighthouse ของคุณเองเพื่อบังคับใช้กฎด้านประสิทธิภาพหรือแนวทางปฏิบัติที่ดีที่สุดซึ่งเหมาะกับโครงการ คุณปฏิบัติ Web Performance Optimization & Lighthouse ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Performance Optimization & Lighthouse หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Performance Optimization & Lighthouse บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การตรวจสอบและการยืนยันแบบกำหนดเอง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Web Performance Optimization & Lighthouse นี้ได้ไหม

ได้ บทเรียน Web Performance Optimization & Lighthouse ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. CLI และ Lighthouse แบบใช้โปรแกรม
  2. การตรวจสอบและการยืนยันแบบกำหนดเอง
  3. การผสานรวม Lighthouse เข้ากับ CI/CD
  4. งบประมาณประสิทธิภาพด้วย Lighthouse
← กลับไปที่ Web Performance Optimization & Lighthouse