วิธีที่ Lighthouse คำนวณคะแนนประสิทธิภาพโดยรวม
โดยทั่วไปแล้ว มีเฉพาะmetricsที่มีผลต่อคะแนนประสิทธิภาพของ Lighthouse เท่านั้น ไม่ใช่ผลลัพธ์ของโอกาสหรือการวินิจฉัย อย่างไรก็ตาม การปรับปรุงโอกาสและการวินิจฉัยน่าจะช่วยปรับปรุงค่าเมตริกให้ดีขึ้น จึงมีความสัมพันธ์โดยอ้อม
เราได้สรุปสาเหตุที่คะแนนอาจผันผวน วิธีคำนวณคะแนน และผลคะแนนของแต่ละเมตริกของ Lighthouse ที่ด้านล่าง
สาเหตุที่คะแนนมีความผันผวน
ความแปรปรวนอย่างมากในคะแนนประสิทธิภาพโดยรวมและค่าเมตริกไม่ได้เกิดจาก Lighthouse การที่คะแนนประสิทธิภาพผันผวนมักเป็นเพราะการเปลี่ยนแปลงของเงื่อนไขสำคัญ ปัญหา ทั่วไปได้แก่
- การทดสอบ A/B หรือการเปลี่ยนแปลงในโฆษณาที่แสดง
- การเปลี่ยนแปลงการกำหนดเส้นทางการเข้าชมทางอินเทอร์เน็ต
- การทดสอบบนอุปกรณ์ต่างๆ เช่น เดสก์ท็อปประสิทธิภาพสูงและแล็ปท็อปประสิทธิภาพต่ำ
- ส่วนขยายเบราว์เซอร์ที่แทรก JavaScript และเพิ่ม/แก้ไขคำขอเครือข่าย
- ซอฟต์แวร์ป้องกันไวรัส
เอกสารประกอบเกี่ยวกับความผันแปรของ Lighthouse จะครอบคลุมเรื่องนี้ในเชิงลึกกว่า
นอกจากนี้ แม้ว่า Lighthouse จะแสดงคะแนนประสิทธิภาพโดยรวมได้เพียงรายการเดียว แต่การมองว่าประสิทธิภาพของเว็บไซต์เป็นการกระจายคะแนนแทนที่จะให้เป็นตัวเลขเดี่ยวก็อาจมีประโยชน์มากกว่า ดูบทแนะนำเกี่ยวกับเมตริกประสิทธิภาพที่ยึดผู้ใช้เป็นศูนย์กลางเพื่อให้เข้าใจถึงสาเหตุ
วิธีถ่วงน้ำหนักคะแนนประสิทธิภาพ
คะแนนประสิทธิภาพคือค่าเฉลี่ยถ่วงน้ำหนักของคะแนนเมตริก โดยทั่วไปแล้ว เมตริกที่มีน้ำหนักมากกว่าจะส่งผลต่อคะแนนประสิทธิภาพโดยรวมมากกว่า คะแนนเมตริกจะไม่แสดงในรายงาน แต่จะคำนวณโดยละเอียด
![เว็บแอปเครื่องคำนวณคะแนนของ Lighthouse](https://developer.chrome.com/static/docs/lighthouse/performance/performance-scoring/image/lighthouse-scoring-calcul-196f49058e387.png?hl=th)
ประภาคาร 10
ตรวจสอบ | น้ำหนัก |
---|---|
First Contentful Paint | 10% |
ดัชนีความเร็ว | 10% |
การแสดงผลเนื้อหาขนาดใหญ่ที่สุด | 25% |
เวลาทั้งหมดในการบล็อก | 30% |
การเปลี่ยนเลย์เอาต์สะสม | 25% |
ประภาคาร 8
ตรวจสอบ | น้ำหนัก |
---|---|
First Contentful Paint | 10% |
ดัชนีความเร็ว | 10% |
การแสดงผลเนื้อหาขนาดใหญ่ที่สุด | 25% |
เวลาในการโต้ตอบ | 10% |
เวลาทั้งหมดในการบล็อก | 30% |
การเปลี่ยนเลย์เอาต์สะสม | 15% |
วิธีกำหนดคะแนนเมตริก
เมื่อ Lighthouse รวบรวมเมตริกประสิทธิภาพแล้ว (ส่วนใหญ่รายงานเป็นมิลลิวินาที) แล้ว Lighthouse จะแปลงค่าเมตริกดิบแต่ละค่าเป็นคะแนนเมตริกจาก 0 ถึง 100 โดยดูว่าค่าเมตริกอยู่ที่ใดในการกระจายคะแนนของ Lighthouse การกระจายคะแนนเป็นการกระจายแบบปกติของบันทึกที่ได้จากเมตริกประสิทธิภาพของข้อมูลประสิทธิภาพของเว็บไซต์จริงใน HTTP Archive
เช่น Largest Contentful Paint (LCP) จะวัดเมื่อผู้ใช้รู้สึกว่าเนื้อหาขนาดใหญ่ที่สุดของหน้าเว็บจะมองเห็นได้ ค่าเมตริกสำหรับ LCP แสดงถึงระยะเวลาตั้งแต่ที่ผู้ใช้เริ่มโหลดหน้าเว็บและหน้าเว็บแสดงเนื้อหาหลัก ตามข้อมูลเว็บไซต์จริง เว็บไซต์ที่มีประสิทธิภาพสูงสุดจะแสดงผล LCP ในเวลาประมาณ 1,220 มิลลิวินาที เพื่อเชื่อมโยงค่าเมตริกกับคะแนน 99 คะแนน
เมื่อมองลึกลงไปอีกเล็กน้อย โมเดลเส้นโค้งการให้คะแนนของ Lighthouse จะใช้ข้อมูล HTTPArchive เพื่อกำหนดจุดควบคุม 2 จุด จากนั้นจึงกำหนดรูปร่างของเส้นโค้ง log-normal เปอร์เซ็นไทล์ที่ 25 ของข้อมูล HTTPArchive ได้ 50 คะแนน (จุดควบคุมค่ามัธยฐาน) และเปอร์เซ็นไทล์ที่ 8 จะกลายเป็น 90 (จุดควบคุมดี/สีเขียว) ขณะที่สำรวจกราฟเส้นโค้งการให้คะแนนด้านล่าง โปรดทราบว่าระหว่าง 0.50 ถึง 0.92 ค่าเมตริกกับคะแนนมีความสัมพันธ์แบบเชิงเส้นแบบเกือบเชิงเส้น ประมาณ 0.96 คะแนนคือ "จุดที่ผลตอบแทนที่ลดลง" เหนือเส้นตรง เส้นโค้งจะถดถอยลง ทำให้ต้องปรับปรุงเมตริกมากขึ้นเพื่อเพิ่มคะแนนที่อยู่สูงอยู่แล้ว
![รูปภาพเส้นโค้งคะแนนสำหรับ TTI](https://developer.chrome.com/static/docs/lighthouse/performance/performance-scoring/image/image-the-scoring-curve-f72983bc008e4.png?hl=th)
วิธีจัดการระหว่างเดสก์ท็อปกับอุปกรณ์เคลื่อนที่
ดังที่กล่าวไว้ข้างต้น เส้นโค้งคะแนนจะพิจารณาจากข้อมูลประสิทธิภาพจริง ก่อนที่จะเปิดตัว Lighthouse v6 กราฟคะแนนทั้งหมดจะอิงตามข้อมูลประสิทธิภาพบนอุปกรณ์เคลื่อนที่ แต่การเรียกใช้ Lighthouse บนเดสก์ท็อปจะใช้ข้อมูลดังกล่าว ในทางปฏิบัติ ปัญหานี้ทำให้คะแนนเดสก์ท็อปสูงเกินจริง Lighthouse v6 แก้ไขข้อบกพร่องนี้โดยใช้การให้คะแนนบนเดสก์ท็อปที่เฉพาะเจาะจง แม้ว่าคะแนนประสิทธิภาพโดยรวมจะเปลี่ยนแปลงไปจาก 5 ถึง 6 แต่คะแนนสำหรับเดสก์ท็อปก็จะมีความแตกต่างกันอย่างมาก
วิธีแบ่งคะแนนเป็นสี
คะแนนเมตริกและคะแนน Perf จะแสดงสีตามช่วงต่อไปนี้
- 0 ถึง 49 (สีแดง): แย่
- 50 ถึง 89 (สีส้ม): ต้องปรับปรุง
- 90 ถึง 100 (สีเขียว): ดี
เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เว็บไซต์ควรพยายามให้คะแนนที่ดี (90-100) คะแนน "ดีมาก" 100 คะแนนคือสิ่งที่ท้าทายอย่างยิ่งที่จะได้มาและเป็นสิ่งที่ไม่คาดคิด ตัวอย่างเช่น หากนำคะแนนจาก 99 เป็น 100 ความต้องการในการปรับปรุงเมตริกพอๆ กัน ก็จะได้ 90 ถึง 94 คะแนน
นักพัฒนาแอปควรทำอย่างไรเพื่อปรับปรุงคะแนนประสิทธิภาพของตน
ขั้นแรก ให้ใช้เครื่องคำนวณคะแนนของ Lighthouse เพื่อทำความเข้าใจเกณฑ์ที่ควรตั้งเป้าให้ได้คะแนนประสิทธิภาพบางอย่างของ Lighthouse
ในส่วนโอกาสในรายงาน Lighthouse จะมีคำแนะนำโดยละเอียดและเอกสารเกี่ยวกับวิธีใช้งาน นอกจากนี้ ส่วนการวินิจฉัยยังมีคําแนะนําเพิ่มเติมที่นักพัฒนาแอปสามารถสํารวจเพื่อปรับปรุงประสิทธิภาพเพิ่มเติมได้