ข้อมูลเบื้องต้นเกี่ยวกับ Lighthouse

Lighthouse เป็นเครื่องมืออัตโนมัติแบบโอเพนซอร์สที่จะช่วยคุณปรับปรุงคุณภาพของหน้าเว็บ โดยสามารถเรียกใช้ในหน้าเว็บใดก็ได้ ทั้งสาธารณะหรือที่ต้องมีการตรวจสอบสิทธิ์ โดยมีการตรวจสอบประสิทธิภาพ การช่วยเหลือพิเศษ Progressive Web App, SEO และอื่นๆ

คุณสามารถเรียกใช้ Lighthouse ใน Chrome DevTools, จากบรรทัดคำสั่ง หรือเป็นโมดูล Node ได้ ระบุ URL ให้ Lighthouse ตรวจสอบ จากนั้นเครื่องมือจะทําการตรวจสอบหน้าเว็บชุดหนึ่ง แล้วสร้างรายงานเกี่ยวกับประสิทธิภาพของหน้าเว็บ ใช้การตรวจสอบที่ไม่ผ่านเป็นแนวทางในการปรับปรุงหน้าเว็บ การตรวจสอบแต่ละรายการจะมีข้อมูลอ้างอิงซึ่งอธิบายว่าการตรวจสอบมีความสำคัญอย่างไร รวมถึงวิธีแก้ไข

นอกจากนี้คุณยังใช้ Lighthouse CI เพื่อป้องกันไม่ให้เว็บไซต์เกิดปัญหาซ้ำได้อีกด้วย

เริ่มต้นใช้งาน

เลือกเวิร์กโฟลว์ Lighthouse ที่เหมาะกับคุณที่สุด

เรียกใช้ Lighthouse ใน Chrome DevTools

Lighthouse มีแผงของตัวเองในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome วิธีเรียกใช้รายงาน

  1. ดาวน์โหลด Google Chrome สำหรับเดสก์ท็อป
  2. เปิด Chrome แล้วไปที่ URL ที่ต้องการตรวจสอบ คุณสามารถตรวจสอบ URL ใดก็ได้บนเว็บ
  3. เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

  4. คลิกแท็บ Lighthouse

    ส่วนทางด้านซ้ายคือวิวพอร์ตของหน้าเว็บที่จะได้รับการตรวจสอบ ทางด้านขวาคือแผง Lighthouse ของ Chrome DevTools

  5. คลิกวิเคราะห์การโหลดหน้าเว็บ DevTools จะแสดงรายการหมวดหมู่การตรวจสอบ เปิดใช้ตัวเลือกทั้งหมดต่อไป

  6. คลิกเรียกใช้การตรวจสอบ Lighthouse จะแสดงรายงานในหน้าหลังจาก 30-60 วินาที

    รายงาน Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome

ติดตั้งและเรียกใช้เครื่องมือบรรทัดคำสั่ง Node

วิธีติดตั้งโมดูล Node

  1. ดาวน์โหลด Google Chrome สำหรับเดสก์ท็อป
  2. ติดตั้ง Node เวอร์ชันปัจจุบันที่มีการสนับสนุนระยะยาว
  3. ติดตั้ง Lighthouse Flag -g จะติดตั้งเป็นโมดูลส่วนกลาง
npm install -g lighthouse

วิธีเรียกใช้การตรวจสอบ

lighthouse <url>

วิธีดูตัวเลือกทั้งหมด

lighthouse --help

เรียกใช้โมดูล Node แบบเป็นโปรแกรม

ดูตัวอย่างการเรียกใช้ Lighthouse โดยใช้โปรแกรมเป็นโมดูล Node ได้ที่การใช้แบบเป็นโปรแกรม

เรียกใช้ PageSpeed Insights

