ภาพรวม

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 วิธีเรียกใช้รายงาน

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

4. คลิกแท็บ Lighthouse

   

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

6. คลิกดำเนินการตรวจสอบ Lighthouse จะแสดงรายงานในหน้าเว็บหลังจากผ่านไป 30 ถึง 60 วินาที

   

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

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

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

npm install -g lighthouse

วิธีดำเนินการตรวจสอบ

lighthouse <url>

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

lighthouse --help

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

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

เรียกใช้ข้อมูลเชิงลึก PageSpeed

หากต้องการเรียกใช้ Lighthouse ใน PageSpeed Insights ให้ทำดังนี้

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

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

   

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

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

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

วิธีดำเนินการตรวจสอบ

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

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

   

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

   

แบ่งปันและดูรายงานทางออนไลน์

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

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

Lighthouse Viewer ต้องการเอาต์พุต JSON ของรายงาน Lighthouse รายการด้านล่างจะอธิบายวิธีรับเอาต์พุต JSON โดยขึ้นอยู่กับเวิร์กโฟลว์ของ Lighthouse ที่คุณใช้

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

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

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

แชร์รายงานในฐานะ GitHub Gists

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

วิธีส่งออกรายงานเป็น Gist จากรายงาน

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

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

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

• เพิ่ม ?gist=<ID> ลงใน URL ของผู้ชม โดย <ID> คือรหัสของ Gist text 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