Time to First Byte (TTFB) เป็นเมตริกพื้นฐานในการวัดเวลาตั้งค่าการเชื่อมต่อและการตอบสนองของเว็บเซิร์ฟเวอร์ทั้งในห้องทดลองและภาคสนาม โดยวัดเวลาระหว่างคำขอทรัพยากรและเวลาที่ไบต์แรกของการตอบกลับเริ่มมาถึง วิธีนี้จะมีประโยชน์ในการระบุเมื่อเว็บเซิร์ฟเวอร์ตอบสนองคำขอช้าเกินไป ในกรณีของคำขอการนำทาง ซึ่งก็คือคำขอเอกสาร HTML จะแสดงก่อนหน้าเมตริกประสิทธิภาพการโหลดที่สำคัญอื่นๆ ทั้งหมด
TTFB คือผลรวมของขั้นตอนคำขอต่อไปนี้
- เวลาในการเปลี่ยนเส้นทาง
- เวลาเริ่มต้นของโปรแกรมทำงานของบริการ (หากมี)
- การค้นหา DNS
- การเชื่อมต่อและการเจรจา TLS
- คำขอ จนกว่าการตอบกลับไบต์แรกจะมาถึง
การลดเวลาในการตอบสนองของเวลาในการตั้งค่าการเชื่อมต่อและแบ็กเอนด์จะช่วยลด TTB ของคุณ
คะแนน TTFB ที่ดีคืออะไร
เนื่องจาก TTFB จะเกิดขึ้นก่อนเมตริกที่เน้นผู้ใช้ เช่น First Contentful Paint (FCP) และการแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP) เราจึงขอแนะนำให้เซิร์ฟเวอร์ตอบกลับคำขอการนำทางอย่างรวดเร็วพอเพื่อให้เปอร์เซ็นไทล์ที่ 75 ของผู้ใช้ได้รับ FCP อยู่ในเกณฑ์ "ดี" โดยทั่วไป เว็บไซต์ส่วนใหญ่ควรพยายามให้มี TTFB ไม่เกิน 0.8 วินาที
ประเด็นสำคัญ: เนื่องจาก TTFB ไม่ใช่เมตริก Core Web Vitals จึงไม่จำเป็นอย่างยิ่งสำหรับเว็บไซต์ที่มี TTFB ที่ยอดเยี่ยม ตราบใดที่ TTFB ที่ยาวกว่าไม่ได้ทำให้เว็บไซต์ได้รับคะแนนในเมตริกที่สำคัญได้ยากขึ้น เมื่อเพิ่มประสิทธิภาพเวลาที่ใช้ในการโหลด ให้พิจารณาถึงวิธีการแสดงเนื้อหาของเว็บไซต์ของคุณ TTFB ที่ต่ำมีความสำคัญอย่างยิ่งหากเว็บไซต์ส่งมาร์กอัปเริ่มต้นอย่างรวดเร็ว จากนั้นต้องรอให้สคริปต์ใส่เนื้อหาที่มีความหมาย ดังเช่นกรณีปกติที่มีกับแอปพลิเคชันหน้าเว็บเดียว (SPA) ในทางกลับกัน เว็บไซต์ที่แสดงผลจากเซิร์ฟเวอร์ซึ่งไม่ต้องใช้งานฝั่งไคลเอ็นต์มากนักอาจมีค่า FCP และ LCP ดีกว่าเว็บไซต์ที่แสดงผลโดยไคลเอ็นต์ แม้จะเป็น TTFB ที่สูงกว่าก็ตาม
วิธีวัด 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
});
ไลบรารี 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 might have a responseStart value of 0 if they're being
// cached, or if a cross-origin resource is 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