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

Barry Pollard
Jeremy Wagner

Browser Support

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

Source

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 และคำแนะนำเบื้องต้น

การนำ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 ที่ดีคือ 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