วิธีเรียกใช้ Lighthouse ใน PageSpeed Insights

  1. ไปที่ PageSpeed Insights
  2. ป้อน URL ของหน้าเว็บ

  3. คลิกวิเคราะห์

    เว็บไซต์ PageSpeed Insights

เรียกใช้ Lighthouse เป็นส่วนขยาย Chrome

วิธีติดตั้งส่วนขยาย

  1. ดาวน์โหลด Google Chrome สำหรับเดสก์ท็อป
  2. ติดตั้งส่วนขยาย Lighthouse ของ Chrome จาก Chrome เว็บสโตร์

วิธีเรียกใช้การตรวจสอบ

  1. ใน Chrome ให้ไปที่หน้าที่ต้องการตรวจสอบ

  2. คลิก Lighthouse ข้างแถบที่อยู่ของ Chrome หรือในเมนูส่วนขยายของ Chrome เมื่อคลิกแล้ว เมนู Lighthouse จะขยายออก

    ส่วนขยายจะแจ้งให้สร้างรายงาน

  3. คลิกสร้างรายงาน Lighthouse จะเรียกใช้การตรวจสอบกับหน้าเว็บที่โฟกัสอยู่ในปัจจุบัน จากนั้นเปิดแท็บใหม่พร้อมรายงานผลลัพธ์

    รายงาน Lighthouse ที่สร้างขึ้นจากส่วนขยาย

แชร์และดูรายงานออนไลน์

ใช้เครื่องมือดู Lighthouse เพื่อดูและแชร์รายงานทางออนไลน์

ผู้ดู Lighthouse

แชร์รายงานเป็น JSON

ผู้ดู Lighthouse ต้องการเอาต์พุต JSON ของรายงาน Lighthouse สร้างผลลัพธ์ JSON ดังนี้

  • จากรายงาน Lighthouse คลิก เพื่อเปิดเมนู แล้วคลิก บันทึกเป็น JSON
  • บรรทัดคำสั่ง เรียกใช้: shell lighthouse --output json --output-path <path/for/output.json>

วิธีดูข้อมูลรายงาน

  1. เปิด Lighthouse Viewer
  2. ลากไฟล์ JSON ไปยังโปรแกรมดู หรือคลิกที่ใดก็ได้ในโปรแกรมดูเพื่อเปิดโปรแกรมนำทางไฟล์และเลือกไฟล์

แชร์รายงานเป็น GitHub Gists

หากไม่ต้องการส่งไฟล์ JSON ด้วยตนเอง คุณสามารถแชร์รายงานเป็น GitHub Gist ลับได้ ประโยชน์อย่างหนึ่งของ gist คือการควบคุมเวอร์ชันที่ไม่มีค่าใช้จ่าย

วิธีส่งออกรายงานเป็นข้อมูลสรุปจากรายงาน

  1. คลิกเมนู แล้วคลิก เปิดในโปรแกรมดู รายงานอยู่ที่ https://googlechrome.github.io/lighthouse/viewer/
  2. จากโปรแกรมดู ให้คลิกเมนู แล้วคลิก บันทึกเป็น Gist เมื่อดำเนินการนี้เป็นครั้งแรก ป๊อปอัปจะขอสิทธิ์เข้าถึงข้อมูลพื้นฐานของ GitHub รวมถึงสิทธิ์อ่านและเขียนข้อมูลใน gist

หากต้องการส่งออกรายงานเป็นสรุปจาก Lighthouse เวอร์ชัน CLI ให้สร้างสรุปด้วยตนเอง แล้วคัดลอกและวางเอาต์พุต JSON ของรายงานลงในสรุป ชื่อไฟล์ gist ที่มีเอาต์พุต JSON ต้องลงท้ายด้วย .lighthouse.report.json ดูตัวอย่างวิธีสร้างเอาต์พุต JSON จากเครื่องมือบรรทัดคำสั่งได้ที่แชร์รายงานเป็น JSON

