TTFB คืออะไร
TTFB เป็นเมตริกที่วัดเวลาระหว่างคำขอทรัพยากรจนถึงเวลาที่ไบต์แรกของคำตอบเริ่มมาถึง
TTFB คือผลรวมของขั้นตอนคำขอต่อไปนี้
- เวลาในการเปลี่ยนเส้นทาง
- เวลาเริ่มต้นของโปรแกรมทำงานของบริการ (หากมี)
- การค้นหา DNS
- การเชื่อมต่อและการเจรจา TLS
- คำขอจนถึงเวลาที่ไบต์แรกของการตอบกลับมาถึง
การลดเวลาในการตอบสนองของการตั้งค่าการเชื่อมต่อและในแบ็กเอนด์จะช่วยลด TTFB ได้
คำจำกัดความอื่นๆ ของ TTFB
คําจํากัดความก่อนหน้านี้เป็นคําจํากัดความตามแบบแผน แต่เมื่อมีคำแนะนำเบื้องต้น สิ่งใดที่ถือว่าเป็น "ไบต์แรก" นั้นเป็นเรื่องที่ถกเถียงกันได้ firstInterimResponseStart
คือรายการเวลาเพิ่มเติมใหม่สำหรับ 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 ของคำขอไปยังส่วนต่างๆ ในเบราว์เซอร์ได้ด้วย Navigation Timing API ตัวอย่างต่อไปนี้แสดงวิธีสร้าง PerformanceObserver
ที่คอยฟังรายการ navigation
และบันทึกลงในคอนโซล
new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});
web-vitals
ไลบรารี JavaScript ยังวัด 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