วิธีที่ Lighthouse คำนวณคะแนนประสิทธิภาพโดยรวม
โดยทั่วไปมีเพียงเมตริกเท่านั้นที่ส่งผลต่อคะแนนประสิทธิภาพของ Lighthouse ไม่ใช่ผลลัพธ์ของโอกาสหรือการวินิจฉัย อย่างไรก็ตาม การปรับปรุงโอกาสและการวินิจฉัยมีแนวโน้มที่จะปรับปรุงค่าเมตริก ดังนั้นจึงมีความสัมพันธ์แบบอ้อม
เราได้สรุปสาเหตุที่คะแนนอาจมีความผันผวน องค์ประกอบของคะแนน และวิธีที่ Lighthouse ให้คะแนนเมตริกแต่ละรายการได้ที่ด้านล่าง
สาเหตุที่คะแนนมีความผันผวน
ความแปรปรวนจำนวนมากในคะแนนประสิทธิภาพและค่าเมตริกโดยรวมนั้นไม่ได้เกิดจาก Lighthouse เมื่อคะแนนประสิทธิภาพผันผวน มักเป็นเพราะการเปลี่ยนแปลงของเงื่อนไขพื้นฐาน ปัญหาที่พบได้ทั่วไปมีดังนี้
- การทดสอบ A/B หรือการเปลี่ยนแปลงในโฆษณาที่แสดง
- การเปลี่ยนแปลงการกำหนดเส้นทางการเข้าชมทางอินเทอร์เน็ต
- การทดสอบในอุปกรณ์ต่างๆ เช่น เดสก์ท็อปที่มีประสิทธิภาพสูงและแล็ปท็อปที่มีประสิทธิภาพต่ำ
- ส่วนขยายของเบราว์เซอร์ที่แทรก JavaScript และเพิ่ม/แก้ไขคำขอเครือข่าย
- ซอฟต์แวร์ป้องกันไวรัส
เอกสารประกอบของ Lighthouse เกี่ยวกับความแปรปรวนจะอธิบายเรื่องนี้อย่างละเอียด
นอกจากนี้ แม้ว่า Lighthouse จะช่วยให้คุณได้คะแนนประสิทธิภาพโดยรวมเพียงคะแนนเดียว แต่ก็อาจมีประโยชน์มากกว่าหากมองว่าประสิทธิภาพของเว็บไซต์เป็นการกระจายคะแนน ไม่ใช่แค่ตัวเลขเดียว ดูข้อมูลเบื้องต้นเกี่ยวกับเมตริกประสิทธิภาพที่คำนึงถึงผู้ใช้เป็นหลักเพื่อทำความเข้าใจสาเหตุ
วิธีถ่วงน้ำหนักคะแนนประสิทธิภาพ
คะแนนประสิทธิภาพคือค่าเฉลี่ยถ่วงน้ำหนักของคะแนนเมตริก โดยปกติแล้ว เมตริกที่ถ่วงน้ำหนักมากขึ้นจะมีผลกระทบมากขึ้นต่อคะแนนประสิทธิภาพโดยรวม คะแนนเมตริกจะไม่เห็นในรายงาน แต่ระบบจะคํานวณไว้เบื้องหลัง
ประภาคาร 10
| ตรวจสอบ | น้ำหนัก |
|---|---|
| การแสดงผลที่มีเนื้อหาเต็มครั้งแรก | 10% |
| ดัชนีความเร็ว | 10% |
| Largest Contentful Paint | 25% |
| เวลาทั้งหมดในการบล็อก | 30% |
| Cumulative Layout Shift | 25% |
Lighthouse 8
| ตรวจสอบ | น้ำหนัก |
|---|---|
| First Contentful Paint | 10% |
| ดัชนีความเร็ว | 10% |
| การแสดงผลเนื้อหาขนาดใหญ่ที่สุด | 25% |
| เวลาในการตอบสนอง | 10% |
| เวลาทั้งหมดในการบล็อก | 30% |
| Cumulative Layout Shift | 15% |
วิธีระบุคะแนนเมตริก
เมื่อ Lighthouse รวบรวมเมตริกประสิทธิภาพ (รายงานส่วนใหญ่เป็นมิลลิวินาที) ก็จะแปลงค่าเมตริกดิบแต่ละค่าเป็นคะแนนเมตริกจาก 0 ถึง 100 โดยดูว่าค่าเมตริกจัดอยู่ในการกระจายการให้คะแนนของ Lighthouse หรือไม่ การแจกแจงคะแนนเป็นการแจกแจงแบบลอการิทึมปกติที่มาจากเมตริกประสิทธิภาพของข้อมูลประสิทธิภาพเว็บไซต์จริงใน HTTP Archive
ตัวอย่างเช่น Largest Contentful Paint (LCP) จะวัดเมื่อผู้ใช้รับรู้ว่าเนื้อหาที่ใหญ่ที่สุดของหน้าเว็บปรากฏขึ้น ค่าเมตริกสําหรับ LCP แสดงระยะเวลาระหว่างที่ผู้ใช้เริ่มโหลดหน้าเว็บและหน้าเว็บแสดงผลเนื้อหาหลัก เมื่อพิจารณาจากข้อมูลเว็บไซต์จริง เว็บไซต์ที่มีประสิทธิภาพสูงจะแสดงผล LCP ภายในเวลาประมาณ 1,220 มิลลิวินาที ดังนั้นค่าเมตริกจึงแมปกับคะแนน 99 คะแนน
หากจะเจาะลึกลงไปอีกเล็กน้อย โมเดลเส้นโค้งการให้คะแนนของ Lighthouse จะใช้ข้อมูล HTTPArchive เพื่อกำหนดจุดควบคุม 2 จุด จากนั้นจะกำหนดรูปร่างของเส้นโค้ง log-normal ค่ามัธยฐาน 25 เปอร์เซ็นต์ของข้อมูลใน HTTP Archive จะกลายเป็นคะแนน 50 (จุดควบคุมค่ามัธยฐาน) และค่ามัธยฐาน 8 เปอร์เซ็นต์จะกลายเป็นคะแนน 90 (จุดควบคุม "ดี"/สีเขียว) ขณะสำรวจกราฟเส้นโค้งการให้คะแนน โปรดทราบว่าระหว่าง 0.50 ถึง 0.92 มีความสัมพันธ์แบบเกือบเชิงเส้นระหว่างค่าเมตริกและคะแนน คะแนนประมาณ 0.96 คือ "จุดที่มีผลตอบแทนลดลง" เมื่อคะแนนสูงขึ้น เส้นโค้งจะยิ่งห่างออกไป จึงต้องมีการปรับปรุงเมตริกมากขึ้นเพื่อปรับปรุงคะแนนที่สูงอยู่แล้ว
วิธีจัดการเดสก์ท็อปกับอุปกรณ์เคลื่อนที่
ดังที่ได้กล่าวไว้ เส้นโค้งคะแนนจะกำหนดจากข้อมูลประสิทธิภาพจริง ก่อนที่จะมี Lighthouse v6 กราฟคะแนนทั้งหมดจะอิงตามข้อมูลประสิทธิภาพบนอุปกรณ์เคลื่อนที่ แต่การเรียกใช้ Lighthouse บนเดสก์ท็อปจะใช้ข้อมูลดังกล่าว ในทางปฏิบัติ ปัญหานี้ทำให้คะแนนเดสก์ท็อปสูงเกินจริง Lighthouse v6 แก้ไขปัญหานี้โดยใช้การให้คะแนนเดสก์ท็อปที่เฉพาะเจาะจง แม้ว่าคุณจะคาดหวังการเปลี่ยนแปลงโดยรวมของคะแนนประสิทธิภาพจาก 5 เป็น 6 ได้อย่างแน่นอน แต่คะแนนสำหรับเดสก์ท็อปจะแตกต่างกันอย่างมาก
คะแนนมีรหัสสีอย่างไร
คะแนนเมตริกและคะแนนประสิทธิภาพจะมีสีตามช่วงต่อไปนี้
- 0 ถึง 49 (สีแดง): แย่
- 50 ถึง 89 (สีส้ม): ต้องปรับปรุง
- 90 ถึง 100 (สีเขียว): ดี
หากต้องการให้ผู้ใช้ได้รับประสบการณ์ที่ดี เว็บไซต์ต้องพยายามได้คะแนนที่ดี (90-100) การได้คะแนน "ยอดเยี่ยม" เต็ม 100 คะแนนนั้นยากที่จะบรรลุผลและไม่ใช่สิ่งที่คาดหวัง ตัวอย่างเช่น การทำคะแนนจาก 99-100 ก็จำเป็นจะต้องมีการปรับปรุงเมตริกในระดับเดียวกับ 90-94
นักพัฒนาแอปจะทําอะไรได้บ้างเพื่อปรับปรุงคะแนนประสิทธิภาพ
ก่อนอื่นให้ใช้เครื่องคำนวณคะแนนของ Lighthouse เพื่อช่วยให้เข้าใจเกณฑ์ที่ควรตั้งเป้าเพื่อให้ได้คะแนนประสิทธิภาพที่กำหนดของ Lighthouse
ในรายงาน Lighthouse ส่วนโอกาสจะมีคําแนะนําและเอกสารประกอบโดยละเอียดเกี่ยวกับวิธีใช้งาน นอกจากนี้ ส่วนการวินิจฉัยยังมีคําแนะนําเพิ่มเติมที่นักพัฒนาแอปสามารถดูเพื่อปรับปรุงประสิทธิภาพให้ดียิ่งขึ้น