การตรวจสอบ HTML ด้วย Lighthouse

ไลต์เฮาส์เป็นเครื่องมือตรวจประเมินอัตโนมัติที่มีอยู่ใน DevTools ของโครม (แท็บการตรวจประเมิน) ซึ่งให้คะแนนหน้าเว็บในด้านประสิทธิภาพ การเข้าถึง แนวทางปฏิบัติที่ดี การเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหา และ PWA เครื่องมือนี้จะนำหน้าเว็บเข้าสู่กระบวนการตรวจประเมินในเบราว์เซอร์ วัดผล และสร้างคำแนะนำที่นำไปใช้ได้จริง

ใน DevTools ของโครม ให้เปลี่ยนไปที่ไลต์เฮาส์ เลือกหมวดหมู่ เลือกเดสก์ท็อปหรือมือถือ แล้วคลิก "วิเคราะห์การโหลดหน้าเว็บ" เครื่องมือจะโหลดหน้าเว็บใหม่ในสภาพแวดล้อมที่สะอาด และสร้างรายงานภายในเวลาไม่ถึงหนึ่งนาที

ประสิทธิภาพ วัดตัวชี้วัดหลักของเว็บและตัวชี้วัดความเร็วอื่น ๆ การเข้าถึง ตรวจสอบกฎที่สอดคล้องกับ WCAG แนวทางปฏิบัติที่ดี ครอบคลุมความปลอดภัยและมาตรฐานเว็บสมัยใหม่ การเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหา ตรวจสอบมาร์กอัปที่โปรแกรมรวบรวมข้อมูลเข้าถึงได้ PWA ตรวจสอบความสามารถในการติดตั้งและการรองรับการใช้งานแบบออฟไลน์

การตรวจประเมินการเข้าถึงจะตรวจพบสิ่งต่อไปนี้: ไม่มีข้อความทดแทน ไม่มีป้ายกำกับแบบฟอร์ม ความต่างระดับสีต่ำ ไม่มีแอตทริบิวต์ภาษา ตัวระบุซ้ำ ไม่มีจุดระบุโครงสร้าง และองค์ประกอบที่รับโฟกัสได้แต่ไม่รองรับแป้นพิมพ์ แต่ละปัญหามีลิงก์ไปยังคำแนะนำการแก้ไขโดยละเอียด

การแสดงเนื้อหาชิ้นใหญ่ที่สุด (LCP), การเลื่อนของเค้าโครงสะสม (CLS), เวลาบล็อกทั้งหมด (TBT) และดัชนีความเร็ว ตัวชี้วัดแต่ละรายการจะได้รับคะแนนและถ่วงน้ำหนักรวมเป็นคะแนนประสิทธิภาพโดยรวม ไลต์เฮาส์จะแสดงว่าองค์ประกอบ DOM ใดมีส่วนต่อแต่ละตัวชี้วัดมากที่สุด

ตรวจสอบการใช้การเชื่อมต่อแบบเข้ารหัส ข้อผิดพลาดในคอนโซล อัตราส่วนกว้างยาวของรูปภาพ อินเทอร์เฟซการเขียนโปรแกรมที่เลิกใช้แล้ว และเนื้อหาผสม การตรวจประเมินแนวทางปฏิบัติที่ดีจะตรวจพบรูปแบบเก่าหรือไม่ปลอดภัยได้หลากหลาย ซึ่งควรปรับให้ทันสมัย

ตรวจพบคำอธิบายเมทาที่หายไป แท็ก <title> ที่หายไปหรือซ้ำกัน ปัญหาใน robots.txt ลิงก์ที่ไม่มีข้อความอธิบาย แท็กเมทาวิวพอร์ตที่หายไป และปัญหาการระบุภาษาสำหรับลิงก์ ควรใช้การตรวจประเมินการเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหาของไลต์เฮาส์ร่วมกับเครื่องมือตรวจประเมินจริง เช่น เอเอชรีฟส์หรือสกรีมมิงฟร็อก เพื่อวิเคราะห์ระดับเนื้อหา

