TTFB คืออะไร
TTFB เป็นเมตริกที่วัดเวลาระหว่างคำขอทรัพยากรจนถึงเวลาที่ไบต์แรกของคำตอบเริ่มมาถึง
startTime ถึง responseStart
TTFB คือผลรวมของขั้นตอนคำขอต่อไปนี้
- เวลาในการเปลี่ยนเส้นทาง
- เวลาเริ่มต้นของโปรแกรมทำงานของบริการ (หากมี)
- การค้นหา DNS
- การเชื่อมต่อและการเจรจา TLS
- คำขอจนถึงจุดที่ไบต์แรกของคำตอบได้รับ
การลดเวลาในการตอบสนองของเวลาตั้งค่าการเชื่อมต่อและในแบ็กเอนด์สามารถลด TTFB ได้
คำจำกัดความอื่นๆ ของ TTFB
คำจำกัดความก่อนหน้านี้เป็นคำจำกัดความโดยทั่วไป แต่ด้วยการแนะนำ Early Hints สิ่งที่ถือเป็น "ไบต์แรก" ถือเป็นการถกเถียง firstInterimResponse เป็นรายการเวลาเพิ่มเติมแบบใหม่ใน responseStart เพื่อแยกความแตกต่างระหว่างเวลาเหล่านี้ แต่การตั้งค่านี้รองรับเฉพาะในเบราว์เซอร์ Chrome และ Chromium เท่านั้น ดังนั้นเบราว์เซอร์และเครื่องมือบางอย่าง (รวมถึง CrUX) จะวัดจนกว่าจะได้รับไบต์แรกพร้อมคำแนะนำเบื้องต้น
คำแนะนำเบื้องต้นเป็นเพียงตัวอย่างที่ใหม่กว่าของการตอบกลับตั้งแต่เนิ่นๆ เซิร์ฟเวอร์บางแห่งอนุญาตให้ล้างการตอบกลับเอกสารได้ก่อนที่เนื้อหาหลักจะพร้อมใช้งาน ไม่ว่าจะมีส่วนหัว HTTP เท่านั้น หรือมีองค์ประกอบ <head> ซึ่งทั้ง 2 อย่างนี้จะถือว่าเหมือนกันกับคำแนะนำเบื้องต้น และให้ระบบคลาวด์แก่คำจำกัดความของสิ่งที่ TTFB วัดด้วย
สำหรับการวัดว่าเบราว์เซอร์ได้รับ "ไบต์แรก" ของข้อมูลที่ดำเนินการได้สำหรับเอกสารเมื่อใด คำนิยามทั้งหมดเหล่านี้จะถือว่าถูกต้อง มีความคุ้มค่าที่แท้จริงในการส่งข้อมูลกลับก่อนเวลาหากการตอบสนองเต็มรูปแบบจะใช้เวลานานขึ้น สิ่งสำคัญที่สุดคือต้องเข้าใจว่าเครื่องมือที่ใช้วัดผลคืออะไรและส่งผลกระทบต่ออะไรจากแพลตฟอร์มที่กำลังวัดผล ซึ่งทำให้เปรียบเทียบ TTFB ในแพลตฟอร์มหรือเทคโนโลยีต่างๆ ได้ยากขึ้น โดยขึ้นอยู่กับฟีเจอร์ที่ใช้และผลกระทบที่มีต่อการวัดผลของ TTFB ที่ใช้อยู่
TTFB มักถือเป็นตัวบ่งชี้เวลาการตอบสนองของเซิร์ฟเวอร์หรือโฮสต์ แต่จะได้รับผลกระทบจากปัจจัยที่อยู่นอกเหนือการควบคุมโดยตรงดังกล่าว เช่น เวลาในการเปลี่ยนเส้นทาง ไม่ว่าเวลาดังกล่าวจะเป็นการแสดงผลจากแคชที่ CDN ตรวจพบ หรือต้องมีเส้นทางกลับไปยังเซิร์ฟเวอร์ต้นทางที่นานขึ้น กรณีนี้เห็นได้ชัดเจนในข้อมูลภาคสนาม โดยการทดสอบในห้องทดลองมักจะได้รับผลกระทบจากปัจจัยเหล่านี้น้อยกว่า เนื่องจาก URL สุดท้ายจะได้รับการทดสอบและมักปฏิเสธการเปลี่ยนแปลงการแคชซ้ำๆ Lighthouse จะรายงานเวลาในการตอบกลับของเซิร์ฟเวอร์แทน TTFB เพื่อความชัดเจนยิ่งขึ้น แต่เครื่องมืออื่นๆ ของ Lab อาจไม่เห็น
คะแนน TTFB ที่ดีคือเท่าใด
เนื่องจาก TTFB อยู่ก่อนเมตริกที่เน้นผู้ใช้เป็นหลัก เช่น First Contentful Paint (FCP) และ Largest Contentful Paint (LCP) จึงขอแนะนำให้เซิร์ฟเวอร์ของคุณตอบสนองต่อคำขอการนำทางอย่างรวดเร็วมากพอเพื่อให้เปอร์เซ็นไทล์ที่ 75 ของผู้ใช้ได้รับประสบการณ์ FCP ภายในเกณฑ์ "ดี" เพื่อเป็นแนวทางคร่าวๆ ให้เว็บไซต์ส่วนใหญ่พยายามให้มี TTFB 0.8 วินาทีหรือน้อยกว่านั้น
วิธีวัด TTFB
คุณสามารถวัด TTFB ได้ในห้องทดลองหรือในภาคสนามด้วยวิธีต่อไปนี้
เครื่องมือภาคสนาม
เครื่องมือในห้องทดลอง
- ในแผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome
- WebPageTest
วัด TTFB ใน JavaScript
คุณสามารถวัด TTFB ของคำขอการนำทางในเบราว์เซอร์ได้ด้วย Accessibility Timing API ตัวอย่างต่อไปนี้แสดงวิธีสร้าง PerformanceObserver ที่รอฟังรายการ navigation และบันทึกลงในคอนโซล
new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});
นอกจากนี้ ไลบรารี JavaScript ของ web-vitals ยังวัด TTFB ในเบราว์เซอร์อย่างกระชับยิ่งขึ้นด้วย ดังนี้
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
วัดคำขอทรัพยากร
TTFB มีผลกับคำขอทั้งหมด ไม่ใช่แค่คำขอการนำทางเท่านั้น โดยเฉพาะอย่างยิ่ง ทรัพยากรที่โฮสต์ในเซิร์ฟเวอร์แบบข้ามต้นทางอาจทําให้เกิดเวลาในการตอบสนองเนื่องจากจําเป็นต้องตั้งค่าการเชื่อมต่อกับเซิร์ฟเวอร์เหล่านั้น หากต้องการวัด TTFB สำหรับทรัพยากรในฟิลด์ ให้ใช้ Resource Timing API ภายใน PerformanceObserver ดังนี้
new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
for (const entry of entries) {
// Some resources may have a responseStart value of 0, due
// to the resource being cached, or a cross-origin resource
// being served without a Timing-Allow-Origin header set.
if (entry.responseStart > 0) {
console.log(`TTFB: ${entry.responseStart}`, entry.name);
}
}
}).observe({
type: 'resource',
buffered: true
});
ข้อมูลโค้ดก่อนหน้านี้คล้ายกับข้อมูลโค้ดที่ใช้วัด TTFB สำหรับคำขอการนำทาง ยกเว้นแทนที่จะค้นหารายการ 'navigation' คุณจะค้นหารายการ 'resource' แทน นอกจากนี้ยังอธิบายข้อเท็จจริงที่ว่าทรัพยากรบางรายการที่โหลดจากต้นทางหลักอาจแสดงผลค่า 0 เนื่องจากการเชื่อมต่อเปิดอยู่แล้ว หรือมีการเรียกแหล่งข้อมูลจากแคชโดยทันที
วิธีปรับปรุง TTFB
สำหรับคำแนะนำในการปรับปรุง TTFB ของเว็บไซต์ โปรดดูคู่มือเชิงลึกของเราเกี่ยวกับการเพิ่มประสิทธิภาพ TTFB