TTFB คืออะไร
TTFB คือเมตริกที่วัดเวลาระหว่างคําขอทรัพยากรกับเวลาที่ไบต์แรกของการตอบกลับเริ่มมาถึง
TTFB คือผลรวมของระยะการขอต่อไปนี้
- เวลาในการเปลี่ยนเส้นทาง
- เวลาเริ่มต้นของ Service Worker (หากมี)
- การค้นหา 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 สําหรับคําขอไปยังส่วนต่างๆ ของเว็บไซต์ ยกเว้นคุณจะค้นหารายการ 'resource'
แทนการค้นหารายการ 'navigation'
นอกจากนี้ ยังพิจารณาถึงความจริงที่ว่าทรัพยากรบางอย่างที่โหลดจากต้นทางหลักอาจแสดงผลเป็นค่า 0
เนื่องจากการเชื่อมต่อเปิดอยู่หรือมีการดึงข้อมูลทรัพยากรจากแคชทันที
วิธีปรับปรุง TTFB
ดูคําแนะนําในการปรับปรุง TTFB ของเว็บไซต์ได้จากคู่มือฉบับละเอียดเกี่ยวกับการเพิ่มประสิทธิภาพ TTFB