เวลาถึงไบต์แรก (TTFB)

การรองรับเบราว์เซอร์

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 11.

แหล่งที่มา

TTFB คืออะไร

TTFB เป็นเมตริกที่วัดเวลาระหว่างคำขอทรัพยากรจนถึงเวลาที่ไบต์แรกของคำตอบเริ่มมาถึง

การแสดงภาพลําดับเวลาของคําขอเครือข่าย ลำดับเวลาจากซ้ายไปขวาคือการเปลี่ยนเส้นทาง, การเริ่มต้น Service Worker, เหตุการณ์การดึงข้อมูล Service Worker, แคช HTTP, DNS, TCP, คำขอ, คำแนะนำก่อนเวลาอันควร (103), การตอบกลับ (ซึ่งซ้อนทับกับข้อความแจ้งให้ยกเลิกการโหลด), การประมวลผล และการโหลด ช่วงเวลาที่เกี่ยวข้อง ได้แก่ redirectStart และ redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart และ loadEventEnd
แผนภาพระยะต่างๆ ของคําขอเครือข่ายและช่วงเวลาที่เกี่ยวข้อง TTFB จะวัดเวลาผ่านไประหว่าง startTime ถึง responseStart

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 ที่ดีคือไม่เกิน 0.8 วินาที ค่าที่ไม่ดีควรมากกว่า 1.8 วินาที และค่าที่อยู่ระหว่างต้องปรับปรุง
ค่า TTFB ที่ดีคือ 0.8 วินาทีหรือน้อยกว่า และค่าที่ไม่ดีคือมากกว่า 1.8 วินาที

วิธีวัด TTFB

TTFB สามารถวัดได้ในห้องทดลองหรือภาคสนามด้วยวิธีต่อไปนี้

เครื่องมือภาคสนาม

เครื่องมือของห้องทดลอง

วัด 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