TTFB คืออะไร
TTFB คือเมตริกที่วัดเวลาระหว่างคําขอทรัพยากรกับเวลาที่ไบต์แรกของการตอบกลับเริ่มมาถึง
startTime ถึง responseStart
TTFB คือผลรวมของระยะการขอต่อไปนี้
- เวลาในการเปลี่ยนเส้นทาง
- เวลาเริ่��ต้นของ Service Worker (หากมี)
- การค้นหา DNS
- การเชื่อมต่อและการเจรจา TLS
- คำขอจนถึงเวลาที่ไบต์แรกของการตอบกลับมาถึง
การลดเวลาในการตอบสนองของการตั้งค่าการเชื่อมต่อและในแบ็กเอนด์จะช่วยลด TTFB ได้
TTFB และคำแนะนำเบื้องต้น
การนำ103 Early Hints มาใช้ทำให้เกิดความสับสนเกี่ยวกับสิ่งที่ TTFB "ไบต์แรก" วัด คำแนะนำเบื้องต้น 103 รายการจะนับเป็น "ไบต์แรก" finalResponseHeadersStart คือรายการการวัดเวลาเพิ่มเติมใน responseStart ซึ่งจะวัดการเริ่มต้นการตอบกลับเอกสารฉบับสุดท้าย (โดยทั่วไปคือการตอบกลับ HTTP 200)
คำแนะนำเบื้องต้นเป็นเพียงตัวอย่างการตอบกลับตั้งแต่เนิ่นๆ รูปแบบใหม่ เซิร์ฟเวอร์บางเครื่องอนุญาตให้ล้างการตอบสนองของเอกสารก่อนเวลาอันควรก่อนที่เนื้อหาหลักจะพร้อมใช้งาน โดยใช้เพียงส่วนหัว HTTP หรือใช้เอลิเมนต์ <head> ซึ่งทั้ง 2 กรณีนี้อาจถือว่าให้��ลคล้ายกับการแสดงตัวอย่างข้อมูลล่วงหน้า นี่เป็นอีกเหตุผลหนึ่งที่เราวัดค่าทั้งหมดเหล่านี้เป็น reponseStart และ TTFB
การส่งข้อมูลกลับตั้งแต่เนิ่นๆ มีประโยชน์อย่างยิ่งหากการตอบกลับอย่างเต็มรูปแบบจะใช้เวลาอีกสักระยะ อย่างไรก็ตาม ข้อมูลนี้ทําให้เปรียบเทียบ TTFB ในแพลตฟอร์มหรือเทคโนโลยีต่างๆ ได้ยาก เนื่องจากขึ้นอยู่กับฟีเจอร์ที่ใช้และผลกระทบต่อวิธีการวัด TTFB ที่ใช้ สิ่งสำคัญที่สุดคือการทำความเข้าใจสิ่งที่เครื่องมือที่คุณใช้วัด และผลกระทบที่เครื่องมือนั้นได้รับจากแพลตฟอร์มที่วัด
คะแนน 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