เวลาในการบล็อกรวม (TBT) คือเมตริกหนึ่งที่มีการติดตามในส่วนประสิทธิภาพของรายงาน Lighthouse แต่ละเมตริกจะแสดงข้อมูลของความเร็วในการโหลดหน้าเว็บ
รายงาน Lighthouse จะแสดง TBT ในหน่วยมิลลิวินาทีดังนี้
สิ่งที่ TBT ใช้วัด
TBT จะวัดระยะเวลารวมที่หน้าเว็บถูกบล็อกไม่ให้ตอบสนองต่อข้อมูลจากผู้ใช้ เช่น การคลิกเมาส์ การแตะหน้าจอ หรือการกดแป้นพิมพ์ ผลรวมจะคำนวณโดยการเพิ่มส่วนการบล็อกของงานที่ใช้เวลานานทั้งหมดระหว่าง First Contentful Paint กับ Time to Interactive งานใดๆ ที่ดำเนินการเกิน 50 มิลลิวินาทีเป็นงานที่ใช้เวลานาน ระยะเวลาหลังจาก 50 มิลลิวินาทีคือส่วนที่บล็อก ตัวอย่างเช่น หาก Lighthouse ตรวจพบงานที่ใช้เวลานาน 70 มิลลิวินาที ส่วนที่บล็อกจะเป็น 20 มิลลิวินาที
วิธีที่ Lighthouse กำหนดคะแนน TBT
คะแนน TBT คือการเปรียบเทียบเวลา TBT ของหน้าเว็บกับ TBT คูณกับไซต์จริงหลายล้านรายการเมื่อโหลดบนอุปกรณ์เคลื่อนที่ ดูวิธีกำหนดคะแนนเมตริก เพื่อดูวิธีกำหนดเกณฑ์คะแนนของ Lighthouse
ตารางนี้แสดงวิธีตีความคะแนน TBT
| เวลา TBT (เป็นมิลลิวินาที) |
การเขียนโค้ดสี |
|---|---|
| 0-200 คน | เขียว (เร็ว) |
| 200-600 | ส้ม (ปานกลาง) |
| มากกว่า 600 | แดง (ช้า) |
วิธีปรับปรุงคะแนน TBT
ดูสาเหตุของงานที่ใช้เวลานานของฉันเพื่อดูวิธีวินิจฉัยสาเหตุหลักของงานที่ใช้เวลานานด้วยแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
โดยทั่วไปแล้ว สาเหตุที่พบบ่อยที่สุดของงานที่ใช้เวลานานมีดังนี้
- การโหลด การแยกวิเคราะห์ หรือการเรียกใช้ JavaScript โดยไม่จำเป็น ขณะวิเคราะห์โค้ดในแผงประสิทธิภาพ คุณอาจพบว่าเทรดหลักทำงานที่ไม่จำเป็นจริงๆ ในการโหลดหน้าเว็บ การลดเพย์โหลด JavaScript ด้วยการแยกโค้ด การนำโค้ดที่ไม่ได้ใช้ออก หรือการโหลด JavaScript ของบุคคลที่สามอย่างมีประสิทธิภาพจะช่วยให้คะแนน TBT ดีขึ้น
- ข้อความ JavaScript ที่ไม่มีประสิทธิภาพ ตัวอย่างเช่น หลังจากวิเคราะห์โค้ดในแผงประสิทธิภาพแล้ว สมมติว่าคุณเห็นการเรียกไปยัง
document.querySelectorAll('a')ที่ส่งคืน 2,000 โหนด การเปลี่ยนโครงสร้างโค้ดเพื่อใช้ตัวเลือกที่เจาะจงมากขึ้นซึ่งแสดงผลเพียง 10 โหนด จะช่วยให้คะแนน TBT ดีขึ้น
วิธีปรับปรุงคะแนนประสิทธิภาพโดยรวม
หากคุณไม่มีเหตุผลเฉพาะเจาะจงที่มุ่งเน้นไปที่เมตริกใดโดยเฉพาะ การมุ่งเน้นไปที่การปรับปรุงคะแนนประสิทธิภาพโดยรวมจะดีกว่า
ใช้ส่วนโอกาสของรายงาน Lighthouse เพื่อดูว่าการปรับปรุงใดจะสร้างประโยชน์สูงสุดสำหรับหน้าเว็บของคุณ ยิ่งโอกาสมีนัยสำคัญมากเท่าไร ก็ยิ่งมีผลกระทบต่อคะแนนประสิทธิภาพมากเท่านั้น ตัวอย่างเช่น ภาพหน้าจอของ Lighthouse ด้านล่างแสดงให้เห็นว่าการกำจัดทรัพยากรที่บล็อกการแสดงผลจะให้ผลลัพธ์การปรับปรุงที่ดีที่สุดดังนี้
ดูหน้า Landing Page ของการตรวจสอบประสิทธิภาพเพื่อดูวิธีจัดการกับโอกาสที่ระบุไว้ในรายงาน Lighthouse