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

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

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

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

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

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

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

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

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

  4. คลิกแท็บ Lighthouse

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

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

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

    รายงาน 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
  2. ลากไฟล์ JSON ไปยังโปรแกรมดู หรือคลิกที่ใดก็ได้ในโปรแกรมดูเพื่อเปิดโปรแกรมนำทางไฟล์และเลือกไฟล์

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

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

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

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

หากต้องการส่งออกรายงานเป็นสรุปจาก 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 และเพิ่มลงในรายงานเป็นหมวดหมู่ใหม่

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

ผสานรวม Lighthouse

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

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

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

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