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