Lighthouse เป็นเครื่องมืออัตโนมัติแบบโอเพนซอร์สที่จะช่วยคุณปรับปรุงคุณภาพของหน้าเว็บ โดยสามารถเรียกใช้ในหน้าเว็บใดก็ได้ ทั้งสาธารณะหรือที่ต้องมีการตรวจสอบสิทธิ์ โดยมีการตรวจสอบประสิทธิภาพ การช่วยเหลือพิเศษ Progressive Web App, SEO และอื่นๆ
คุณสามารถเรียกใช้ Lighthouse ใน Chrome DevTools, จากบรรทัดคำสั่ง หรือเป็นโมดูล Node ได้ ระบุ URL ให้ Lighthouse ตรวจสอบ จากนั้นเครื่องมือจะทําการตรวจสอบหน้าเว็บชุดหนึ่ง แล้วสร้างรายงานเกี่ยวกับประสิทธิภาพของหน้าเว็บ ใช้การตรวจสอบที่ไม่ผ่านเป็นแนวทางในการปรับปรุงหน้าเว็บ การตรวจสอบแต่ละรายการจะมีข้อมูลอ้างอิงซึ่งอธิบายว่าการตรวจสอบมีความสำคัญอย่างไร รวมถึงวิธีแก้ไข
นอกจากนี้คุณยังใช้ Lighthouse CI เพื่อป้องกันไม่ให้เว็บไซต์เกิดปัญหาซ้ำได้อีกด้วย
เริ่มต้นใช้งาน
เลือกเวิร์กโฟลว์ Lighthouse ที่เหมาะกับคุณที่สุด
- ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome หน้าตรวจสอบที่ต้องมีการตรวจสอบสิทธิ์และอ่านรายงานในรูปแบบที่ใช้งานง่ายจากเบราว์เซอร์โดยตรง
- จากบรรทัดคำสั่ง ทำให้ Lighthouse ทำงานโดยอัตโนมัติด้วยสคริปต์ Shell
- เป็นโมดูลโหนด ผสานรวม Lighthouse เข้ากับระบบการผสานรวมอย่างต่อเนื่อง
- จาก UI บนเว็บ เรียกใช้ Lighthouse และลิงก์กับรายงานโดยไม่จำเป็นต้องติดตั้ง
เรียกใช้ Lighthouse ใน Chrome DevTools
Lighthouse มีแผงของตัวเองในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome วิธีเรียกใช้รายงาน
- ดาวน์โหลด Google Chrome สำหรับเดสก์ท็อป
- เปิด Chrome แล้วไปที่ URL ที่ต้องการตรวจสอบ คุณสามารถตรวจสอบ URL ใดก็ได้บนเว็บ
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
คลิกแท็บ Lighthouse
ส่วนทางด้านซ้ายคือวิวพอร์ตของหน้าเว็บที่จะได้รับการตรวจสอบ ทางด้านขวาคือแผง Lighthouse ของ Chrome DevTools คลิกวิเคราะห์การโหลดหน้าเว็บ DevTools จะแสดงรายการหมวดหมู่การตรวจสอบ เปิดใช้ตัวเลือกทั้งหมดต่อไป
คลิกเรียกใช้การตรวจสอบ Lighthouse จะแสดงรายงานในหน้าหลังจาก 30-60 วินาที
รายงาน Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome
ติดตั้งและเรียกใช้เครื่องมือบรรทัดคำสั่ง Node
วิธีติดตั้งโมดูล Node
- ดาวน์โหลด Google Chrome สำหรับเดสก์ท็อป
- ติดตั้ง Node เวอร์ชันปัจจุบันที่มีการสนับสนุนระยะยาว
- ติดตั้ง Lighthouse Flag
-gจะติดตั้งเป็นโมดูลส่วนกลาง
npm install -g lighthouse
วิธีเรียกใช้การตรวจสอบ
lighthouse <url>
วิธีดูตัวเลือกทั้งหมด
lighthouse --help
เรียกใช้โมดูล Node แบบเป็นโปรแกรม
ดูตัวอย่างการเรียกใช้ Lighthouse โดยใช้โปรแกรมเป็นโมดูล Node ได้ที่การใช้แบบเป็นโปรแกรม
เรียกใช้ PageSpeed Insights
วิธีเรียกใช้ Lighthouse ใน PageSpeed Insights
- ไปที่ PageSpeed Insights
- ป้อน URL ของหน้าเว็บ
คลิกวิเคราะห์
เว็บไซต์ PageSpeed Insights
เรียกใช้ Lighthouse เป็นส่วนขยาย Chrome
วิธีติดตั้งส่วนขยาย
- ดาวน์โหลด Google Chrome สำหรับเดสก์ท็อป
- ติดตั้งส่วนขยาย Lighthouse ของ Chrome จาก Chrome เว็บสโตร์
วิธีเรียกใช้การตรวจสอบ
- ใน Chrome ให้ไปที่หน้าที่ต้องการตรวจสอบ
คลิก
Lighthouse ข้างแถบที่อยู่ของ Chrome หรือในเมนูส่วนขยายของ Chrome
เมื่อคลิกแล้ว เมนู Lighthouse จะขยายออก
ส่วนขยายจะแจ้งให้สร้างรายงาน คลิกสร้างรายงาน Lighthouse จะเรียกใช้การตรวจสอบกับหน้าเว็บที่โฟกัสอยู่ในปัจจุบัน จากนั้นเปิดแท็บใหม่พร้อมรายงานผลลัพธ์
รายงาน Lighthouse ที่สร้างขึ้นจากส่วนขยาย
แชร์และดูรายงานออนไลน์
ใช้เครื่องมือดู Lighthouse เพื่อดูและแชร์รายงานทางออนไลน์
แชร์รายงานเป็น JSON
ผู้ดู Lighthouse ต้องการเอาต์พุต JSON ของรายงาน Lighthouse สร้างผลลัพธ์ JSON ดังนี้
- จากรายงาน Lighthouse คลิก
เพื่อเปิดเมนู แล้วคลิก
บันทึกเป็น JSON - บรรทัดคำสั่ง เรียกใช้:
shell lighthouse --output json --output-path <path/for/output.json>
วิธีดูข้อมูลรายงาน
- เปิด Lighthouse Viewer
- ลากไฟล์ JSON ไปยังโปรแกรมดู หรือคลิกที่ใดก็ได้ในโปรแกรมดูเพื่อเปิดโปรแกรมนำทางไฟล์และเลือกไฟล์
แชร์รายงานเป็น GitHub Gists
หากไม่ต้องการส่งไฟล์ JSON ด้วยตนเอง คุณสามารถแชร์รายงานเป็น GitHub Gist ลับได้ ประโยชน์อย่างหนึ่งของ gist คือการควบคุมเวอร์ชันที่ไม่มีค่าใช้จ่าย
วิธีส่งออกรายงานเป็นข้อมูลสรุปจากรายงาน
- คลิกเมนู แล้วคลิก
เปิดในโปรแกรมดู รายงานอยู่ที่
https://googlechrome.github.io/lighthouse/viewer/ - จากโปรแกรมดู ให้คลิกเมนู แล้วคลิก บันทึกเป็น 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