วิธีดูรายงานที่บันทึกเป็น Gist

  • เพิ่ม ?gist=<ID> ลงใน URL ของผู้ดู โดยที่ <ID> คือรหัสของข้อมูลสรุป text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • เปิดผู้ดูแล้ววาง URL ของเนื้อหา

การขยายความสามารถของ Lighthouse

Lighthouse มีเป้าหมายเพื่อให้คําแนะนําที่เกี่ยวข้องและนําไปใช้ได้จริงสําหรับนักพัฒนาเว็บทุกคน ด้วยเหตุนี้เราจึงมีฟีเจอร์ 2 รายการให้คุณใช้ปรับแต่ง Lighthouse ตามความต้องการที่เฉพาะเจาะจง

สแต็กแพ็ก

นักพัฒนาซอฟต์แวร์ใช้เทคโนโลยีต่างๆ มากมาย (แบ็กเอนด์ ระบบจัดการเนื้อหา และเฟรมเวิร์ก JavaScript) เพื่อสร้างหน้าเว็บ Lighthouse จะให้คําแนะนําที่เกี่ยวข้องและนําไปใช้ได้จริงแทนที่จะแสดงคําแนะนําทั่วไป ทั้งนี้ขึ้นอยู่กับเครื่องมือที่ใช้

แพ็กเกจสแต็กช่วยให้ Lighthouse ตรวจจับแพลตฟอร์มที่ใช้สร้างเว็บไซต์ได้ และแสดงคําแนะนําที่เจาะจงตามสแต็ก ผู้เชี่ยวชาญจากชุมชนเป็นผู้กำหนดและดูแลจัดการคําแนะนําเหล่านี้

หากต้องการมีส่วนร่วมในแพ็กสแต็ก ให้อ่านหลักเกณฑ์การมีส่วนร่วม

ปลั๊กอิน Lighthouse

ปลั๊กอิน Lighthouse ช่วยให้ผู้เชี่ยวชาญด้านโดเมนขยายฟังก์ชันการทำงานของ Lighthouse เพื่อตอบสนองความต้องการเฉพาะของชุมชนได้ คุณใช้ประโยชน์จากข้อมูลที่ Lighthouse รวบรวมเพื่อสร้างการตรวจสอบใหม่ได้ หลักๆ แล้ว ปลั๊กอิน Lighthouse คือโมดูลโหนดที่ใช้ชุดการตรวจสอบที่ Lighthouse จะเรียกใช้และเพิ่มลงในรายงานเป็นหมวดหมู่ใหม่

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการสร้างปลั๊กอินของคุณเอง โปรดดูคู่มือปลั๊กอินในที่เก็บของ Lighthouse GitHub

ผสานรวม Lighthouse

หากคุณเป็นบริษัทหรือบุคคลที่ผสานรวม Lighthouse ไว้ในผลิตภัณฑ์หรือบริการที่นำเสนอ เรายินดีอย่างยิ่ง เราต้องการให้ผู้คนจำนวนมากที่สุด ได้ใช้ Lighthouse

โปรดดูหลักเกณฑ์และชิ้นงานแบรนด์สำหรับการผสานรวม Lighthouse เพื่อแสดงว่าคุณใช้ Lighthouse อยู่ ทั้งยังปกป้องแบรนด์ของเราด้วย

มีส่วนร่วมใน Lighthouse

Lighthouse เป็นโอเพนซอร์ส และยินดีให้การสนับสนุน! ดูเครื่องมือติดตามปัญหาของที่เก็บเพื่อค้นหาข้อบกพร่องที่คุณแก้ไขได้ หรือการตรวจสอบที่คุณจะสร้างหรือปรับปรุงได้ ปัญหาเป็นพื้นที่ที่ดีในการพูดคุยเกี่ยวกับเมตริกประสิทธิภาพ แนวคิดสําหรับการตรวจสอบใหม่ หรือสิ่งอื่นๆ ที่เกี่ยวข้องกับ Lighthouse