Lighthouse เป็นเครื่องมืออัตโนมัติแบบโอเพนซอร์สสำหรับการปรับปรุงคุณภาพของหน้าเว็บ โดยคุณจะเรียกใช้ไฟล์ดังกล่าวกับหน้าเว็บใดก็ได้ สาธารณะ หรือที่ต้องมีการตรวจสอบสิทธิ์ ซึ่งมีการตรวจสอบประสิทธิภาพ, การช่วยเหลือพิเศษ, Progressive Web App, SEO และอื่นๆ
คุณสามารถเรียกใช้ Lighthouse ใน Chrome DevTools, จากบรรทัดคำสั่ง หรือเรียกใช้ในรูปแบบโมดูลโหนดก็ได้ เมื่อคุณส่ง URL เพื่อตรวจสอบ Lighthouse ก็เรียกใช้ชุดการตรวจสอบกับหน้าเว็บ จากนั้นสร้างรายงานเกี่ยวกับประสิทธิภาพของหน้าเว็บ จากนั้นจึงใช้การตรวจสอบที่ไม่สำเร็จเป็นตัวบ่งชี้วิธีปรับปรุงหน้าเว็บ การตรวจสอบแต่ละครั้งจะมีเอกสารอ้างอิงที่อธิบายสาเหตุที่การตรวจสอบมีความสำคัญ พร้อมกับวิธีแก้ไข
นอกจากนี้คุณยังใช้ Lighthouse CI เพื่อป้องกันการถดถอยในเว็บไซต์ได้อีกด้วย
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้และมีส่วนร่วมกับ Lighthouse ได้ในวิดีโอด้านล่างจาก Google I/O
เริ่มต้นใช้งาน
เลือกเวิร์กโฟลว์ Lighthouse ที่เหมาะกับคุณที่สุด
- ใน Chrome DevTools ตรวจสอบหน้าเว็บที่ต้องมีการตรวจสอบสิทธิ์ได้อย่างง่ายดาย และอ่านรายงานของคุณในรูปแบบที่ใช้ง่าย
- จากบรรทัดคำสั่ง ทำให้การเรียกใช้ Lighthouse เป็นแบบอัตโนมัติผ่านสคริปต์ Shell
- เป็นโมดูลโหนด ผสานรวม Lighthouse ในระบบการผสานรวมแบบต่อเนื่อง
- จาก UI บนเว็บ เรียกใช้ Lighthouse และลิงก์กับรายงานโดยไม่ต้องติดตั้งอะไรเลย
เรียกใช้ Lighthouse ใน Chrome DevTools
Lighthouse มีแผงของตัวเองในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome วิธีเรียกใช้รายงาน
- ดาวน์โหลด Google Chrome สำหรับเดสก์ท็อป
- ใน Google Chrome ให้ไปที่ URL ที่ต้องการตรว��สอบ คุณสามารถตรวจสอบ URL บนเว็บได้ทั้งหมด
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
คลิกแท็บ Lighthouse
คลิกวิเคราะห์การโหลดหน้าเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงรายการหมวดหมู่การตรวจสอบ เปิดใช้ทุกเหตุการณ์ไว้
คลิกดำเนินการตรวจสอบ Lighthouse จะแสดงรายงานในหน้าเว็บหลังจากผ่านไป 30 ถึง 60 วินาที
ติดตั้งและเรียกใช้เครื่องมือบรรทัดคำสั่งของโหนด
วิธีติดตั้งโมดูลโหนด
- ดาวน์โหลด Google Chrome สำหรับเดสก์ท็อป
- ติดตั้งโหนดการสนับสนุนระยะยาวเวอร์ชันปัจจุบัน
- ติดตั้ง Lighthouse การแจ้งว่า
-g
ไม่เหมาะสมจะติดตั้งเป็นโมดูลส่วนกลาง
npm install -g lighthouse
วิธีดำเนินการตรวจสอบ
lighthouse <url>
วิธีดูตัวเลือกทั้งหมด
lighthouse --help
เรียกใช้โมดูลโหนดแบบเป็นโปรแกรม
โปรดดูตัวอย่างการเรียกใช้ Lighthouse แบบเป็นโปรแกรมเป็นโมดูลโหนดในการใช้แบบเป็นโปรแกรม
เรียกใช้ข้อมูลเชิงลึก PageSpeed
หากต้องการเรียกใช้ Lighthouse ใน PageSpeed Insights ให้ทำดังนี้
- ไปที่ PageSpeed Insights
- ป้อน URL ของหน้าเว็บ
คลิกวิเคราะห์
เรียกใช้ Lighthouse เป็นส่วนขยาย Chrome
วิธีติดตั้งส่วนขยายมีดังนี้
- ดาวน์โหลด Google Chrome สำหรับเดสก์ท็อป
- ติดตั้งส่วนขยาย Lighthouse ของ Chrome จาก Chrome เว็บสโตร์
วิธีดำเนินการตรวจสอบ
- ไปที่หน้าที่ต้องการตรวจสอบใน Chrome
คลิก Lighthouse ซึ่งควรอยู่ข้างแถบที่อยู่ของ Chrome หากไม่มี ให้เปิดเมนูส่วนขยายของ Chrome แล้วเข้าถึงได้จากที่นั่น หลังจากคลิกแล้ว เมนู Lighthouse จะขยายออก
คลิกสร้างรายงาน Lighthouse ดำเนินการตรวจสอบโดยเทียบกับหน้าเว็บที่มุ่งเน้นอยู่ในขณะนี้ จากนั้นเปิดแท็บใหม่ที่มีรายงานผลลัพธ์
แบ่งปันและดูรายงานทางออนไลน์
ใช้ Lighthouse Viewer เพื่อดูและแชร์รายงานออนไลน์
แชร์รายงานเป็น JSON
Lighthouse Viewer ต้องการเอาต์พุต JSON ของรายงาน Lighthouse รายการด้านล่างจะอธิบายวิธีรับเอาต์พุต JSON โดยขึ้นอยู่กับเวิร์กโฟลว์ของ Lighthouse ที่คุณใช้
- รายงาน Lighthouse เปิดเมนู ด้านขวาบน แล้วคลิก บันทึกเป็น JSON
- บรรทัดคำสั่ง เรียกใช้:
shell lighthouse --output json --output-path <path/for/output.json>
วิธีดูข้อมูลรายงาน
- เปิด Lighthouse Viewer
- ลากไฟล์ JSON ไปยังโปรแกรมดู หรือคลิกที่ใดก็ได้ใน Viewer เพื่อเปิดตัวนำทางไฟล์และเลือกไฟล์
แชร์รายงานในฐานะ GitHub Gists
หากไม่ต้องการส่งต่อไฟล์ JSON ด้วยตนเอง คุณก็สามารถแชร์รายงานเป็น Gists ลับของ GitHub ได้เช่นกัน ประโยชน์อย่างหนึ่งของ gists คือการควบคุมเวอร์ชันฟรี
วิธีส่งออกรายงานเป็น Gist จากรายงาน
- (หากอยู่ในโปรแกรมดูภาพอยู่แล้ว ให้ข้ามขั้นตอนนี้) เปิดเมนู ด้านขวาบน แล้วคลิก เปิดในโปรแกรมดูภาพ รายงานจะเปิดขึ้นในเครื่องมือดู ซึ่งอยู่ที่
https://googlechrome.github.io/lighthouse/viewer/
- ในโปรแกรม Viewer ให้เปิดเมนู ด้านบนขวา จากนั้นคลิก บันทึกเป็น Gist เมื่อคุณดำเนินการเป็นครั้งแรก ป๊อปอัปจะขอสิทธิ์เข้าถึงข้อมูล GitHub พื้นฐานของคุณ รวมถึงอ่านและเขียนไปยัง gists
หากต้องการส่งออกรายงานเป็น Gist จาก Lighthouse เวอร์ชัน CLI ให้สร้าง Gist ด้วยตนเองและคัดลอกและวางเอาต��พุต JSON ของรายงานลงใน Gist ชื่อไฟล์ gist ที่มีเอาต์พุต JSON ต้องลงท้ายด้วย .lighthouse.report.json
โปรดดูตัวอย่างวิธีสร้างเอาต์พุต JSON จากเครื่องมือบรรทัดคำสั่งในแชร์รายงานเป็น JSON
วิธีดูรายงานที่บันทึกไว้เป็น Gist
- เพิ่ม
?gist=<ID>
ลงใน URL ของผู้ชม โดย<ID>
คือรหัสของ Gisttext https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
- เปิดผู้ดู และวาง URL ของ Gist ลงในนั้น
การขยายการใช้งานของ Lighthouse
Lighthouse มุ่งมั่นที่จะให้คำแนะนำที่มีความเกี่ยวข้องและนำไปใช้ได้จริงสำหรับนักพัฒนาเว็บทุกราย ด้วยเหตุนี้จึงมีฟีเจอร์ 2 อย่างที่ช่วยให้คุณปรับแต่ง Lighthouse ให้ตรงกับความต้องการที่เฉพาะเจาะจงได้
สแต็กแพ็ก
นักพัฒนาซอฟต์แวร์ใช้เทคโนโลยีที่แตกต่างกันมากมาย (แบ็กเอนด์/เฟรมเวิร์ก CMS/JavaScript) ในการสร้างหน้าเว็บ แทนที่จะแสดงเฉพาะคำแนะนำทั่วไป ตอนนี้ Lighthouse สามารถให้คำแนะนำที่เกี่ยวข้องและนำไปใช้ได้จริงมากขึ้น โดยขึ้นอยู่กับเครื่องมือที่ใช้
"Stack Packs" ช่วยให้ Lighthouse ตรวจจับแพลตฟอร์มที่สร้างบนเว็บไซต์และแสดงคำแนะนำที่อิงตามสแต็กที่เฉพาะเจาะจงได้ คำแนะนำเหล่านี้กำหนดและดูแลจัดการโดยผู้เชี่ยวชาญจากชุมชน
หากต้องการมีส่วนร่วมในสแต็กแพ็ก โปรดอ่านหลักเกณฑ์ในการมีส่วนร่วม
ปลั๊กอิน Lighthouse
ปลั๊กอิน Lighthouse ช่วยให้ผู้เชี่ยวชาญด้านโดเมนขยายฟังก์ชันการทำงานของ Lighthouse เพื่อตอบสนองความต้องการเฉพาะของชุมชนได้ คุณสามารถใช้ประโยชน์จากข้อมูลที่ Lighthouse รวบรวมเพื่อสร้างการตรวจสอบใหม่ได้แล้ว โดยพื้นฐานแล้ว ปลั๊กอิน Lighthouse คือโมดูลโหนดที่ใช้ชุดการตรวจสอบที่จะเรียกใช้โดย Lighthouse และเพิ่มหมว��หมู่ใหม่ในรายงาน
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีสร้างปลั๊กอินของคุณเองได้ที่คู่มือปลั๊กอินในที่เก็บของ Lighthouse GitHub
ผสานรวม Lighthouse
หากคุณเป็นบริษัทหรือบุคคลที่ผสานรวม Lighthouse ให้เป็นส่วนหนึ่งของผลิตภัณฑ์ / บริการที่คุณนำเสนอ สิ่งที่ควรทำก่อนคือเราตื่นเต้นมากที่คุณจะรู้สึกตื่นเต้น เราต้องการให้ผู้ใช้ใช้ Lighthouse ได้มากที่สุด และหลักเกณฑ์และเนื้อหาแบรนด์สำหรับการผสานรวม Lighthouse นี้ก็มีไว้เพื่อให้คุณแสดงให้เห็นว่า Lighthouse อยู่ภายใต้การปกป้องและปกป้องแบรนด์ของเราได้ง่ายๆ
มีส่วนร่วมใน Lighthouse
Lighthouse เป็นโอเพนซอร์สเรายินดีให้การสนับสนุน โปรดไปที่เครื่องมือติดตามปัญหาของที่เก็บเพื่อดูข้อบกพร่องที่คุณแก้ไขได้ หรือการตรวจสอบที่คุณสร้างหรือปรับปรุงได้ นอกจากนี้ เครื่องมือติดตามปัญหายังเป็นที่ที่เหมาะสมในการพูดคุยเรื่องเมตริกประสิทธิภาพ แนวคิดสําหรับการตรวจสอบใหม่ๆ หรือสิ่งอื่นๆ ที่เกี่ยวข้องกับ Lighthouse