ตรวจสอบข้อกำหนดทุกข้อสำหรับการติดตั้ง ได้แก่ การเชื่อมต่อแบบเข้ารหัส ไฟล์รายการที่ถูกต้องพร้อมฟิลด์ขั้นต่ำ ตัวทำงานบริการที่ลงทะเบียนแล้ว แท็กวิวพอร์ต และไอคอน แก้ไขความล้มเหลวทั้งหมดของการตรวจประเมิน PWA ก่อนเปิดตัวเป็นแอปที่ติดตั้งได้

เครื่องมือบรรทัดคำสั่งของไลต์เฮาส์และเครื่องมือตรวจประเมินไลต์เฮาส์จะผสานการตรวจประเมินเข้ากับระบบผสานรวมและส่งมอบอย่างต่อเนื่อง แต่ละ PR จะเรียกใช้ไลต์เฮาส์กับตัวอย่างที่นำขึ้นใช้งาน และการทำงานจะล้มเหลวหากคะแนนลดลงต่ำกว่าเกณฑ์ ป้องกันการถดถอยโดยไม่รู้ตัวในด้านการเข้าถึง ประสิทธิภาพ หรือการเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหา

รายงานของไลต์เฮาส์สามารถบันทึกเป็นข้อมูลรูปแบบเจสันและเปรียบเทียบด้วยโปรแกรมได้: ติดตามคะแนน LCP เมื่อเวลาผ่านไปเพื่อตรวจจับการถดถอย เปรียบเทียบ PR สองรายการเพื่อดูว่ารายการใดเปลี่ยนตัวชี้วัดใด และแจ้งเตือนเมื่อข้ามเกณฑ์ ข้อมูลมีโครงสร้างพร้อมสำหรับเครื่องมือต่าง ๆ

ไลต์เฮาส์เป็นการทดสอบจำลอง — ทำงานในสภาพแวดล้อมที่ควบคุมไว้ ไม่ได้ทำงานกับผู้ใช้จริง ควรใช้ร่วมกับเครื่องมือติดตามการใช้งานของผู้ใช้จริง (RUM) ซึ่งติดตามประสบการณ์ของผู้ใช้จริง การทดสอบจำลองช่วยตรวจพบการถดถอยได้ตั้งแต่เนิ่น ๆ ส่วน RUM ยืนยันว่าผู้ใช้สัมผัสได้ถึงการปรับปรุงจริง

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

มองคะแนนไลต์เฮาส์เป็นเป้าหมายของการปรับปรุงอย่างต่อเนื่อง ไม่ใช่สิ่งที่แก้เพียงครั้งเดียว สร้างวัฒนธรรมที่ตรวจดูคะแนนในทุก PR แก้ไขการถดถอยทันที และค่อย ๆ ปรับปรุงค่าฐาน ทีมส่วนใหญ่จะเห็นคะแนนเพิ่มขึ้นอย่างสม่ำเสมอตลอดหลายเดือนเมื่อรักษาวินัยเช่นนี้

เหตุใดจึงควรใช้การตรวจประเมินจำลองของไลต์เฮาส์ร่วมกับการติดตามการใช้งานของผู้ใช้จริง (RUM)

ไลต์เฮาส์ตรวจประเมินหน้าเว็บในด้านประสิทธิภาพ การเข้าถึง แนวทางปฏิบัติที่ดี การเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหา และ PWA เรียกใช้จาก DevTools ของโครมสำหรับการตรวจสอบเป็นครั้งคราว และใช้การตรวจประเมินไลต์เฮาส์อย่างต่อเนื่องสำหรับการผสานรวมอย่างต่อเนื่อง แก้ไขการถดถอยในทุก PR สร้างวัฒนธรรมการปรับปรุงที่ขับเคลื่อนด้วยการวัดผล และใช้การตรวจประเมินจำลองร่วมกับการติดตามการใช้งานของผู้ใช้จริงเพื่อยืนยันว่าการปรับปรุงในห้องทดลองส่งผลดีต่อผู้ใช้จริง