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

Jeremy Wagner
Barry Pollard

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

  • 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 คือผลรวมของระยะการขอต่อไปนี้

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

วิธีปรับปรุง TTFB

ดูคําแนะนําในการปรับปรุง TTFB ของเว็บไซต์ได้จากคู่มือฉบับละเอียดเกี่ยวกับการเพิ่มประสิทธิภาพ TTFB