การให้คะแนนประสิทธิภาพของ Lighthouse

วิธีที่ Lighthouse คำนวณคะแนนประสิทธิภาพโดยรวม

โดยทั่วไปแล้ว มีเฉพาะmetricsที่มีผลต่อคะแนนประสิทธิภาพของ Lighthouse เท่านั้น ไม่ใช่ผลลัพธ์ของโอกาสหรือการวินิจฉัย อย่างไรก็ตาม การปรับปรุงโอกาสและการวินิจฉัยน่าจะช่วยปรับปรุงค่าเมตริกให้ดีขึ้น จึงมีความสัมพันธ์โดยอ้อม

เราได้สรุปสาเหตุที่คะแนนอาจผันผวน วิธีคำนวณคะแนน และผลคะแนนของแต่ละเมตริกของ Lighthouse ที่ด้านล่าง

สาเหตุที่คะแนนมีความผันผวน

ความแปรปรวนอย่างมากในคะแนนประสิทธิภาพโดยรวมและค่าเมตริกไม่ได้เกิดจาก Lighthouse การที่คะแนนประสิทธิภาพผันผวนมักเป็นเพราะการเปลี่ยนแปลงของเงื่อนไขสำคัญ ปัญหา ทั่วไปได้แก่

  • การทดสอบ A/B หรือการเปลี่ยนแปลงในโฆษณาที่แสดง
  • การเปลี่ยนแปลงการกำหนดเส้นทางการเข้าชมทางอินเทอร์เน็ต
  • การทดสอบบนอุปกรณ์ต่างๆ เช่น เดสก์ท็อปประสิทธิภาพสูงและแล็ปท็อปประสิทธิภาพต่ำ
  • ส่วนขยายเบราว์เซอร์ที่แทรก JavaScript และเพิ่ม/แก้ไขคำขอเครือข่าย
  • ซอฟต์แวร์ป้องกันไวรัส

เอกสารประกอบเกี่ยวกับความผันแปรของ Lighthouse จะครอบคลุมเรื่องนี้ในเชิงลึกกว่า

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

วิธีถ่วงน้ำหนักคะแนนประสิทธิภาพ

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

เว็บแอปเครื่องคำนวณคะแนนของ Lighthouse
สำรวจการให้คะแนนด้วยเครื่องคำนวณคะแนนของ Lighthouse

ประภาคาร 10

ประภาคาร 8

วิธีกำหนดคะแนนเมตริก

เมื่อ 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
สำรวจกราฟคะแนนสำหรับ TTI

วิธีจัดการระหว่างเดสก์ท็อปกับอุปกรณ์เคลื่อนที่

ดังที่กล่าวไว้ข้างต้น เส้นโค้งคะแนนจะพิจารณาจากข้อมูลประสิทธิภาพจริง ก่อนที่จะเปิดตัว Lighthouse v6 กราฟคะแนนทั้งหมดจะอิงตามข้อมูลประสิทธิภาพบนอุปกรณ์เคลื่อนที่ แต่การเรียกใช้ Lighthouse บนเดสก์ท็อปจะใช้ข้อมูลดังกล่าว ในทางปฏิบัติ ปัญหานี้ทำให้คะแนนเดสก์ท็อปสูงเกินจริง Lighthouse v6 แก้ไขข้อบกพร่องนี้โดยใช้การให้คะแนนบนเดสก์ท็อปที่เฉพาะเจาะจง แม้ว่าคะแนนประสิทธิภาพโดยรวมจะเปลี่ยนแปลงไปจาก 5 ถึง 6 แต่คะแนนสำหรับเดสก์ท็อปก็จะมีความแตกต่างกันอย่างมาก

วิธีแบ่งคะแนนเป็นสี

คะแนนเมตริกและคะแนน Perf จะแสดงสีตามช่วงต่อไปนี้

  • 0 ถึง 49 (สีแดง): แย่
  • 50 ถึง 89 (สีส้ม): ต้องปรับปรุง
  • 90 ถึง 100 (สีเขียว): ดี

เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เว็บไซต์ควรพยายามให้คะแนนที่ดี (90-100) คะแนน "ดีมาก" 100 คะแนนคือสิ่งที่ท้าทายอย่างยิ่งที่จะได้มาและเป็นสิ่งที่ไม่คาดคิด ตัวอย่างเช่น หากนำคะแนนจาก 99 เป็น 100 ความต้องการในการปรับปรุงเมตริกพอๆ กัน ก็จะได้ 90 ถึง 94 คะแนน

นักพัฒนาแอปควรทำอย่างไรเพื่อปรับปรุงคะแนนประสิทธิภาพของตน

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

ในส่วนโอกาสในรายงาน Lighthouse จะมีคำแนะนำโดยละเอียดและเอกสารเกี่ยวกับวิธีใช้งาน นอกจากนี้ ส่วนการวินิจฉัยยังมีคําแนะนําเพิ่มเติมที่นักพัฒนาแอปสามารถสํารวจเพื่อปรับปรุงประสิทธิภาพเพิ่มเติมได้