เวลาในการบล็อกรวม (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