Frontend Academy · บทเรียน

การตรวจสอบและให้คะแนนด้วย Lighthouse

เรียกใช้ Lighthouse ใน DevTools หรือ CI อ่านคะแนนประสิทธิภาพและข้อมูลวินิจฉัย แล้วจัดลำดับโอกาสที่ช่วยประหยัดเวลาได้มากที่สุด

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

ไลต์เฮาส์คืออะไร

ไลต์เฮาส์คือเครื่องมือตรวจสอบแบบโอเพนซอร์สของกูเกิลที่จำลองการโหลดหน้าเว็บ และให้คะแนนในหมวดประสิทธิภาพ การเข้าถึง แนวทางปฏิบัติที่ดี การจัดอันดับในเครื่องมือค้นหา และ PWA เครื่องมือนี้มีอยู่ใน Chrome DevTools และเรียกใช้ได้จาก CLI หรือกระบวนการผสานรวมอย่างต่อเนื่อง

การเรียกใช้ไลต์เฮาส์ใน DevTools

เปิด DevTools คลิกแท็บไลต์เฮาส์ เลือกหมวดหมู่และอุปกรณ์ (มือถือหรือเดสก์ท็อป) แล้วคลิก 'วิเคราะห์การโหลดหน้าเว็บ' การทดสอบจำลองใช้เวลาประมาณ 30 วินาที

รายละเอียดคะแนนประสิทธิภาพ

คะแนนประสิทธิภาพ (0–100) คือค่าเฉลี่ยถ่วงน้ำหนักของ: LCP (25%), เวลาบล็อกรวม (30%), CLS (25%), FCP (10%), ดัชนีความเร็ว (10%) เกณฑ์นี้ค่อนข้างสูง — คะแนนตั้งแต่ 90 ขึ้นไปถือว่า 'ดี'

การแสดงผลเนื้อหาครั้งแรก (FCP)

FCP ระบุเวลาที่เนื้อหาชิ้นแรก ไม่ว่าจะเป็นข้อความหรือรูปภาพ ถูกแสดงผล ซึ่งแตกต่างจาก LCP — FCP สนใจองค์ประกอบใดก็ตาม ส่วน LCP สนใจองค์ประกอบที่ใหญ่ที่สุด ค่าที่ดี: ต่ำกว่า 1.8 วินาที

เวลาบล็อกรวม (TBT)

TBT ใช้วัดระยะเวลาที่เธรดหลักถูกบล็อกโดยงาน JavaScript ที่ใช้เวลานานกว่า 50 มิลลิวินาที ค่า TBT สูงหมายความว่าหน้าเว็บจะรู้สึกไม่ตอบสนอง แม้จะดูเหมือนพร้อมใช้งานแล้วก็ตาม

การอ่านส่วนโอกาสในการปรับปรุง

ไลต์เฮาส์จะแสดงรายการ 'โอกาสในการปรับปรุง' พร้อมค่าประหยัดเวลาโดยประมาณ เช่น 'กำจัดทรัพยากรที่บล็อกการแสดงผล: 1.2 วินาที' จัดเรียงตามค่าประหยัดเวลา แล้วแก้ไขรายการที่มีผลกระทบมากที่สุดก่อน

โอกาสในการปรับปรุงที่พบบ่อย

แนวทางแก้ไขที่พบบ่อย ได้แก่ เลื่อนการทำงานหรือทำงานแบบอะซิงโครนัสสำหรับสคริปต์ที่ไม่สำคัญ แทรก CSS ที่สำคัญไว้ในเอกสาร โหลดคำขอสำคัญล่วงหน้า ใช้ CDN เปิดใช้การบีบอัดข้อความ (Brotli/gzip) และให้บริการรูปแบบภาพสมัยใหม่

ไลต์เฮาส์แบบ CLI

เรียกใช้ไลต์เฮาส์จากบรรทัดคำสั่งเพื่อทำการตรวจสอบตามสคริปต์

npm install -g lighthouse

lighthouse https://example.com \
  --output html \
  --output-path ./report.html \
  --chrome-flags="--headless"

ไลต์เฮาส์ CI ใน GitHub Actions

เรียกใช้การตรวจสอบกับคำขอรวมโค้ดทุกครั้ง และทำให้การสร้างโปรเจกต์ล้มเหลวหากคะแนนลดต่ำกว่าเกณฑ์ที่กำหนด

# .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.json

การกำหนดค่าไลต์เฮาส์: การยืนยันคะแนน

กำหนดการยืนยันใน lighthouserc.json เพื่อให้คำขอรวมโค้ดที่ทำให้คะแนนถดถอยล้มเหลว

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
      }
    }
  }
}

การจำกัดความเร็วและการจำลองอุปกรณ์

โดยค่าเริ่มต้น ไลต์เฮาส์จำลองเครือข่าย 4G ที่ช้าและ CPU มือถือระดับกลาง การทำเช่นนี้มีจุดประสงค์ — ผู้ใช้จริงบนอุปกรณ์จริงจะช้ากว่าเครื่องพัฒนาของคุณ

ความแปรปรวนของคะแนน — เหตุใดคะแนนจึงแกว่ง

คะแนนไลต์เฮาส์เปลี่ยนแปลงระหว่างการเรียกใช้แต่ละครั้ง เนื่องจากเวลาในการทำงานของ JavaScript ไม่คงที่ ทำการตรวจสอบ 3–5 ครั้งแล้วใช้ค่ามัธยฐาน ใช้ numberOfRuns ของ Lighthouse CI เพื่อคำนวณค่ามัธยฐานโดยอัตโนมัติ

ตรวจสอบอย่างรวดเร็ว

ตัวชี้วัดใดของไลต์เฮาส์ใช้วัดระยะเวลาที่เธรดหลักถูกบล็อกโดยงาน JavaScript ที่ใช้เวลานาน

สรุป: ไลต์เฮาส์

ไลต์เฮาส์ตรวจสอบประสิทธิภาพ การเข้าถึง แนวทางปฏิบัติที่ดี การจัดอันดับในเครื่องมือค้นหา และ PWA คะแนนประสิทธิภาพคือค่าเฉลี่ยถ่วงน้ำหนักของ LCP, TBT, CLS, FCP และดัชนีความเร็ว ส่วนโอกาสในการปรับปรุงจะจัดอันดับแนวทางแก้ไขตามค่าประหยัดเวลาโดยประมาณ เรียกใช้ผ่าน DevTools, CLI หรือในกระบวนการผสานรวมอย่างต่อเนื่องด้วย treosh/lighthouse-ci-action เนื่องจากคะแนนแปรผัน ควรใช้ค่ามัธยฐานจากการเรียกใช้หลายครั้ง

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

บทเรียน “การตรวจสอบและให้คะแนนด้วย Lighthouse” ฟรีหรือไม่

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

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

เรียกใช้ Lighthouse ใน DevTools หรือ CI อ่านคะแนนประสิทธิภาพและข้อมูลวินิจฉัย แล้วจัดลำดับโอกาสที่ช่วยประหยัดเวลาได้มากที่สุด คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

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

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

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

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

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

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

ตัวชี้วัด Core Web Vitals: LCP, FID และ CLS
การตรวจสอบและให้คะแนนด้วย Lighthouse
การปรับปรุงรูปภาพ: การโหลดแบบ lazy และรูปแบบ WebP
การแยกโค้ดและเส้นทางแบบ Lazy

← กลับไปที่ Frontend Academy