เผยแพร่: 7 พฤศจิกายน 2019, อัปเดตล่าสุด: 15 ตุลาคม 2025
TBT คืออะไร
เมตริกเวลาในการบล็อกทั้งหมด (TBT) จะวัดระยะเวลารวมหลังจาก First Contentful Paint (FCP) ซึ่งมีการบล็อกเทรดหลักเป็นเวลานานพอที่จะป้องกันการตอบสนองต่ออินพุต
โดยค่าเริ่มต้น Lighthouse จะหยุดตรวจสอบ TBT หลังจากเวลาในการโต้ตอบ (TTI) เช่นเดียวกับเครื่องมือในห้องทดลองอื่นๆ ที่วัดการโหลดหน้าเว็บ ดูTBT เกี่ยวข้องกับ TTI อย่างไร
ระบบจะถือว่าเทรดหลัก "ถูกบล็อก" เมื่อใดก็ตามที่มีงานที่ใช้เวลานาน ซึ่งเป็นงานที่ทำงานในเทรดหลักนานกว่า 50 มิลลิวินาที เรากล่าวว่าเทรดหลัก "ถูกบล็อก" เนื่องจากเบราว์เซอร์ไม่สามารถขัดจังหวะงานที่กำลังดำเนินการอยู่ได้ ดังนั้นในกรณีที่ผู้ใช้โต้ตอบกับหน้าเว็บในระหว่างงานที่ใช้เวลานาน เบราว์เซอร์จะต้องรอให้งานเสร็จสิ้นก่อนจึงจะตอบสนองได้
หากงานใช้เวลานานพอ (นานกว่า 50 มิลลิวินาที) ผู้ใช้อาจสังเกตเห็นความล่าช้าและรู้สึกว่าหน้าเว็บทำงานช้าหรือใช้งานไม่ได้
เวลาที่ถูกบล็อกของงานที่ใช้เวลานานที่กำหนดคือระยะเวลาที่เกิน 50 มิลลิวินาที และเวลาที่ถูกบล็อกทั้งหมดของหน้าเว็บคือผลรวมของเวลาที่ถูกบล็อกสำหรับแต่ละงานที่ใช้เวลานานซึ่งเกิดขึ้นหลังจาก FCP ในกรอบเวลาที่วัด (โดยปกติคือ TTI สำหรับเครื่องมือโหลดหน้าเว็บ หรือเวลาในการติดตามทั้งหมดสำหรับเครื่องมืออื่นๆ)
ตัวอย่างเช่น ลองดูแผนภาพต่อไปนี้ของเทรดหลักของเบราว์เซอร์ระหว่างการโหลดหน้าเว็บ
ไทม์ไลน์ที่แสดงในรูปภาพก่อนหน้ามี 5 งาน ซึ่ง 3 งานเป็นงานที่ใช้เวลานานเนื่องจากมีระยะเวลานานกว่า 50 มิลลิวินาที แผนภาพถัดไปแสดงเวลาที่ถูกบล็อกสำหรับแต่ละงานที่ใช้เวลานาน
ดังนั้นแม้ว่าเวลาทั้งหมดที่ใช้ในการเรียกใช้งานในเทรดหลักจะอยู่ที่ 560 มิลลิวินาที แต่ระบบจะพิจารณาเฉพาะ 345 มิลลิวินาทีของเวลานั้นเป็นเวลาที่ถูกบล็อก
| ระยะเวลาของงาน (มิลลิวินาที) | เวลาในการบล็อกงาน (มิลลิวินาที) | |
|---|---|---|
| งานที่ 1 | 250 | 200 |
| งานที่ 2 | 90 | 40 |
| งานที่ 3 | 35 | 0 |
| งานที่ 4 | 30 | 0 |
| งานที่ 5 | 155 | 105 |
| เวลาในการบล็อกทั้งหมด | 345 มิลลิวินาที | |
TBT เกี่ยวข้องกับ INP อย่างไร
TBT เกิดขึ้นก่อน INP และมีประโยชน์ในฐานะตัวบ่งชี้ปัญหา INP โดยเฉพาะในสภาพแวดล้อมของห้องทดลองซึ่งการวัด INP ทำได้ยากกว่า อย่างไรก็ตาม TBT สามารถแจ้งปัญหาที่อาจเกิดขึ้นได้ในกรณีที่ผู้ใช้อาจไม่พบปัญหาใดๆ หากไม่ได้โต้ตอบในขณะนั้น และยังอาจพลาดปัญหาที่เกิดจากการโต้ตอบเมื่อวัดในสภาพแวดล้อมของห้องทดลองด้วย เราขอแนะนำให้วัด INP ในภาคสนามเพื่อเป็นตัวชี้วัดปัญหาการตอบสนองที่แท้จริงตามที่ผู้ใช้ได้รับ TBT อาจเป็นเมตริกพร็อกซีที่สมเหตุสมผลสำหรับ INP ในห้องทดลอง แต่ไม่ได้ใช้แทน INP ในตัวของมันเอง
TBT เกี่ยวข้องกับ TTI อย่างไร
TBT จะวัดในช่วงระยะเวลาหนึ่ง สำหรับเครื่องมือใน Lab บางอย่างที่โดยปกติจะวัดการโหลดหน้าเว็บ รวมถึง Lighthouse เราได้วัด TBT จนถึง TTI เนื่องจากจะช่วยระบุความรุนแรงของระดับการโต้ตอบของหน้าเว็บก่อนที่จะกลายเป็นหน้าเว็บที่มีการโต้ตอบที่เชื่อถือได้ อย่างไรก็ตาม TBT อาจยังคงวัดได้หลังจากหน้าเว็บโหลดและหลังจาก TTI เช่น ในโหมดช่วงเวลาของ Lighthouse
TTI จะพิจารณาว่าหน้าเว็บ "โต้ตอบได้อย่างน่าเชื่อถือ" หากเทรดหลักไม่มีงานที่ใช้เวลานานอย่างน้อย 5 วินาที ซึ่งหมายความว่างาน 3 รายการที่มีระยะเวลา 51 มิลลิวินาทีซึ่งกระจายอยู่ตลอด 10 วินาทีอาจทำให้ TTI ช้าลงได้พอๆ กับงานเดียวที่มีระยะเวลา 10 วินาที แต่ผู้ใช้ที่พยายามโต้ตอบกับหน้าเว็บจะรู้สึกถึงความแตกต่างอย่างมากใน 2 สถานการณ์นี้
ในกรณีแรก งาน 3 งานที่มีระยะเวลา 51 มิลลิวินาทีจะมี TBT เท่ากับ 3 มิลลิวินาที ในขณะที่งานเดียวที่ใช้เวลา 10 วินาทีจะมี TBT เท่ากับ 9950 มิลลิวินาที ค่า TBT ที่สูงกว่าในกรณีที่ 2 จะวัดปริมาณประสบการณ์ที่แย่กว่า
ตัวอย่างนี้แสดงให้เห็นว่าทำไม TBT จึงมักเป็นเมตริกที่ดีกว่า TTI เนื่องจากมีแนวโน้มที่จะเกิดค่าผิดปกติน้อยกว่า แม้ว่า TTI จะใช้เป็นจุดสิ้นสุดสำหรับ TBT ก็ตาม
วิธีวัด TBT
TBT เป็นเมตริกที่ควรวัดในห้องทดลอง วิธีที่ดีที่สุดในการวัด TBT คือการเรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse ในเว็บไซต์ ดูรายละเอียดการใช้งานได้ในเอกสารประกอบ Lighthouse เกี่ยวกับ TBT
คุณวัด TBT ในภาคสนามได้ แต่เราไม่แนะนำให้ทำเช่นนี้เนื่องจากการโต้ตอบของผู้ใช้อาจส่งผลต่อ TBT ของหน้าเว็บในลักษณะที่ทำให้เกิดความแปรปรวนจำนวนมากในรายงาน แต่เราขอแนะนำให้ดู Long Animations Frame API ในภาคสนามเวอร์ชันใหม่กว่า หากต้องการดูการโต้ตอบ INP มากกว่า 1 รายการ
เครื่องมือในห้องทดลอง
คะแนน TBT ที่ดีคือเท่าใด
เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เว็บไซต์ควรพยายามให้มีเวลาในการบล็อกทั้งหมดน้อยกว่า 200 มิลลิวินาทีเมื่อทดสอบในฮาร์ดแวร์มือถือโดยเฉลี่ย
ดูรายละเอียดเกี่ยวกับวิธีที่ TBT ของหน้าเว็บส่งผลต่อคะแนนประสิทธิภาพของ Lighthouse ได้ที่วิธีที่ Lighthouse กำหนดคะแนน TBT
วิธีปรับปรุง TBT
โดยทั่วไป เราขอแนะนำให้เพิ่มประสิทธิภาพเพื่อ INP มากกว่า TBT เนื่องจากเราแนะนำให้ใช้ TBT เป็นเมตริกพร็อกซีสำหรับ INP ในห้องทดลอง (ซึ่งมักจะวัด INP ได้ไม่ถูกต้อง) ดังนั้น หากต้องการปรับปรุง TBT โปรดดูคําแนะนําสําหรับการเพิ่มประสิทธิภาพ INP
หากต้องการดู TBT โดยเฉพาะ คุณสามารถเรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse และให้ความสนใจกับโอกาสที่การตรวจสอบแนะนำ
โดยทั่วไปแล้ว การปรับปรุง TBT สำหรับเว็บไซต์เกี่ยวข้องกับการลดจำนวนสคริปต์ที่บล็อก ซึ่งหมายถึงการเพิ่มประสิทธิภาพสคริปต์เหล่านั้นให้บล็อกน้อยลง หรือลดจำนวนสคริปต์โดยรวม ดูคู่มือประสิทธิภาพต่อไปนี้